Playwright のグローバルセットアップ

概要

Playwright のグローバルセットアップでログインを行います。

ログインはグローバルセットアップで１度だけ行い、テストのたびに再度ログインする必要はありません。

グローバルセットアップで cookie, localStorage を設定します。

公式ドキュメントの Global setup and teardown を参考に実装します。

環境

• Playwright: Version 1.38.1

実装

1. グローバルセットアップを行うセットアップテストを作成します。

   tests/global.setup.ts

   import { test as setup, expect } from "@playwright/test";
   import { STORAGE_STATE } from "../playwright.config";
   
   const cookies = [
     {
       name: "my_cookie_name",
       value: "my_cookie_value",
       domain: "my_cookie_domain",
       path: "/",
     },
   ];
   
   setup("do login", async ({ page }) => {
     await page.context().addInitScript(() => {
       // localStorage を設定します。
       window.localStorage.setItem("my_localstorage_key", "my_localstorage_value");
     });
     // cookie を設定します。
     await page.context().addCookies(cookies);
   
     // ログインします。
     await page.goto('/');
     await page.getByLabel('User Name').fill('my_user');
     await page.getByLabel('Password').fill('my_password');
     await page.getByText('Sign in').click();
     // ログインできたことを確認します。
     await expect(page).toHaveTitle(/MY TITLE/);
   
     // ストレージ状態をファイルに保存することで、テストのたびに再度ログインする必要がなくなります。
     await page.context().storageState({ path: STORAGE_STATE });
   });
   
   

2. セットアップテストをプロジェクトの依存関係に含めます。

   playwright.config.ts

   import { defineConfig, devices } from "@playwright/test";
   import path from "path";
   
   // ストレージ状態を保存するファイルのパスを追加します。
   export const STORAGE_STATE = path.join(__dirname, "playwright/.auth/user.json");
   
   export default defineConfig({
     testDir: "./tests",
     fullyParallel: true,
     forbidOnly: !!process.env.CI,
     retries: process.env.CI ? 2 : 0,
     workers: process.env.CI ? 1 : undefined,
     reporter: "html",
     use: {
       // ページの URL を設定します。
       baseURL: 'my_page',
       trace: "on-first-retry",
     },
   
     projects: [
       // セットアップテストを実行するプロジェクト `setup` を追加します。
       {
         name: "setup",
         testMatch: /global.setup\.ts/,
       },
       {
         name: "example test",
         // プロジェクト `setup` を依存関係に追加します。
         dependencies: ["setup"],
         use: {
           ...devices["Desktop Chrome"],
           // ストレージの状態を共有します。
           storageState: STORAGE_STATE,
         },
       },
     ],
   });
   

3. テストを実装します。

   tests/example.spec.ts

   import { test, expect } from "@playwright/test";
   
   test("has title", async ({ page }) => {
     await page.goto('/');
   
     await expect(page).toHaveTitle(/MY TITLE/);
   });
   
   

4. ストレージ状態を保存するファイルを Git の管理から除外します。

   .gitignore

   /playwright/.auth/