browser-qa

ブラウザー QA スキル

実際のブラウザーを使って Web アプリをテストします。ユーザーが気づくバグを見つけます。

使用するタイミング

• フロントエンド機能を構築した後
• UI 変更の PR を作成する前
• ユーザーから「何か表示がおかしい」と報告されたとき
• デプロイ後のスモークテスト

このスキルでできること

1. 実際の Chromium で Playwright を起動します
2. アプリ内で見つけられるすべてのページにアクセスします
3. コンソールエラー、ネットワーク障害、アセットの破損を確認します
4. インタラクティブ要素（フォーム、ボタン、リンク）をテストします
5. モバイルでのレスポンシブ対応を検証します
6. 構造化された QA レポートを作成します

QA チェック項目

1. ページの健全性

すべてのページで以下を確認します：

• HTTP ステータスが 2xx である
• JavaScript コンソールエラーがない
• 失敗したネットワークリクエスト（4xx/5xx）がない
• 画像やアセットの欠落がない
• 3 秒以内にページが読み込まれる

2. レイアウトとレスポンシブ対応

• デスクトップ（1280px）：横スクロールや要素の重なりがない
• モバイル（375px）：横スクロールがなく、テキストが読みやすく、ボタンをタップできる
• コンテンツが意図せず切り取られたり隠されたりしていない

3. インタラクティブ要素

• ボタン：クリックすると何かが起きる（反応しないボタンがない）
• リンク：クリックすると有効なページに移動する（404 がない）
• フォーム：空のまま送信すると検証メッセージが表示される。有効な内容で送信すると成功のフィードバックが表示される
• ドロップダウン／モーダル：開くとコンテンツが表示される。閉じるとコンテンツが隠れる

4. ナビゲーションフロー

• ナビゲーション内のすべてのリンクが有効なページに移動する
• 戻るボタンが想定どおりに動作する
• パンくずリスト（ある場合）が正確である
• 認証リダイレクトが機能する（保護されたページ → ログイン → 元のページに戻る）

5. データ表示

• リストにデータが表示される（データがあるのに空の状態にならない）
• ページネーションが機能する（ある場合）
• 検索／フィルターで結果が更新される
• データ取得中に読み込み状態が表示される
• API の失敗時にエラー状態が表示される

Playwright のパターンとレポートテンプレート

すぐに使える Playwright コード（ページテスト、モバイルのビューポート、フォームテスト、失敗時のスクリーンショット）と QA レポートテンプレートについては、playwright-snippets.md を参照してください。

注意点

• networkidle は WebSocket やポーリングを使うアプリではいつまでも待機します。 アプリがライブ接続を使用している場合は、代わりに domcontentloaded または特定の要素セレクターを使用してください。
• 非表示の要素に対する page.click() は、何事もなく成功します。 操作する前に、必ず要素が表示されていることを確認してください。まず await expect(locator).toBeVisible() を使用してください。
• タッチ操作をシミュレートせずにモバイルのビューポートをテストしても、実際のバグを見逃します。 ビューポートサイズだけでなく、ブラウザーコンテキストに hasTouch: true を設定してください。
• コンソールの警告はコンソールエラーではありません。 React のハイドレーション警告や非推奨の通知をバグとして報告しないでください。バグとなるのは console.error と失敗したネットワークリクエストだけです。
• CI で撮影したスクリーンショットは、ローカル環境とは異なって見えます。 macOS と Linux では、フォントのレンダリング、アンチエイリアス、DPI が異なります。ピクセル単位の完全一致ではなく、視覚的な比較のしきい値を使用してください。

ルール

• 実際のブラウザーのみを使用します。 Playwright と Chromium を使用してください。HTTP のみのテストは禁止です。
• デフォルトではヘッドレスで実行します。 求められない限り、画面に表示されるウィンドウを開かないでください。
• 両方のビューポートをテストします。 デスクトップ（1280px）とモバイル（375px）をテストしてください。
• コンソールエラーはバグです。 必ず報告してください。
• 1 回限りの実行にします。 ブラウザーを起動し、テストして、終了します。デーモンは使用しません。
• 失敗時にスクリーンショットを撮影します。 問題が発生したときはスクリーンショットを撮影してください。
• 許可なく修正しないでください。 まず報告し、その後で修正を提案してください。