Playwright之---网络管理API

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/s
  uploadThroughput: 50 * 1024,     // 上传速度：50 KB/s
  latency: 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());            // 请求的 URL
  console.log('Request Headers:', request.headers());    // 请求头
});

b. 获取响应的详细信息

response 对象提供了响应的详细信息，包括响应状态码、响应头等。

page.on('response', response => {
  console.log('Response Status:', response.status());      // 响应状态码
  console.log('Response URL:', response.url());            // 响应 URL
  console.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/s
  uploadThroughput: 100 * 1024,    // 100 KB/s
  latency: 100                     // 100ms
});

// 后续可以动态修改网络条件
await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: 500 * 1024,  // 500 KB/s
  uploadThroughput: 200 * 1024,    // 200 KB/s
  latency: 50                      // 50ms
});