login-flows

Playwright のログインフローパターン

エンドツーエンドテストでログインフローを自動化するための再利用可能なパターンです。

基本的なユーザー名／パスワードでのログイン

import { Page } from '@playwright/test';

async function login(page: Page, username: string, password: string) {
  await page.goto('/login');
  await page.fill('[name="username"]', username);
  await page.fill('[name="password"]', password);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

OAuth／SSO ログイン

外部プロバイダーにリダイレクトする OAuth フローの場合：

async function loginWithOAuth(page: Page) {
  await page.goto('/login');
  await page.click('text=Sign in with Google');

  // Handle the OAuth popup or redirect
  await page.fill('input[type="email"]', process.env.TEST_EMAIL!);
  await page.click('text=Next');
  await page.fill('input[type="password"]', process.env.TEST_PASSWORD!);
  await page.click('text=Next');

  // Wait for redirect back to app
  await page.waitForURL('**/dashboard');
}

認証状態の保存（storageState）

各テストの前にログインする手間を省くため、ブラウザーの状態を保存して再利用します：

// global-setup.ts — runs once before all tests
import { chromium } from '@playwright/test';

async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('/login');
  await page.fill('[name="username"]', 'testuser');
  await page.fill('[name="password"]', 'testpass');
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');

  // Save signed-in state
  await page.context().storageState({ path: './auth.json' });
  await browser.close();
}

export default globalSetup;

次に、playwright.config.ts で設定します：

export default defineConfig({
  globalSetup: './global-setup.ts',
  use: {
    storageState: './auth.json',
  },
});

MFA／2FA への対応

TOTP ベースの 2FA を使用するテスト環境の場合：

import { authenticator } from 'otplib';

async function loginWithMFA(page: Page, secret: string) {
  await login(page, 'user', 'pass');

  // Generate TOTP code
  const code = authenticator.generate(secret);
  await page.fill('[name="totp"]', code);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

ヒント

• ログインの繰り返しを避けるため、常に storageState を使用してください。E2E テストスイートの速度を最も大きく向上させます
• 認証情報には環境変数を使用し、ハードコードしないでください
• CI では、安定した認証情報を持つ専用のテストユーザーの利用を検討してください
• ログイン後は、任意の waitForTimeout() ではなく page.waitForURL() を使用してください