YouTipPlaywright Network Monitor
This chapter introduces how to monitor browser network traffic, and use Playwright for standalone API testing.
* * *
## Monitor Network Requests and Responses
### Monitor Requests with page.on('request')
## Example
test('Monitor network requests', async ({ page })=>{
const requests =[];
// Monitor all requests
page.on('request', request =>{
requests.push({
url: request.url(),
method: request.method(),
postData: request.postData(),
});
});
await page.goto('https://example.com/');
// Print all requests
console.log('The page initiated', requests.length,'requests');
requests.forEach(r => console.log(r.method, r.url));
});
### Monitor Responses with page.on('response')
## Example
test('Monitor network responses', async ({ page })=>{
page.on('response', async response =>{
// Only focus on API responses
if(response.url().includes('/api/')){
console.log('API status code:', response.status());
console.log('API URL:', response.url());
}
});
await page.goto('https://example.com/');
});
* * *
## page.waitForResponse() Wait for Specific Response
## Example
test('Wait for API response to complete', async ({ page })=>{
// Prepare to monitor API response before clicking button
const responsePromise = page.waitForResponse(
response => response.url().includes('/api/search')&& response.status()===200
);
// Trigger search
await page.getByPlaceholder('Search TUTORIAL tutorials').fill('Playwright');
await page.keyboard.press('Enter');
// Wait for API response
const response = await responsePromise;
const data = await response.json();
// Verify API returned data
expect(data.results.length).toBeGreaterThan(0);
});
* * *
## Console Message Monitoring
## Example
test('Monitor console errors', async ({ page })=>{
const consoleErrors =[];
// Monitor console messages
page.on('console', msg =>{
if(msg.type()==='error'){
consoleErrors.push(msg.text());
}
});
await page.goto('https://example.com/');
// Assert page has no JavaScript errors
expect(consoleErrors).toHaveLength(0);
});
### ConsoleMessage Types
| Type | Corresponding Method |
| --- | --- |
| `'log'` | `console.log()` |
| `'error'` | `console.error()` |
| `'warning'` | `console.warn()` |
| `'info'` | `console.info()` |
| `'debug'` | `console.debug()` |
* * *
## API Testing (request fixture)
Playwright's `request` fixture allows you to send HTTP requests directly without using a browser.
This is very suitable for preparing or cleaning up server state before or after testing.
### Send GET Request
## Example
test('API GET request', async ({ request })=>{
const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');
// Verify response status
expect(response.status()).toBe(200);
// Get JSON data
const data = await response.json();
expect(data.id).toBe(1);
expect(data).toHaveProperty('title');
});
### Send POST Request
## Example
test('API POST request', async ({ request })=>{
const response = await request.post('https://jsonplaceholder.typicode.com/posts',{
data:{
title:'Online Tutorial',
body:'Playwright API Testing Example',
userId:1,
},
});
expect(response.status()).toBe(201);
const data = await response.json();
expect(data.title).toBe('Online Tutorial');
});
### Configure baseURL and Authentication Headers
## Example
// File path: playwright.config.ts
export default defineConfig({
use:{
// Base URL for API requests
baseURL:'https://api.example.com',
// Default request headers
extraHTTPHeaders:{
'Authorization':'Bearer YOUR_API_TOKEN',
'Accept':'application/json',
},
},
});
* * *
## API + Browser Combined Testing
In real projects, APIs are often used for state management before or after browser operations.
## Example
test('API prepare data + browser verification', async ({ request, page })=>{
// Step 1: Create test data via API
const response = await request.post('/api/todos',{
data:{ title:'TUTORIAL Test Task', completed:false},
});
const todo = await response.json();
// Step 2: Verify data is displayed in browser
await page.goto('/todos');
await expect(page.getByText('TUTORIAL Test Task')).toBeVisible();
// Step 3: Clean up data via API
await request.delete(`/api/todos/${todo.id}`);
});
> API testing is much faster than browser operations, making it suitable for data preparation and cleanup. Combining API and browser operations can greatly improve testing efficiency and reliability.