网络

介绍

¥Introduction

Playwright 提供 API 来监控和修改浏览器网络流量（HTTP 和 HTTPS）。页面所做的任何请求，包括 XHR 和 fetch 请求，都可以被跟踪、修改和处理。

¥Playwright provides APIs to monitor and modify browser network traffic, both HTTP and HTTPS. Any requests that a page does, including XHRs and fetch requests, can be tracked, modified and handled.

模拟 API

¥Mock APIs

查看我们的 API 模拟指南以了解有关如何的更多信息

¥Check out our API mocking guide to learn more on how to

模拟 API 请求并且从不访问 API

¥mock API requests and never hit the API
执行 API 请求并修改响应

¥perform the API request and modify the response
使用 HAR 文件来模拟网络请求。

¥use HAR files to mock network requests.

网络嘲讽

¥Network mocking

你无需配置任何内容即可模拟网络请求。只需定义一个自定义 Route 来模拟浏览器上下文的网络。

¥You don't have to configure anything to mock network requests. Just define a custom Route that mocks network for a browser context.

example.spec.ts
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ context }) => {
  // Block any css requests for each test in this file.
  await context.route(/.css$/, route => route.abort());
});

test('loads page without css', async ({ page }) => {
  await page.goto('https://playwright.nodejs.cn');
  // ... test goes here
});

或者，你可以使用 page.route() 在单个页面中模拟网络。

¥Alternatively, you can use page.route() to mock network in a single page.

example.spec.ts
import { test, expect } from '@playwright/test';

test('loads page without images', async ({ page }) => {
  // Block png and jpeg images.
  await page.route(/(png|jpeg)$/, route => route.abort());

  await page.goto('https://playwright.nodejs.cn');
  // ... test goes here
});

HTTP 认证

¥HTTP Authentication

执行 HTTP 身份验证。

¥Perform HTTP Authentication.

Test
Library

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    httpCredentials: {
      username: 'bill',
      password: 'pa55w0rd',
    }
  }
});

const context = await browser.newContext({
  httpCredentials: {
    username: 'bill',
    password: 'pa55w0rd',
  },
});
const page = await context.newPage();
await page.goto('https://example.com');

HTTP 代理

¥HTTP Proxy

你可以将页面配置为通过 HTTP(S) 代理或 SOCKSv5 加载。代理可以为整个浏览器全局设置，也可以为每个浏览器上下文单独设置。

¥You can configure pages to load over the HTTP(S) proxy or SOCKSv5. Proxy can be either set globally for the entire browser, or for each browser context individually.

你可以选择指定 HTTP(S) 代理的用户名和密码，还可以指定要绕过代理的主机。

¥You can optionally specify username and password for HTTP(S) proxy, you can also specify hosts to bypass proxy for.

这是全局代理的示例：

¥Here is an example of a global proxy:

Test
Library

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    proxy: {
      server: 'http://myproxy.com:3128',
      username: 'usr',
      password: 'pwd'
    }
  }
});

const browser = await chromium.launch({
  proxy: {
    server: 'http://myproxy.com:3128',
    username: 'usr',
    password: 'pwd'
  }
});

当单独为每个上下文指定代理时，Windows 上的 Chromium 需要提示将设置代理。这是通过将非空代理服务器传递给浏览器本身来完成的。以下是上下文特定代理的示例：

¥When specifying proxy for each context individually, Chromium on Windows needs a hint that proxy will be set. This is done via passing a non-empty proxy server to the browser itself. Here is an example of a context-specific proxy:

Test
Library

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    launchOptions: {
      // Browser proxy option is required for Chromium on Windows.
      proxy: { server: 'per-context' }
    },
    proxy: {
      server: 'http://myproxy.com:3128',
    }
  }
});

const browser = await chromium.launch({
  // Browser proxy option is required for Chromium on Windows.
  proxy: { server: 'per-context' }
});
const context = await browser.newContext({
  proxy: { server: 'http://myproxy.com:3128' }
});

网络事件

¥Network events

你可以监控所有 Request 和 Response：

¥You can monitor all the Requests and Responses:

// Subscribe to 'request' and 'response' events.
page.on('request', request => console.log('>>', request.method(), request.url()));
page.on('response', response => console.log('<<', response.status(), response.url()));

await page.goto('https://example.com');

或者用 page.waitForResponse() 单击按钮后等待网络响应：

¥Or wait for a network response after the button click with page.waitForResponse():

// Use a glob URL pattern. Note no await.
const responsePromise = page.waitForResponse('**/api/fetch_data');
await page.getByText('Update').click();
const response = await responsePromise;

变化

¥Variations

等待 Response 和 page.waitForResponse()

¥Wait for Responses with page.waitForResponse()

// Use a RegExp. Note no await.
const responsePromise = page.waitForResponse(/\.jpeg$/);
await page.getByText('Update').click();
const response = await responsePromise;

// Use a predicate taking a Response object. Note no await.
const responsePromise = page.waitForResponse(response => response.url().includes(token));
await page.getByText('Update').click();
const response = await responsePromise;

处理请求

¥Handle requests

await page.route('**/api/fetch_data', route => route.fulfill({
  status: 200,
  body: testData,
}));
await page.goto('https://example.com');

你可以通过处理 Playwright 脚本中的网络请求来模拟 API 端点。

¥You can mock API endpoints via handling the network requests in your Playwright script.

变化

¥Variations

使用 browserContext.route() 在整个浏览器上下文中设置路由，或者使用 page.route() 在页面上设置路由。它将应用于弹出窗口和打开的链接。

¥Set up route on the entire browser context with browserContext.route() or page with page.route(). It will apply to popup windows and opened links.

await browserContext.route('**/api/login', route => route.fulfill({
  status: 200,
  body: 'accept',
}));
await page.goto('https://example.com');

修改请求

¥Modify requests

// Delete header
await page.route('**/*', async route => {
  const headers = route.request().headers();
  delete headers['X-Secret'];
  await route.continue({ headers });
});

// Continue requests as POST.
await page.route('**/*', route => route.continue({ method: 'POST' }));

你可以继续请求并进行修改。上面的示例从传出请求中删除 HTTP 标头。

¥You can continue requests with modifications. Example above removes an HTTP header from the outgoing requests.

中止请求

¥Abort requests

你可以使用 page.route() 和 route.abort() 中止请求。

¥You can abort requests using page.route() and route.abort().

await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// Abort based on the request type
await page.route('**/*', route => {
  return route.request().resourceType() === 'image' ? route.abort() : route.continue();
});

修改响应

¥Modify responses

要修改响应，请使用 APIRequestContext 获取原始响应，然后将响应传递给 route.fulfill()。你可以通过选项覆盖响应中的各个字段：

¥To modify a response use APIRequestContext to get the original response and then pass the response to route.fulfill(). You can override individual fields on the response via options:

await page.route('**/title.html', async route => {
  // Fetch original response.
  const response = await route.fetch();
  // Add a prefix to the title.
  let body = await response.text();
  body = body.replace('<title>', '<title>My prefix:');
  await route.fulfill({
    // Pass all fields from the response.
    response,
    // Override response body.
    body,
    // Force content type to be html.
    headers: {
      ...response.headers(),
      'content-type': 'text/html'
    }
  });
});

WebSockets

Playwright 支持 WebSockets 开箱即用检查。每次创建 WebSocket 时，都会触发 page.on('websocket') 事件。此事件包含用于进一步 Web 套接字帧检查的 WebSocket 实例：

¥Playwright supports WebSockets inspection out of the box. Every time a WebSocket is created, the page.on('websocket') event is fired. This event contains the WebSocket instance for further web socket frames inspection:

page.on('websocket', ws => {
  console.log(`WebSocket opened: ${ws.url()}>`);
  ws.on('framesent', event => console.log(event.payload));
  ws.on('framereceived', event => console.log(event.payload));
  ws.on('close', () => console.log('WebSocket closed'));
});

缺少网络事件和 Service Worker

¥Missing Network Events and Service Workers

Playwright 的内置 browserContext.route() 和 page.route() 允许你的测试原生路由请求并执行模拟和拦截。

¥Playwright's built-in browserContext.route() and page.route() allow your tests to natively route requests and perform mocking and interception.

如果你使用的是 Playwright 的原生 browserContext.route() 和 page.route()，并且似乎缺少网络事件，请通过将 Browser.newContext.serviceWorkers 设置为 'block' 来禁用 Service Workers。

¥If you're using Playwright's native browserContext.route() and page.route(), and it appears network events are missing, disable Service Workers by setting Browser.newContext.serviceWorkers to 'block'.
你可能正在使用模拟工具，例如 Mock Service Worker (MSW)。虽然该工具可以开箱即用地用于模拟响应，但它添加了自己的 Service Worker 来接管网络请求，从而使它们对 browserContext.route() 和 page.route() 不可见。如果你对网络测试和模拟都感兴趣，请考虑对响应模拟使用内置 browserContext.route() 和 page.route()。

¥It might be that you are using a mock tool such as Mock Service Worker (MSW). While this tool works out of the box for mocking responses, it adds its own Service Worker that takes over the network requests, hence making them invisible to browserContext.route() and page.route(). If you are interested in both network testing and mocking, consider using built-in browserContext.route() and page.route() for response mocking.
如果你不仅对使用 Service Workers 进行测试和网络模拟感兴趣，而且对路由和监听 Service Workers 本身触发的请求感兴趣，请参阅这个实验性的功能。

¥If you're interested in not solely using Service Workers for testing and network mocking, but in routing and listening for requests made by Service Workers themselves, please see this experimental feature.

介绍​

模拟 API​

网络嘲讽​

HTTP 认证​

HTTP 代理​

网络事件​

变化​

处理请求​

变化​

修改请求​

中止请求​

修改响应​

WebSockets​

缺少网络事件和 Service Worker​

介绍