adding-e2e-tests

E2E テストを追加する（Playwright）

ユーザーがエンドツーエンドテスト、ブラウザテスト、統合テストの追加、または Playwright のセットアップを依頼した場合に、このスキルを使用します。

手順

1. Playwright をインストールする

   npm init playwright@latest
   

   これにより、playwright.config.ts と tests/ ディレクトリが作成され、ブラウザーがインストールされます。プロジェクトにすでにテストランナーがある場合は、手動でインストールします。

   npm install -D @playwright/test
   npx playwright install
   

2. playwright.config.ts を設定する

   • baseURL をローカル開発サーバーの URL（例：http://localhost:3000）に設定します。

   • 開発サーバーを自動的に起動するように webServer を設定します。

     webServer: {
       command: "npm run dev",
       url: "http://localhost:3000",
       reuseExistingServer: !process.env.CI,
     },
     

   • ローカル開発時の速度を優先して Chromium のみを有効にし、CI ではすべてのブラウザーを有効にします。

3. スモークテストを作成する — アプリが読み込まれることを確認する基本的なテストを作成します。

   import { test, expect } from "@playwright/test";
   
   test("homepage loads", async ({ page }) => {
     await page.goto("/");
     await expect(page).toHaveTitle(/.+/);
   });
   

4. ページオブジェクトパターンを追加する（任意） — 大規模なアプリでは、セレクターと操作をカプセル化するページオブジェクトを格納する tests/pages/ ディレクトリを作成します。

5. npm スクリプトを追加する

   {
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   }
   

6. .gitignore に追加する

   test-results/
   playwright-report/
   blob-report/
   

7. CI との統合 — npx playwright install --with-deps に続けて npm run test:e2e を実行する GitHub Actions のステップを追加します。失敗時に HTML レポートを保存するには、公式の actions/upload-artifact を使用します。

注意事項

• セレクターには CSS クラスではなく、data-testid 属性を使用します。
• 関連するテストをまとめるには test.describe を使用します。
• npx playwright codegen を実行すると、テストを対話形式で記録できます。