网络

简介

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

模拟 API

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

模拟 API 请求并永远不会访问 API
执行 API 请求并修改响应
使用 HAR 文件模拟网络请求。

网络模拟

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

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

网络事件

您可以监控所有Request和Response

// 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()等待Response

// 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
**/*.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'来禁用服务工作者。
您可能正在使用模拟工具，例如 Mock Service Worker (MSW)。虽然此工具可以开箱即用地模拟响应，但它会添加自己的服务工作者来接管网络请求，从而使它们对browserContext.route()和page.route()不可见。如果您对网络测试和模拟都感兴趣，请考虑使用内置的browserContext.route()和page.route()进行响应模拟。
如果您不仅对使用服务工作者进行测试和网络模拟感兴趣，而且还对路由和侦听服务工作者本身发出的请求感兴趣，请参阅此实验性功能。

简介​

模拟 API​

网络模拟​

HTTP 身份验证​

HTTP 代理​

网络事件​

变体​

处理请求​

变体​

修改请求​

中止请求​

修改响应​

Glob URL 模式​

WebSockets​

缺少网络事件和服务工作者​

简介