ログインは1回だけ — Playwrightの globalSetup × storageState でE2Eテストを高速化する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

src/
├── package.json                   # test:e2e スクリプトを追加
├── playwright.e2e.config.ts       # E2E専用Playwright設定
├── .env.e2e                       # 認証情報（gitignore済み・各自作成）
├── playwright/
│   └── .auth/
│       └── user.json              # ログイン済みCookie（gitignore対象・テスト実行時に自動生成）
└── tests/
    └── e2e/
        ├── global-setup.ts        # ログイン・storageState保存
        └── auth.spec.ts           # 認証フローのテスト

1
2
3
4
5
6
7

npm run test:e2e
  └── globalSetup（テスト全体で1回だけ実行）
        └── ブラウザでログイン操作
              └── Cookie を playwright/.auth/user.json に保存
                    └── 各テスト
                          ├── 認証フロー: storageState なし（Cookie空）で実行
                          └── ログイン済みフロー: user.json を読み込んでログイン済み状態で開始

1
2

npm install -D @playwright/test dotenv
npx playwright install chromium

1
2
3
4
5

{
  "scripts": {
    "test:e2e": "playwright test --config=playwright.e2e.config.ts"
  }
}

1
2
3

TEST_EMAIL=your-email@example.com
TEST_PASSWORD=your-password
API_BASE_URL=https://devwebapi.example.com

1
2

# .gitignore に追加
playwright/.auth/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { fileURLToPath } from "url";
import path from "path";
import { defineConfig, devices } from "@playwright/test";
import dotenv from "dotenv";

const __dirname = path.dirname(fileURLToPath(import.meta.url));
dotenv.config({ path: path.resolve(__dirname, ".env.e2e") });

export default defineConfig({
  testDir: "./tests/e2e",
  globalSetup: "./tests/e2e/global-setup.ts",
  reporter: "html",
  fullyParallel: true,
  workers: 2,
  timeout: 60000,
  retries: 0,
  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL ?? "https://devweb.example.com",
    ignoreHTTPSErrors: true,
    // PLAYWRIGHT_TRACE 環境変数で実行時に切り替え可能
    // 本設定では未指定時に "on"（全テスト記録）にフォールバックする。
    // Playwright 自体の trace デフォルトは "off"（公式は CI では "on-first-retry" 等を推奨）
    trace:
      (process.env.PLAYWRIGHT_TRACE as
        | "on"
        | "off"
        | "retain-on-failure"
        | "on-first-retry"
        | "on-all-retries") ?? "on",
  },
  projects: [
    {
      name: "Desktop Chrome",
      use: { ...devices["Desktop Chrome"] },
    },
  ],
});

1
2

# 失敗時のみ保持したい場合（CI環境向け）
PLAYWRIGHT_TRACE=retain-on-failure npm run test:e2e

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import { fileURLToPath } from "url";
import path from "path";
import { chromium, type FullConfig } from "@playwright/test";
import dotenv from "dotenv";

const __dirname = path.dirname(fileURLToPath(import.meta.url));
dotenv.config({ path: path.resolve(__dirname, "../../.env.e2e") });

export const AUTH_FILE = "playwright/.auth/user.json";

export default async function globalSetup(_config: FullConfig) {
  const baseURL =
    process.env.PLAYWRIGHT_BASE_URL ?? "https://devweb.example.com";
  const email = process.env.TEST_EMAIL ?? "";
  const password = process.env.TEST_PASSWORD ?? "";

  const browser = await chromium.launch();
  const context = await browser.newContext({ ignoreHTTPSErrors: true });
  const page = await context.newPage();

  await context.tracing.start({ screenshots: true, snapshots: true });

  try {
    // ログイン操作
    await page.goto(`${baseURL}/login`);
    await page.getByRole("textbox", { name: "メールアドレス" }).fill(email);
    await page.getByRole("textbox", { name: "パスワード" }).fill(password);
    await page.getByRole("button", { name: "ログイン" }).click();
    await page.waitForURL(baseURL + "/");

    // ログイン済みの Cookie をファイルに保存
    await context.storageState({ path: AUTH_FILE });

    await context.tracing.stop({ path: "./test-results/setup-trace.zip" });
    await browser.close();
  } catch (error) {
    // 失敗時も必ずトレースを保存してからブラウザを閉じる
    await context.tracing.stop({
      path: "./test-results/failed-setup-trace.zip",
    });
    await browser.close();
    throw error;
  }
}

1
2
3
4
5
6
7

1. page.goto("/login")          ブラウザでログインページを開く
2. フォームへ入力・送信         　　メールアドレスとパスワードを入力してログインボタンをクリック
3. page.waitForURL("/")         ログイン成功後のリダイレクトを待つ
                                  ↓
                                サーバーが Set-Cookie ヘッダーを返す
                                ブラウザのコンテキストに Cookie が自動保存される
4. context.storageState(...)    コンテキストが持つ Cookie をまるごとファイルに書き出す

1
2

await context.storageState({ path: AUTH_FILE });
// → playwright/.auth/user.json に保存される

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  "cookies": [
    {
      "name": "sessionToken_dev",
      "value": "（セッショントークン）",
      "domain": ".example.com",
      "path": "/",
      "expires": 1775028901,
      "httpOnly": true,
      "secure": false,
      "sameSite": "Lax"
    },
    {
      "name": "isLoggedIn_dev",
      "value": "true",
      "domain": ".example.com",
      "path": "/",
      "expires": 1775028901,
      "httpOnly": false,
      "secure": false,
      "sameSite": "Lax"
    }
  ],
  "origins": []
}

1
2
3
4
5
6
7
8
9

test.describe("ログイン済みフロー", () => {
  test.use({ storageState: AUTH_FILE }); // ← user.json のCookieをブラウザに注入

  test("TOPページが表示される", async ({ page }) => {
    // この時点でブラウザは user.json の Cookie を保持している
    await page.goto("/");
    // ...
  });
});

1
2
3
4
5

import { test, expect } from "@playwright/test";
import { AUTH_FILE } from "./global-setup";

const TEST_EMAIL = process.env.TEST_EMAIL ?? "";
const TEST_PASSWORD = process.env.TEST_PASSWORD ?? "";

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// storageState を使わず、実際にログイン操作を行う
test.describe("認証フロー", () => {
  // 空の storageState を指定し、未ログイン状態から開始する
  test.use({ storageState: { cookies: [], origins: [] } });

  test("ログイン成功 → TOPページへ遷移", async ({ page }) => {
    await page.goto("/");
    await page.getByRole("button", { name: "ログイン" }).click();
    await page
      .getByRole("textbox", { name: "メールアドレス" })
      .fill(TEST_EMAIL);
    await page.getByRole("textbox", { name: "パスワード" }).fill(TEST_PASSWORD);
    await page.getByRole("button", { name: "ログイン" }).click();
    await page.waitForURL("/");
    // TOPページの描画完了を待つ
    await expect(page.locator("footer")).toBeVisible();

    await expect(page).toHaveURL("/");
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// globalSetup で保存した storageState を使用する
test.describe("ログイン済みフロー", () => {
  // user.json の Cookie を注入し、ログイン済み状態で開始する
  test.use({ storageState: AUTH_FILE });

  test("TOPページが表示される", async ({ page }) => {
    await page.goto("/");
    // TOPページの描画完了を待つ
    await expect(page.locator("footer")).toBeVisible();

    await expect(page).toHaveURL("/");
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// storageState を使わない場合: 全テストにこのログイン操作が必要
test("TOPページが表示される", async ({ page }) => {
  await page.goto("/login");
  await page.getByRole("textbox", { name: "メールアドレス" }).fill(TEST_EMAIL);
  await page.getByRole("textbox", { name: "パスワード" }).fill(TEST_PASSWORD);
  await page.getByRole("button", { name: "ログイン" }).click();
  await page.waitForURL("/");

  // ここからが本来のテスト内容
  await expect(page.locator("footer")).toBeVisible();
  await expect(page).toHaveURL("/");
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// storageState を使う場合: test.use の1行でログイン済み状態から開始できる
test.describe("ログイン済みフロー", () => {
  test.use({ storageState: AUTH_FILE });

  test("TOPページが表示される", async ({ page }) => {
    await page.goto("/");
    await expect(page.locator("footer")).toBeVisible();
    await expect(page).toHaveURL("/");
  });
});

1

npm run test:e2e

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

name: E2E

on:
  pull_request:

jobs:
  e2e:
    runs-on: ubuntu-22.04
    defaults:
      run:
        working-directory: src
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20.18.0
      - run: npm ci
      # ブラウザ本体とOSの依存パッケージをまとめて入れる
      - run: npx playwright install --with-deps chromium
      - run: npm run test:e2e
        env:
          # Secrets から認証情報を注入する
          TEST_EMAIL: ${{ secrets.TEST_EMAIL }}
          TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
          # CI では失敗時のみトレースを残す
          PLAYWRIGHT_TRACE: retain-on-failure
      # 失敗時もレポートとトレースを成果物として保存する
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: |
            src/playwright-report/
            src/test-results/
          retention-days: 7

1

npx playwright show-trace test-results/failed-setup-trace.zip