playwright

Playwright E2E テスト

Web アプリケーションの Playwright エンドツーエンドテストを生成して実行します。

前提条件

npx playwright --version

インストールされていない場合：

npm init playwright@latest
# or add to existing project:
npm install -D @playwright/test && npx playwright install

ワークフロー

1. 分析

テスト対象のページまたはコンポーネントのソースファイルを読みます。ルート、インタラクティブな要素、期待される動作を把握します。

2. テストファイルの生成

プロジェクトの既存のパターンとディレクトリ構成に従って、テストファイルを作成します。

import { test, expect } from '@playwright/test';

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // Setup: navigate, authenticate, seed data
  });

  test('should do expected behavior', async ({ page }) => {
    // Arrange
    // Act
    // Assert
  });
});

3. テストの実行

npx playwright test <file>           # Run specific test file
npx playwright test --headed          # With visible browser
npx playwright test --ui              # Playwright UI mode
npx playwright test --trace on        # Capture trace for debugging

4. 失敗のデバッグ

• エラー出力を注意深く読みます
• --trace on を使い、トレースビューアーを開きます：npx playwright show-trace trace.zip
• 失敗時にスクリーンショットを撮ります：await page.screenshot({ path: 'debug.png' })
• headed モードで page.pause() を使い、ステップごとにデバッグします

機能

• ナビゲーション：page.goto()、URL のアサーション、リダイレクトの検証
• フォーム：page.fill()、page.selectOption()、page.check()、複数ステップのウィザード
• アサーション：expect(page).toHaveURL()、expect(locator).toBeVisible()、toHaveText()
• スクリーンショット：page.screenshot()、全ページ、要素単位
• ビジュアルリグレッション：しきい値を設定した expect(page).toHaveScreenshot()
• アクセシビリティ：@axe-core/playwright、ARIA ロールセレクター、キーボード操作
• ネットワーク：モックには page.route()、API 呼び出しには page.waitForResponse() を使います

ヒント

• 安定したセレクターには data-testid 属性を使います
• CSS セレクターよりも、ユーザーに表示されるテキストや ARIA ロールを優先します
• 複雑な複数ステップのフローには test.step() を使います
• playwright.config.ts で baseURL を設定します
• 非同期ナビゲーションには page.waitForResponse() を使います
• テストファイルは、プロジェクト内の既存のテストパターンに合わせて配置します