testing-e2e

testing-e2e

目的

このスキルでは、Playwright、Cypress、Selenium などのツールを使用して、ブラウザーの自動化、ビジュアルリグレッションテスト、CI/CD パイプラインとの連携を行うエンドツーエンド（E2E）テストを実施できます。Web アプリケーションの信頼性の高いテスト自動化に重点を置いています。

使用するタイミング

ユーザーフロー、UI 操作、ビジュアルの変更を検証するなど、Web アプリのフルスタックテストにこのスキルを使用します。デプロイ前のリグレッションテスト、クロスブラウザー互換性の確認、本番環境に近い環境での UI の問題のデバッグなどに適用してください。

主な機能

• Playwright でブラウザー操作を自動化します。ヘッドレスモード、トレース、expect.toHaveScreenshot() によるビジュアル比較をサポートします。
• Cypress テストを実行します。リアルタイムの再読み込み、自動待機、アサーション用のカスタムコマンドが含まれます。
• レガシーな環境には Selenium を導入します。WebDriver を使ってブラウザーを操作し、動的なコンテンツを処理します。
• Page Object Model（POM）：再利用可能なページクラスを使ってテストを構成します。たとえば、ロケーターを別のファイルに定義します。
• ビジュアルリグレッション：Playwright のトレースビューアーや Cypress のプラグインを使って、スクリーンショットを取得し、比較します。
• CI 連携：GitHub Actions や Jenkins などのツール向けにレポートと成果物を生成します。

使用パターン

E2E テストを設定するには、選んだツールでプロジェクトを初期化し、専用ディレクトリにテストを記述します。ブラウザーの選択に使う $PLAYWRIGHT_BROWSER など、機密データには常に環境変数を使用してください。

例 1：ログインフローの Playwright テスト

• テストファイルを作成します：tests/login.spec.js
• コードスニペット：

  const { test } = require('@playwright/test');
  test('login success', async ({ page }) => {
    await page.goto('https://app.example.com');
    await page.fill('#username', 'user');
    await page.click('#login');
  });
  

• 次のコマンドで実行します：npx playwright test --headed --project=chromium

例 2：フォーム送信の Cypress テスト

• cypress/integration/form.spec.js に追加します
• コードスニペット：

  describe('Form Submission', () => {
    it('submits correctly', () => {
      cy.visit('/form');
      cy.get('#name').type('Test User');
      cy.get('button[type=submit]').click();
      cy.url().should('include', '/success');
    });
  });
  

• 次のコマンドで実行します：npx cypress run --browser chrome --spec cypress/integration/form.spec.js

Selenium の場合は、POM と WebDriver を使用します。ページクラスを定義し、テストでメソッドを呼び出してください。

よく使うコマンド／API

• Playwright CLI：ブラウザーをセットアップするには npx playwright install、トレースを有効にするには npx playwright test --trace on を使用します。API：操作には page.locator('selector').click() を使用します。
• Cypress CLI：対話モードでは npx cypress open、動画を有効にするには npx cypress run --config video=true を使用します。API：アサーションには cy.get('selector').should('be.visible') を使用します。
• Selenium のセットアップ：webdriverio などを使用します。コマンド：driver.get('https://example.com') のようなスクリプトを使って node selenium-test.js を実行します。設定：たとえば { "browserName": "chrome" } のような WebDriver オプションを含む JSON ファイルを使用します。
• ビジュアルリグレッション：トレースを表示するには Playwright の npx playwright show-trace trace.zip を使用します。Cypress では cypress-image-snapshot などのプラグインを使用します。

連携に関する注意事項

"test:e2e": "npx playwright test" のように、このスキルを package.json のスクリプトに追加してワークフローに組み込みます。CI では、run: npx cypress run --reporter junit のようなステップを含む GitHub Actions を使用します。API キー（クラウドサービス用など）が必要な場合は、$SELENIUM_GRID_URL や $CYPRESS_API_KEY などの環境変数を設定してください。playwright install --with-deps などのツールを使って、ブラウザーがインストールされていることを確認してください。複数のツールを使う場合は、プロジェクトのエクスポートを記述した playwright.config.ts などの設定ファイルを使用します。

エラー処理

テストが失敗した場合は、まずログを確認してください。Playwright の --trace フラグを使ってトレースを生成し、トレースビューアーでデバッグします。Cypress では --config video=true を有効にして動画を記録します。Playwright では test('retry', { retries: 2 }, async () => { ... }) のようにリトライを追加して、よくあるエラーに対処します。Selenium ではコードを try-catch ブロックで囲みます：

try {
  await driver.findElement(By.id('element')).click();
} catch (error) {
  console.error('Element not found:', error);
}

不安定なテストを避けるために条件を明示的にアサートし、環境変数を使って動的な設定を行い、セットアップエラーを防いでください。

グラフ上の関連

• クラスター：「testing」クラスターに関連しており、単体テストや統合テストなどのスキルが含まれます。
• タグ：「e2e」、「playwright」、「cypress」、「testing」のタグが付いたスキルにリンクしています。
• 依存関係：パイプライン連携のための CI/CD スキル、および実行環境向けのブラウザー自動化ツールに関連しています。