Skip to main content

网络

介绍​

¥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.

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

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:

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

也可以按上下文指定它：

¥Its also possible to specify it per context:

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

test('should use custom proxy on a new context', async ({ browser }) => {
  const context = await browser.newContext({
    proxy: {
      server: 'http://myproxy.com:3128',
    }
  });
  const page = await context.newPage();

  await context.close();
});

网络事件​

¥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'
    }
  });
});

Glob URL 模式​

¥Glob URL patterns

Playwright 在网络拦截方法（如 page.route() 或 page.waitForResponse()）中使用简化的 glob 模式进行 URL 匹配。这些模式支持基本通配符：

¥Playwright uses simplified glob patterns for URL matching in network interception methods like page.route() or page.waitForResponse(). These patterns support basic wildcards:

  1. 星号：

    ¥Asterisks:

    • 单 * 匹配除 / 之外的任何字符

      ¥A single * matches any characters except /

    • 双 ** 匹配包括 / 在内的任何字符

      ¥A double ** matches any characters including /

  2. 问号 ? 匹配除 / 之外的任何单个字符

    ¥Question mark ? matches any single character except /

  3. 大括号 {} 可用于匹配以逗号分隔的选项列表 ,

    ¥Curly braces {} can be used to match a list of options separated by commas ,

示例：

¥Examples:

  • https://example.com/*.js 匹配 https://example.com/file.js 但不匹配 https://example.com/path/file.js

    ¥https://example.com/*.js matches https://example.com/file.js but not https://example.com/path/file.js

  • **/*.js 同时匹配 https://example.com/file.js 和 https://example.com/path/file.js

    ¥**/*.js matches both https://example.com/file.js and https://example.com/path/file.js

  • **/*.{png,jpg,jpeg} 匹配所有图片请求

    ¥**/*.{png,jpg,jpeg} matches all image requests

重要说明：

¥Important notes:

  • glob 模式必须匹配整个 URL，而不仅仅是其中的一部分。

    ¥The glob pattern must match the entire URL, not just a part of it.

  • 使用 glob 进行 URL 匹配时，请考虑完整的 URL 结构，包括协议和路径分隔符。

    ¥When using globs for URL matching, consider the full URL structure, including the protocol and path separators.

  • 对于更复杂的匹配要求，请考虑使用 RegExp 而不是 glob 模式。

    ¥For more complex matching requirements, consider using RegExp instead of glob patterns.

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.

  1. 如果你使用的是 Playwright 的原生 browserContext.route() 和 page.route()，并且似乎缺少网络事件，请通过将 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 serviceWorkers to 'block'.

  2. 你可能正在使用模拟工具，例如 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.

  3. 如果你不仅对使用 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.