Playwright Network Interception and Mock |

\\n\\n

This chapter introduces how to use Playwright to intercept, modify, and mock network requests, enabling independent testing without relying on backend APIs.

\\n\\n

---

\\n\\n

What is Network Interception?

\\n\\n

Network interception allows you to intervene when the browser initiates HTTP requests.

\\n\\n

You can block requests, modify responses, or return mock data, making tests independent of external APIs or network conditions.

\\n\\n

---

\\n\\n

Intercepting Requests with page.route()

\\n\\n

page.route(url, handler) intercepts all network requests matching the specified URL pattern.

\\n\\n

Basic Interception

\\n\\n

Example

\\n\\n

test('Intercept all image requests', async ({ page })=>{\\n\\n// Intercept all PNG and JPEG images\\n\\n await page.route('**/*.{png,jpg,jpeg}', route => route.abort());\\n\\n// Navigate to the page (images will not be loaded)\\n\\n await page.goto('');\\n\\n// Page may load faster since images are not downloaded\\n\\n});

\\n\\n

URL matching patterns support the following formats:

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

Pattern	Example	Description
Full URL	'https://api.example.com/users'	Exact match
Glob wildcard	'**/api/**'	** matches any path
Regular expression	//api/vd/users/	Flexible matching
Function	url => url.includes('/api/')	Programmatic logic matching

\\n\\n

---

\\n\\n

route.abort() — Blocking Requests

\\n\\n

Example

\\n\\n

test('Block third-party analytics scripts', async ({ page })=>{\\n\\n// Block analytics scripts like Google Analytics\\n\\n await page.route('**/*analytics*', route => route.abort());\\n\\n// Block CSS files\\n\\n await page.route('**/*.css', route => route.abort());\\n\\nawait page.goto('');\\n\\n// Page loads without styles, but functionality testing remains unaffected\\n\\n});

\\n\\n

---

\\n\\n

route.fulfill() — Mocking Responses

\\n\\n

route.fulfill() is the most powerful mocking method, allowing you to return any custom response.

\\n\\n

Mocking JSON Data

\\n\\n

Example

\\n\\n

test('Mock Users List API', async ({ page })=>{\\n\\n// Intercept the users list API and return mock data\\n\\n await page.route('**/api/users', async route =>{\\n\\n await route.fulfill({\\n\\n status:200,\\n\\n contentType:'application/json',\\n\\n json:[\\n\\n{ id:1, name:'tutorial_user', email:'user@'},\\n\\n{ id:2, name:'test_user', email:'test@'},\\n\\n],\\n\\n});\\n\\n});\\n\\nawait page.goto('');\\n\\n// Page displays mock data instead of real API data\\n\\n});

\\n\\n

Mocking Error Responses

\\n\\n

Example

\\n\\n

test('Test API error handling', async ({ page })=>{\\n\\n// Simulate a 500 server error\\n\\n await page.route('**/api/data', async route =>{\\n\\n await route.fulfill({\\n\\n status:500,\\n\\n contentType:'application/json',\\n\\n json:{ error:'Server Internal Error'},\\n\\n});\\n\\n});\\n\\nawait page.goto('');\\n\\n// Verify that the error message is displayed correctly\\n\\n await expect(page.getByText('Server Internal Error')).toBeVisible();\\n\\n});

\\n\\n

---

\\n\\n

route.continue() — Modifying and Continuing

\\n\\n

Instead of directly returning mock data, this method modifies the actual request or response before forwarding it to the server.

\\n\\n

Example

\\n\\n

test('Modify request headers', async ({ page })=>{\\n\\n await page.route('**/api/**', async (route, request)=>{\\n\\n// Modify request headers, adding a custom header\\n\\nconst headers ={\\n\\n ...request.headers(),\\n\\n'X-Custom-Header':'TUTORIAL-TEST',\\n\\n};\\n\\n await route.continue({ headers });\\n\\n});\\n\\nawait page.goto('');\\n\\n});

\\n\\n

test('Modify POST data', async ({ page })=>{\\n\\n await page.route('**/api/login', async (route, request)=>{\\n\\n// Override the POST request body\\n\\nconst postData = JSON.parse(request.postData()||'{}');\\n\\n postData.mode='test';// Add test flag\\n\\n await route.continue({\\n\\n postData: JSON.stringify(postData),\\n\\n});\\n\\n});\\n\\n});

\\n\\n

---

\\n\\n

route.fetch() — Making Real Requests

\\n\\n

Inside a mock handler, you can use route.fetch() to send the actual request and retrieve the real response, then modify it.

\\n\\n

Example

\\n\\n

test('Modify real response', async ({ page })=>{\\n\\n await page.route('**/api/products', async route =>{\\n\\n// First, fetch the real response\\n\\nconst response = await route.fetch();\\n\\nconst body = await response.json();\\n\\n// Modify the response data\\n\\n body.items.name='TUTORIAL Modified Product Name';\\n\\n// Return the modified data\\n\\n await route.fulfill({\\n\\n status: response.status(),\\n\\n contentType:'application/json',\\n\\n json: body,\\n\\n});\\n\\n});\\n\\n});

\\n\\n

---

\\n\\n

Context-Level vs Page-Level Interception

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

Method	Scope	Use Case
page.route()	Only the current page	Network mocking for a single page
context.route()	All pages within the context	Shared mocking rules across multiple pages

\\n\\n

Example

\\n\\n

test.beforeEach(async ({ context })=>{\\n\\n// Intercept at the context level; applies to all pages\\n\\n await context.route('**/*.css', route => route.abort());\\n\\n});

\\n\\n

test('Test 1', async ({ page })=>{/* No CSS */});

\\n\\n

test('Test 2', async ({ page })=>{/* No CSS */});

\\n\\n

---

\\n\\n

HAR File Recording and Playback

\\n\\n

HAR (HTTP Archive) files can record all network requests made by a page, and then replay them for mocking.

\\n\\n

Example

\\n\\n

test('Mock using HAR file', async ({ page })=>{\\n\\n// Load and replay network records from a HAR file\\n\\n await page.routeFromHAR('tests/hars/api-responses.har');\\n\\nawait page.goto('');\\n\\n// All matching requests will get responses from the HAR file\\n\\n});

\\n\\n

# Record HAR file\\nnpx playwright open --save-har=tests/hars/api-responses.har 

\\n\\n

HAR files are ideal for mocking large or complex API responses. Record once, then replay during tests—no dependency on the real server.