Playwright 提供了强大的 网络管理 API，用于控制和管理浏览器的网络活动。这些 API 允许你模拟网络请求和响应、拦截和修改网络请求、模拟网络条件、以及更多网络层级的操作。它们通常用于自动化测试、抓取数据或模拟不同的网络环境。
Playwright 的 网络管理 API 提供了许多强大的功能，帮助开发者和测试人员模拟和管理浏览器的网络行为。常见的网络管理操作包括：
- 请求拦截与修改，能够模拟请求和响应。
- 网络条件模拟，包括延迟、带宽限制、离线等。
- 使用代理来控制网络流量。
- 获取和分析网络请求和响应的详细信息。
- 控制和测试地理位置、设备模拟等。
1. 网络拦截与修改 (Request Interception)
Playwright 提供了对 网络请求的拦截和修改 机制，可以在请求发出之前或响应返回之前进行操作。
a. 拦截网络请求
使用 page.setRequestInterception(true) 启用请求拦截功能。然后可以监听和修改发出的请求。
请求事件 (request)：可以监听和修改请求，在 request 事件中，你可以通过 request.continue() 来继续请求，或者用 request.abort() 来取消请求，甚至用 request.respond() 来模拟响应。
page.on('request', request => {if (request.url().endsWith('.jpg')) {request.abort(); // 阻止请求} else {request.continue(); // 继续请求}
});
使用 page.setRequestInterception(true) 启用请求拦截功能。然后可以监听和修改发出的请求。
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();// 启用请求拦截
await page.setRequestInterception(true);page.on('request', request => {console.log('Request URL:', request.url());// 你可以选择取消请求、修改请求或继续请求request.continue(); // 继续请求
});await page.goto('https://example.com');
await browser.close();
b. 修改请求头
可以通过 request.continue() 方法修改请求头。
page.on('request', request => {// 修改请求头request.continue({headers: {...request.headers(),'X-Custom-Header': 'value'}});
});
c. 拦截网络响应
使用 page.on('response') 来监听响应事件。
page.on('response', response => {console.log('Response status:', response.status());console.log('Response URL:', response.url());
});
d. 模拟响应
request.respond() 使你可以模拟自定义的响应，从而控制页面接收到的数据。
page.on('request', request => {if (request.url().endsWith('.json')) {request.respond({status: 200,contentType: 'application/json',body: '{"message": "Custom response"}'});} else {request.continue();}
});
2. 模拟网络条件 (Network Conditions)
Playwright 可以模拟不同的网络条件，如慢速网络、丢包、离线等。这对于测试在不同网络环境下的应用表现非常有用。
a. 模拟慢速网络
可以使用 page.emulateNetworkConditions() 来模拟不同的网络条件。
await page.emulateNetworkConditions({offline: false, // 网络是否离线downloadThroughput: 150 * 1024, // 下载速度：150 KB/suploadThroughput: 50 * 1024, // 上传速度：50 KB/slatency: 200 // 网络延迟：200ms
});
b. 模拟离线
可以将页面模拟成离线状态，这样所有的网络请求都将失败。
await page.emulateNetworkConditions({offline: true, // 模拟离线downloadThroughput: 0,uploadThroughput: 0,latency: 0
});
3. 模拟地理位置 (Geolocation)
通过 Playwright，你可以模拟浏览器的地理位置，用于测试与地理位置相关的功能（例如，地图、定位服务等）。
await page.setGeolocation({ latitude: 37.7749, longitude: -122.4194 }); // 设置地理位置为旧金山
4. 模拟设备 (Device Emulation)
你可以通过 设备模拟 来模拟特定的移动设备网络状况、屏幕尺寸等。page.emulate() 方法允许你模拟一个手机、平板等设备的浏览体验。
const iphone = playwright.devices['iPhone 12'];
await page.emulate(iphone); // 模拟 iPhone 12
5. 获取网络请求和响应的详细信息
Playwright 允许你获取网络请求和响应的详细信息，包括 URL、请求头、响应头、响应体等。
a. 获取请求的详细信息
通过 request 对象可以访问请求的详细信息，如 URL、方法、请求头等。
page.on('request', request => {console.log('Request Method:', request.method()); // 请求方法(GET, POST, etc.)console.log('Request URL:', request.url()); // 请求的 URLconsole.log('Request Headers:', request.headers()); // 请求头
});
b. 获取响应的详细信息
response 对象提供了响应的详细信息，包括响应状态码、响应头等。
page.on('response', response => {console.log('Response Status:', response.status()); // 响应状态码console.log('Response URL:', response.url()); // 响应 URLconsole.log('Response Headers:', response.headers()); // 响应头
});
6. 网络代理 (Network Proxy)
Playwright 支持使用代理服务器来模拟不同的网络环境。你可以通过 browserContext 来设置代理。
const context = await browser.newContext({proxy: {server: 'http://myproxy.com:8080',username: 'user',password: 'password'}
});
7. 使用 waitForRequest 和 waitForResponse
在某些情况下，可能需要等待特定的请求或响应，Playwright 提供了 waitForRequest 和 waitForResponse 方法来等待请求或响应的完成。
a. 等待特定请求
const request = await page.waitForRequest('**/api/endpoint');
console.log('Request finished:', request.url());
b. 等待特定响应
const response = await page.waitForResponse('**/api/endpoint');
console.log('Response status:', response.status());
8. 网络条件的动态修改
在运行过程中，你可以根据需要动态修改网络条件。例如，可以在页面加载过程中根据网络情况调整网络速度。
await page.emulateNetworkConditions({offline: false,downloadThroughput: 100 * 1024, // 100 KB/suploadThroughput: 100 * 1024, // 100 KB/slatency: 100 // 100ms
});// 后续可以动态修改网络条件
await page.emulateNetworkConditions({offline: false,downloadThroughput: 500 * 1024, // 500 KB/suploadThroughput: 200 * 1024, // 200 KB/slatency: 50 // 50ms
});