跳到主要内容

网络

引言

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

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

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

也可以按上下文指定

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

网络事件

您可以监控所有请求 (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;

变体

使用 响应 (Response) 等待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 匹配。这些模式支持基本的通配符

  1. 星号 (*)
    • 单个 * 匹配除 / 之外的任何字符
    • 双星号 ** 匹配包括 / 在内的任何字符
  2. 问号 ? 仅匹配问号 ?。如果要匹配任何字符,请改用 *
  3. 花括号 {} 可用于匹配逗号 , 分隔的选项列表
  4. 反斜杠 \ 可用于转义任何特殊字符(请注意将反斜杠本身转义为 \\

示例

  • 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.jshttps://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() 允许您的测试原生路由请求并执行模拟和拦截。

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