网络

简介

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

Mock APIs

查看我们的 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) 代理指定用户名和密码，也可以指定主机来绕过 proxy。

这是一个全局代理的示例

测试
库

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，而不仅仅是 URL 的一部分。
当使用 glob 进行 URL 匹配时，请考虑完整的 URL 结构，包括协议和路径分隔符。
对于更复杂的匹配要求，请考虑使用 RegExp 而不是 glob 模式。

WebSockets

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

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

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

缺少网络事件和服务 Workers

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

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

简介​

Mock APIs​

网络模拟​

HTTP 身份验证​

HTTP 代理​

网络事件​

变体​

处理请求​

变体​

修改请求​

中止请求​

修改响应​

Glob URL 模式​

WebSockets​

缺少网络事件和服务 Workers​

简介