🎭

[Playwright] ログイン状態でテストする簡単なやり方

に公開
初心者向け
Test
Playwright
tech

🌱 はじめに

Playwrightで認証のテストに苦手意識があり、避けていましたが、
業務でやる必要が発生したため、試行錯誤しながら実装しました。
その時に発見した簡単なやり方を紹介します。

紹介する方法では実現できない場合や詳細な内容を知りたい方は、
公式ドキュメントをご確認ください

🌱 結論

🌱 事前準備

# ファイル構成
tests
└── e2e
    └── .auth
        └── session.json
session.json
// iron-sessionのサンプルです
{
  "cookies": [
    {
      "name": "iron-session/example-app",
      "value": "REDACTED_SESSION_TOKEN",
      "domain": "your-backend.example.com",
      "path": "/",
      "expires": -1,
      "httpOnly": true,
      "secure": false,
      "sameSite": "Lax"
    }
  ],
  "origins": []
}

🌱 1. playwright.config.tsに指定のsession.jsonを設定する

playwright.config.tsを改修し、あとはテストを実行するだけです。

playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
+        storageState: './tests/e2e/.auth/session.json',
      },
    },
  ],
});

🌱 2. 各テストごとに指定のsession.jsonを設定する

テスト内容に応じてsession.jsonを設定し、あとはテストを実行するだけです。

// 指定の`session.json'を読み込む
const SESSION_JSON_PATH = `./tests/e2e/.auth/session.json`;
const context = await browser.newContext({ storageState: SESSION_JSON_PATH });
const page = await context.newPage();

// 実際のテスト処理
await page.goto('https://example.com/');
GitHubで編集を提案

Discussion