網路

簡介

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

模擬 API

請查看我們的 API 模擬指南，以了解更多關於如何

模擬 API 請求，永遠不實際請求 API
執行 API 請求並修改響應
使用 HAR 檔案來模擬網路請求。

HTTP 身份驗證

執行 HTTP 身份驗證。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setHttpCredentials("bill", "pa55w0rd"));
Page page = context.newPage();
page.navigate("https://example.com");

HTTP 代理

您可以配置頁面通過 HTTP(S) 代理或 SOCKSv5 加載。代理可以全局設定用於整個瀏覽器，或針對每個瀏覽器上下文單獨設定。

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

這是一個全局代理的範例

Browser browser = chromium.launch(new BrowserType.LaunchOptions()
  .setProxy(new Proxy("http://myproxy.com:3128")
  .setUsername("usr")
  .setPassword("pwd")));

也可以針對每個上下文指定

Browser browser = chromium.launch();
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setProxy(new Proxy("http://myproxy.com:3128")));

網路事件

您可以監控所有的請求和響應

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType chromium = playwright.chromium();
      Browser browser = chromium.launch();
      Page page = browser.newPage();
      page.onRequest(request -> System.out.println(">> " + request.method() + " " + request.url()));
      page.onResponse(response -> System.out.println("<<" + response.status() + " " + response.url()));
      page.navigate("https://example.com");
      browser.close();
    }
  }
}

或者使用 Page.waitForResponse() 等待按鈕點擊後的網路響應

// Use a glob URL pattern
Response response = page.waitForResponse("**/api/fetch_data", () -> {
  page.getByText("Update").click();
});

變化

使用 Page.waitForResponse() 等待響應

// Use a RegExp
Response response = page.waitForResponse(Pattern.compile("\\.jpeg$"), () -> {
  page.getByText("Update").click();
});

// Use a predicate taking a Response object
Response response = page.waitForResponse(r -> r.url().contains(token), () -> {
  page.getByText("Update").click();
});

處理請求

page.route("**/api/fetch_data", route -> route.fulfill(new Route.FulfillOptions()
  .setStatus(200)
  .setBody(testData)));
page.navigate("https://example.com");

您可以通過在 Playwright 腳本中處理網路請求來模擬 API 端點。

變化

使用 BrowserContext.route() 在整個瀏覽器上下文中設定路由，或使用 Page.route() 在頁面中設定路由。這將適用於彈出視窗和打開的連結。

browserContext.route("**/api/login", route -> route.fulfill(new Route.FulfillOptions()
  .setStatus(200)
  .setBody("accept")));
page.navigate("https://example.com");

修改請求

// Delete header
page.route("**/*", route -> {
  Map<String, String> headers = new HashMap<>(route.request().headers());
  headers.remove("X-Secret");
    route.resume(new Route.ResumeOptions().setHeaders(headers));
});

// Continue requests as POST.
page.route("**/*", route -> route.resume(new Route.ResumeOptions().setMethod("POST")));

您可以繼續請求並進行修改。上面的範例從傳出的請求中刪除了一個 HTTP 標頭。

中止請求

您可以使用 Page.route() 和 Route.abort() 中止請求。

page.route("**/*.{png,jpg,jpeg}", route -> route.abort());

// Abort based on the request type
page.route("**/*", route -> {
  if ("image".equals(route.request().resourceType()))
    route.abort();
  else
    route.resume();
});

修改響應

要修改響應，請使用 APIRequestContext 獲取原始響應，然後將響應傳遞給 Route.fulfill()。您可以通過選項覆蓋響應上的個別欄位

page.route("**/title.html", route -> {
  // Fetch original response.
  APIResponse response = route.fetch();
  // Add a prefix to the title.
  String body = response.text();
  body = body.replace("<title>", "<title>My prefix:");
  Map<String, String> headers = response.headers();
  headers.put("content-type", "text/html");
  route.fulfill(new Route.FulfillOptions()
    // Pass all fields from the response.
    .setResponse(response)
    // Override response body.
    .setBody(body)
    // Force content type to be html.
    .setHeaders(headers));
});

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.onWebSocket(handler) 事件。此事件包含 WebSocket 實例，用於進一步的 web socket 幀檢查

page.onWebSocket(ws -> {
  log("WebSocket opened: " + ws.url());
  ws.onFrameSent(frameData -> log(frameData.text()));
  ws.onFrameReceived(frameData -> log(frameData.text()));
  ws.onClose(ws1 -> log("WebSocket closed"));
});

遺失的網路事件和 Service Workers

Playwright 內建的 BrowserContext.route() 和 Page.route() 允許您的測試原生路由請求並執行模擬和攔截。

如果您正在使用 Playwright 的原生 BrowserContext.route() 和 Page.route()，並且網路事件似乎遺失，請通過將 setServiceWorkers 設定為 'block' 來停用 Service Workers。
可能是您正在使用模擬工具，例如 Mock Service Worker (MSW)。雖然此工具開箱即用可用於模擬響應，但它添加了自己的 Service Worker 來接管網路請求，因此使其對 BrowserContext.route() 和 Page.route() 不可見。如果您對網路測試和模擬都感興趣，請考慮使用內建的 BrowserContext.route() 和 Page.route() 進行響應模擬。
如果您不僅僅對使用 Service Workers 進行測試和網路模擬感興趣，而且對路由和監聽 Service Workers 本身發出的請求感興趣，請參閱此實驗性功能。

簡介​

模擬 API​

HTTP 身份驗證​

HTTP 代理​

網路事件​

變化​

處理請求​

變化​

修改請求​

中止請求​

修改響應​

Glob URL 模式​

WebSockets​

遺失的網路事件和 Service Workers​

簡介