Playwrightを使用したWebアプリケーションテストのスキル

--- name: web-application-testing-skill description: Playwrightを使用してローカルWebアプリケーションを操作・テストするためのツールキットです。 --- # Webアプリケーションテスト このスキルは、Playwright自動化を使用してローカルWebアプリケーションの包括的なテストとデバッグを可能にします。 ## このスキルを使用するタイミング 以下の場合にこのスキルを使用します: - 実際のブラウザでフロントエンド機能をテストする - UIの動作とインタラクションを検証する - Webアプリケーションの問題をデバッグする - ドキュメントやデバッグ用のスクリーンショットをキャプチャする - ブラウザのコンソールログを検査する - フォーム送信とユーザーフローを検証する - さまざまなビューポートでのレスポンシブデザインを確認する ## 前提条件 - システムにNode.jsがインストールされていること - ローカルで実行中のWebアプリケーション（またはアクセス可能なURL） - Playwrightは存在しない場合、自動的にインストールされます ## 主な機能 ### 1. ブラウザ自動化 - URLへの移動 - ボタンやリンクのクリック - フォームフィールドの入力 - ドロップダウンの選択 - ダイアログやアラートの処理 ### 2. 検証 - 要素の存在をアサート - テキストコンテンツの確認 - 要素の可視性のチェック - URLの検証 - レスポンシブ動作のテスト ### 3. デバッグ - スクリーンショットのキャプチャ - コンソールログの表示 - ネットワークリクエストの検査 - 失敗したテストのデバッグ ## 使用例 ### 例1: 基本的なナビゲーションテスト ```javascript // ページに移動してタイトルを確認 await page.goto('http://localhost:3000'); const title = await page.title(); console.log('ページタイトル:', title); ``` ### 例2: フォーム操作 ```javascript // フォームに入力して送信 await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### 例3: スクリーンショットのキャプチャ ```javascript // デバッグ用のスクリーンショットをキャプチャ await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## ガイドライン 1. **アプリが実行中であることを常に確認** - テストを実行する前にローカルサーバーにアクセスできることを確認します 2. **明示的な待機を使用** - 操作前に要素やナビゲーションの完了を待ちます 3. **失敗時にスクリーンショットをキャプチャ** - 問題のデバッグに役立てます 4. **リソースをクリーンアップ** - 完了時には必ずブラウザを閉じます 5. **タイムアウトを適切に処理** - 遅い操作には合理的なタイムアウトを設定します 6. **段階的にテスト** - 複雑なフローよりも簡単な操作から始めます 7. **セレクタを賢く使用** - CSSクラスよりもdata-testidやロールベースのセレクタを優先します ## 一般的なパターン ### パターン: 要素の待機 ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### パターン: 要素の存在確認 ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### パターン: コンソールログの取得 ```javascript page.on('console', msg => console.log('ブラウザログ:', msg.text())); ``` ### パターン: エラーの処理 ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## 制限事項 - Node.js環境が必要です - ネイティブモバイルアプリはテストできません（代わりにReact Native Testing Libraryを使用してください） - 複雑な認証フローで問題が発生する場合があります - 一部のモダンフレームワークでは特定の設定が必要な場合があります