網路

簡介

Playwright 提供 API 來監控和修改瀏覽器網路流量，包括 HTTP 和 HTTPS。頁面所做的任何請求，包括 XHRs 和 fetch 請求，都可以被追蹤、修改和處理。

模擬 API

查看我們的 API mocking 指南以了解更多資訊。

模擬 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.dev');
  // ... 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.dev');
  // ... test goes here
});

HTTP 認證

執行 HTTP 認證。

Test
Library

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 Proxy

您可以配置頁面通過 HTTP(S) 代理或 SOCKSv5 加載。代理可以為整個瀏覽器全域設置，也可以為每個瀏覽器上下文單獨設置。

您可以選擇性地指定 HTTP(S) 代理的使用者名稱和密碼，您也可以指定要繞過代理的主機。

這裡是一個全域代理的範例:

Test
Library

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

也可以根據上下文指定它:

Test
Library

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;

變體

等待 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;

處理請求

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

WebSockets

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

缺少網路事件和服務工作者

Playwright 的內建 browserContext.route() 和 page.route() 允許你的測試原生地路由請求並執行模擬和攔截。

如果你正在使用 Playwright 的原生 browserContext.route() 和 page.route()，並且出現網路事件遺失的情況，請通過將 Browser.newContext.serviceWorkers 設定為 'block' 來停用 Service Workers。
可能是因為你正在使用像 Mock Service Worker (MSW) 這樣的模擬工具。雖然這個工具可以開箱即用地模擬回應，但它會添加自己的 Service Worker 來接管網路請求，從而使它們對 browserContext.route() 和 page.route() 不可見。如果你對網路測試和模擬都感興趣，請考慮使用內建的 browserContext.route() 和 page.route() 來進行回應模擬。
如果你不僅僅對使用 Service Workers 進行測試和網路模擬感興趣，還對路由和監聽由 Service Workers 自己發出的請求感興趣，請參閱這個實驗性功能。

簡介​

模擬 API​

網路模擬​

HTTP 認證​

HTTP Proxy​

網路事件​

變體​

處理請求​

變體​

修改請求​

中止請求​

修改回應​

WebSockets​

缺少網路事件和服務工作者​

簡介