Webアプリケーションテスト

このスキルは、Playwrightオートメーションを使用してローカルWebアプリケーションの包括的なテストとデバッグを可能にします。

このスキルを使用する場合

以下が必要な場合にこのスキルを使用します:

• 実際のブラウザでフロントエンド機能をテストする
• UIの動作とインタラクションを検証する
• Webアプリケーションの問題をデバッグする
• ドキュメント作成やデバッグのためにスクリーンショットをキャプチャする
• ブラウザコンソールログを検査する
• フォーム送信とユーザーフローを検証する
• ビューポート全体のレスポンシブデザインを確認する

前提条件

• システムにNode.jsがインストールされていること
• ローカルで実行されているWebアプリケーション(またはアクセス可能なURL)
• Playwrightが存在しない場合は自動的にインストールされます

コア機能

1. ブラウザオートメーション

• URLへのナビゲーション
• ボタンとリンクのクリック
• フォームフィールドの入力
• ドロップダウンの選択
• ダイアログとアラートの処理

2. 検証

• 要素の存在確認
• テキストコンテンツの検証
• 要素の可視性チェック
• URLの検証
• レスポンシブ動作のテスト

3. デバッグ

• スクリーンショットのキャプチャ
• コンソールログの表示
• ネットワークリクエストの検査
• 失敗したテストのデバッグ

使用例

例1: 基本的なナビゲーションテスト

// ページにナビゲートしてタイトルを検証
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);

例2: フォームインタラクション

// フォームに入力して送信
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');

例3: スクリーンショットキャプチャ

// デバッグ用にスクリーンショットをキャプチャ
await page.screenshot({ path: 'debug.png', fullPage: true });

ガイドライン

1. アプリが実行中であることを常に確認する - テストを実行する前にローカルサーバーがアクセス可能であることを確認します
2. 明示的な待機を使用する - インタラクションを行う前に要素またはナビゲーションの完了を待機します
3. 失敗時にスクリーンショットをキャプチャする - 問題のデバッグを支援するためにスクリーンショットを取得します
4. リソースをクリーンアップする - 終了したときは常にブラウザを閉じます
5. タイムアウトを適切に処理する - 遅い操作に対して妥当なタイムアウトを設定します
6. 段階的にテストする - 複雑なフローの前に単純なインタラクションから開始します
7. セレクタを賢く使用する - CSSクラスよりもdata-testidまたはロールベースのセレクタを優先します

一般的なパターン

パターン: 要素の待機

await page.waitForSelector('#element-id', { state: 'visible' });

パターン: 要素が存在するかを確認

const exists = await page.locator('#element-id').count() > 0;

パターン: コンソールログを取得

page.on('console', msg => console.log('Browser log:', msg.text()));

パターン: エラーを処理

try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}

制限事項

• Node.js環境が必要です
• ネイティブモバイルアプリのテストはできません(代わりにReact Native Testing Libraryを使用してください)
• 複雑な認証フローに問題がある可能性があります
• 最新のフレームワークによっては特定の設定が必要になることがあります