Skip to main content

身份驗證

簡介​

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

核心概念​

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

我們建議建立 playwright/.auth 目錄並將其添加到 .gitignore 中。您的身份驗證程序將生成已驗證的瀏覽器狀態並將其保存到此 playwright/.auth 目錄中的檔案。稍後，測試將重用此狀態並以已驗證的方式開始。

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

在每個測試前登入​

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

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

var page = await context.NewPageAsync();
await page.GotoAsync("https://github.com/login");
// Interact with login form
await page.GetByLabel("Username or email address").FillAsync("username");
await page.GetByLabel("Password").FillAsync("password");
await page.GetByRole(AriaRole.Button, new() { Name = "Sign in" }).ClickAsync();
// Continue with the test

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

重複使用已登入狀態​

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

Web apps 使用基於 cookie 或基於 token 的身份驗證，已驗證的狀態存儲為cookies或在local storage中。Playwright 提供BrowserContext.StorageStateAsync()方法，可用於從已驗證的上下文中檢索存儲狀態，然後使用預填狀態建立新的上下文。

Cookies 和 local storage 狀態可以在不同的瀏覽器中使用。它們依賴於您的應用程式的身份驗證模型: 一些應用程式可能需要同時使用 cookies 和 local storage。

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

// Save storage state into the file.
// Tests are executed in <TestProject>\bin\Debug\netX.0\ therefore relative path is used to reference playwright/.auth created in project root
await context.StorageStateAsync(new()
{
    Path = "../../../playwright/.auth/state.json"
});

// Create a new context with the saved storage state.
var context = await browser.NewContextAsync(new()
{
    StorageStatePath = "../../../playwright/.auth/state.json"
});

進階情境​

Session storage​

重複使用已驗證的狀態涵蓋了 cookies 和 local storage 基於驗證。很少使用 session storage 來存儲與已登入狀態相關的資訊。Session storage 特定於某個特定的域，並且不會在頁面加載之間持續存在。Playwright 不提供持久化 session storage 的 API，但可以使用以下程式碼片段來保存/加載 session storage。

// Get session storage and store as env variable
var sessionStorage = await page.EvaluateAsync<string>("() => JSON.stringify(sessionStorage)");
Environment.SetEnvironmentVariable("SESSION_STORAGE", sessionStorage);

// Set session storage in a new context
var loadedSessionStorage = Environment.GetEnvironmentVariable("SESSION_STORAGE");
await context.AddInitScriptAsync(@"(storage => {
    if (window.location.hostname === 'example.com') {
      const entries = JSON.parse(storage);
      for (const [key, value] of Object.entries(entries)) {
        window.sessionStorage.setItem(key, value);
      }
    }
  })('" + loadedSessionStorage + "')");