网络

简介

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

模拟 API

查看我们的API 模拟指南，了解如何

模拟 API 请求，而不实际发起请求
执行 API 请求并修改响应
使用 HAR 文件模拟网络请求。

网络模拟

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

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.net.cn');
  // ... test goes here
});

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

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.net.cn');
  // ... test goes here
});

HTTP 认证

执行 HTTP 认证。

测试
库

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(S) 代理或 SOCKSv5 加载。代理可以全局为整个浏览器设置，也可以为每个浏览器上下文单独设置。

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

这是一个全局代理的示例

测试
库

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

也可以按上下文指定

测试
库

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();
});

const browser = await chromium.launch();
const context = await browser.newContext({
  proxy: { server: 'http://myproxy.com:3128' }
});

网络事件

您可以监控所有请求和响应

// 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() 在点击按钮后等待网络响应

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

变体

使用 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;

处理请求

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

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

变体

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

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

修改请求

// 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 标头。

中止请求

您可以使用 page.route() 和 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();
});

修改响应

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

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 模式

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

星号
- 单个 * 匹配除 / 之外的任何字符
- 双 ** 匹配包括 / 在内的任何字符
问号 ? 只匹配问号 ?。如果要匹配任何字符，请改用 *。
大括号 {} 可用于匹配以逗号 , 分隔的选项列表
反斜杠 \ 可用于转义任何特殊字符（注意将反斜杠本身转义为 \\）

示例

https://example.com/*.js 匹配 https://example.com/file.js，但不匹配 https://example.com/path/file.js
https://example.com/?page=1 匹配 https://example.com/?page=1，但不匹配 https://example.com
**/*.js 匹配 https://example.com/file.js 和 https://example.com/path/file.js
**/*.{png,jpg,jpeg} 匹配所有图像请求

重要注意事项

glob 模式必须匹配整个 URL，而不仅仅是其中一部分。
使用 glob 进行 URL 匹配时，请考虑完整的 URL 结构，包括协议和路径分隔符。
对于更复杂的匹配要求，请考虑使用 RegExp 而不是 glob 模式。

WebSockets

Playwright 开箱即用支持 WebSockets 检查、模拟和修改。请参阅我们的 API 模拟指南，了解如何模拟 WebSockets。

每次创建 WebSocket 时，都会触发 page.on('websocket') 事件。此事件包含 WebSocket 实例，用于进一步的 WebSocket 帧检查

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

丢失的网络事件和服务工作线程

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

如果您正在使用 Playwright 的原生 browserContext.route() 和 page.route()，并且网络事件似乎丢失了，请通过将 serviceWorkers 设置为 'block' 来禁用 Service Workers。
您可能正在使用 Mock Service Worker (MSW) 等模拟工具。虽然此工具开箱即用可用于模拟响应，但它添加了自己的 Service Worker，该 Service Worker 接管了网络请求，从而使它们对 browserContext.route() 和 page.route() 不可见。如果您对网络测试和模拟都感兴趣，请考虑使用内置的 browserContext.route() 和 page.route() 进行响应模拟。
如果您不仅对使用 Service Workers 进行测试和网络模拟感兴趣，还对路由和侦听 Service Workers 本身发出的请求感兴趣，请参阅此实验性功能。

简介​

模拟 API​

网络模拟​

HTTP 认证​

HTTP 代理​

网络事件​

变体​

处理请求​

变体​

修改请求​

中止请求​

修改响应​

Glob URL 模式​

WebSockets​

丢失的网络事件和服务工作线程​

简介