Quick Tutorial: Playwright Network Mocking — Abort
Quick Tutorial: Playwright Network Mocking — Abort
Getting started
On a similar note to API mocking, there are many network requests which are made every time we load our web pages. And 9 times out of 10, we don’t actually care that any of these requests actually load, we are just trying to assert that a single component of the page is rendered.
This is where we can benefit from network mocking — page.route + route.abort, allows us to handle the requests being made and abort them.
In this instance we are testing https://imgur.com, which is a content heavy website — so we are going to abort requests for PNG, JPEG, WEBP, and GIF files.
test('loads page without content', async ({ page }) => {
// Block PNG, JPEG, WEBP, and GIF images.
await page.route(/\.(png|jpeg|webp|gif)/, route => route.abort());
await page.goto('https://imgur.com/');
await page.getByLabel('Consent', { exact: true }).click();
await expect(page.getByRole('link', { name: 'New post' })).toBeVisible();
});
If we run the test in headed mode, this is what we see on the web page, with the image content being blocked:
Without route.abort for network requests
Firstly let’s run the test without the network routing — as you can see below, the test executed in 13.3 seconds.
npx playwright test
Running 1 test using 1 worker
1 passed (13.3s)
With route.abort for network requests
Now let’s run the test with network routing — much faster, we’ve managed to bring the test execution time under 10 seconds!
npx playwright test
Running 1 test using 1 worker
1 passed (9.7s)
Conclusion
As you can see, quite a significant improvement in execution speed — with the requests being aborted, we’ve cut the execution time by 3.6 seconds.
Now imagine this across your whole test suite, being executed numerous times per day — the time saved will add up very quickly.
This single line of code can help accelerate test execution and speed up your CI pipelines, with no impact on test coverage.