playwright

Playwright

このスキルを使う場面

ユーザーが次のような場合に、このスキルを使います。

言及・キーワード

• 「Playwright」、「@playwright/test」、「playwright.config.ts」、「trace viewer」、「PWDEBUG」に言及している
• @playwright/test をインポートする *.spec.ts / *.test.ts ファイルについて述べている

コンテキスト

• Web アプリの E2E／スモークテストを追加または保守しようとしている
• 不安定な UI テスト（セレクター、タイミング、待機処理）のデバッグを試みている
• 単発の自動化（スクリーンショット、コンソールログ、簡単なフロー確認）が必要

目的

• Playwright の作業を適切なワークフロー（テストスイート、単発スクリプト、デバッグ）に振り分けます
• 不安定なテストを防ぐパターン（ロケーター、アサーション、待機処理）を標準化します
• クリーンアップを予測可能にするため、成果物を ./tmp/ に保存します

クイックルーティング

• @playwright/test のテストスイートの作成・保守 → references/e2e-with-playwright-test.md を参照
• 一度認証して状態を再利用（storageState） → references/auth-and-storage-state.md を参照
• CI の堅牢化と設定項目 → references/ci-and-config.md を参照
• ロケーター、アサーション、POM、フィクスチャ → references/patterns.md を参照
• フィクスチャ（ワーカー単位、自動フィクスチャ） → references/fixtures.md を参照
• API のモック化／ネットワークの制御 → references/api-mocking.md を参照
• ビジュアルテスト（toHaveScreenshot） → references/visual-testing.md を参照
• リンクチェック／リンク切れの検出 → references/link-checking.md を参照
• 不安定なテスト／トレースビューアー／再試行 → references/debugging.md を参照
• 単発の自動化（スクリーンショット／ログ／フローの確認） → references/ad-hoc-automation.md を参照

必ず守ること

• CSS／XPath より getByRole／getByLabel を優先し、data-testid は必要な場合にのみ追加します。
• 真偽値のチェックではなく、Web ファーストのアサーション（await expect(locator).toBeVisible()）を使います。
• 不安定さを「修正」するために waitForTimeout() を追加しないでください。デバッグ中に一時的に使う場合は、作業を「完了」とする前に削除してください。
• どこでも networkidle を既定で使わないでください。意図を持って使いましょう（SPA や既知のバックグラウンド処理があると、誤解を招く場合があります）。
• CLI エージェントの実行では、ログの大量出力を避けるため、最小限のレポーターを使います。成果物は ./tmp/playwright/ に保存します。
• テストの独立性を保ち、テスト間で状態を共有しないようにします。

検証

• E2E テストスイートの変更：npx playwright test --reporter=line（または --reporter=dot）を実行し、失敗が再現することを確認します。
• 不安定なテストの修正：修正済みと判断する前に、以前失敗していたテストを少なくとも 5 回実行します（例：--repeat-each 5）。
• CI の影響を受ける変更：「CI に近い」設定（例：CI=1 npx playwright test --reporter=line）でテストスイートを実行し、引き続き正しく動作することを確認します。

出典

• 上流のインストール済みスキル「playwright-best-practices」、「playwright-testing」、「playwright-expert」、「playwright-skill」、「webapp-testing」を統合したものです。