跳到主要內容

驗證

簡介​

Playwright 在稱為瀏覽器上下文的隔離環境中執行測試。這種隔離模型提高了再現性，並防止了級聯測試失敗。 測試可以載入現有的已驗證狀態。這消除了在每個測試中進行身份驗證的需求，並加快了測試執行速度。

核心概念​

無論您選擇哪種驗證策略，您都可能將已驗證的瀏覽器狀態儲存在檔案系統上。

我們建議建立 playwright/.auth 目錄，並將其新增到您的 .gitignore。您的驗證例程將產生已驗證的瀏覽器狀態，並將其儲存到此 playwright/.auth 目錄中的檔案。之後，測試將重複使用此狀態並以已驗證身分開始。

mkdir -p playwright/.auth
echo $'\nplaywright/.auth' >> .gitignore

在每個測試之前登入​

Playwright API 可以自動化與登入表單的互動。

以下範例登入 GitHub。 一旦執行這些步驟，瀏覽器上下文將會通過驗證。

Page page = context.newPage();
page.navigate("https://github.com/login");
// Interact with login form
page.getByLabel("Username or email address").fill("username");
page.getByLabel("Password").fill("password");
page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Sign in"))
    .click();
// Continue with the test

為每個測試重新登入可能會減慢測試執行速度。 為了緩解這種情況，請改為重複使用現有的驗證狀態。

重複使用已登入狀態​

Playwright 提供了一種在測試中重複使用已登入狀態的方法。 這樣您只需登入一次，然後跳過所有測試的登入步驟。

Web 應用程式使用基於 Cookie 或基於令牌的驗證，其中已驗證的狀態儲存為 Cookie 或在 本地儲存中。 Playwright 提供了 BrowserContext.storageState() 方法，可用於從已驗證的上下文中檢索儲存狀態，然後使用預先填充的狀態建立新的上下文。

Cookie 和本地儲存狀態可以在不同的瀏覽器之間使用。 它們取決於您應用程式的驗證模型：某些應用程式可能同時需要 Cookie 和本地儲存。

以下程式碼片段從已驗證的上下文中檢索狀態，並使用該狀態建立新的上下文。

// Save storage state into the file.
context.storageState(new BrowserContext.StorageStateOptions().setPath(Paths.get("state.json")));

// Create a new context with the saved storage state.
BrowserContext context = browser.newContext(
  new Browser.NewContextOptions().setStorageStatePath(Paths.get("state.json")));

進階情境​

Session Storage​

重複使用已驗證的狀態涵蓋了基於 Cookie 和 本地儲存的驗證。 很少情況下，Session Storage 用於儲存與已登入狀態相關聯的資訊。 Session Storage 專用於特定網域，並且不會跨頁面載入持續存在。 Playwright 沒有提供 API 來持久化 Session Storage，但可以使用以下程式碼片段來儲存/載入 Session Storage。

// Get session storage and store as env variable
String sessionStorage = (String) page.evaluate("JSON.stringify(sessionStorage)");
System.getenv().put("SESSION_STORAGE", sessionStorage);

// Set session storage in a new context
String sessionStorage = System.getenv("SESSION_STORAGE");
context.addInitScript("(storage => {\n" +
  "  if (window.location.hostname === 'example.com') {\n" +
  "    const entries = JSON.parse(storage);\n" +
  "     for (const [key, value] of Object.entries(entries)) {\n" +
  "      window.sessionStorage.setItem(key, value);\n" +
  "    };\n" +
  "  }\n" +
  "})('" + sessionStorage + "')");