visual-qa-testing について
Cursorの内蔵ブラウザーでUI変更を目視確認するスキルです。スクリーンショット、コンソールメッセージ、ネットワークリクエスト、操作を点検するQA手順を示します。
主な機能
- 01ページ表示とスクリーンショット撮影
- 02ブラウザーコンソールメッセージの確認
- 03ネットワークリクエストの失敗確認
- 04インタラクティブ要素のテスト
- 05レスポンシブレイアウトの確認
活用シーン
- 01UI変更後のページ検証
- 02QA中のブラウザーエラー発見
- 03API失敗と予期しないリクエストの確認
MCP 対応
`cursor-ide-browser` MCPを介してCursorの内蔵ブラウザーを使い、ページ表示、スクリーンショット撮影、コンソールとネットワークの確認、要素の操作を行います。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/visual-qa-testingを入力して読み込まれたか確認します。
詳細
ビジュアル QA
UI の変更後にこのスキルを使い、Cursor を離れることなく、表示を目視で確認し、コンソールエラーを検出し、ネットワークリクエストを監査します。
仕組み
Cursor には、URL への移動、スクリーンショットの撮影、コンソールメッセージの読み取り、ネットワークリクエストの確認、ページ要素の操作ができる組み込みブラウザー（cursor-ide-browser MCP）があります。このスキルでは、これらのツールを使って簡単なビジュアル QA を実施します。
手順
-
開発サーバーが実行中であることを確認する — 開発サーバーを実行しているターミナルがすでにあるか確認します。なければ、バックグラウンドで起動します：
npm run devサーバーの準備が整うまで待ちます（出力に「ready」または localhost の URL が表示されるのを確認します）。
-
ページに移動する —
browser_navigateを使って該当するページを開きます：Tool: browser_navigate Arguments: { "url": "http://localhost:3000", "take_screenshot_afterwards": true }変更が特定のルートに関するものであれば、そこに直接移動します（例：
/settings、/dashboard）。 -
スクリーンショットを撮る — 現在の状態をキャプチャします：
Tool: browser_take_screenshot Arguments: { "fullPage": true }スクリーンショットを確認し、レイアウトの崩れ、コンテンツの欠落、色の誤り、要素の位置ずれなど、表示上の問題がないか確認します。
-
コンソールのエラーを確認する — JavaScript のエラーや警告を探します：
Tool: browser_console_messages特に
TypeError、ReferenceError、インポートの失敗、React のハイドレーション不一致があれば報告します。 -
ネットワークリクエストを監査する — API 呼び出しの失敗や予期しないリクエストがないか確認します：
Tool: browser_network_requests次の点を確認します：4xx/5xx ステータスコード、CORS エラー、過度に大きなレスポンス、不要な重複リクエスト。
-
必要に応じて操作する — 変更にインタラクティブな要素（ボタン、フォーム、モーダル）が含まれる場合は、
browser_click、browser_fill、またはbrowser_hoverを使って動作をテストし、もう一度スクリーンショットを撮って確認します。 -
確認結果を報告する — 次の内容を要約します：
- スクリーンショットで UI が正しく表示されていること（または問題点）
- コンソールに問題がないこと（または見つかったエラーの一覧）
- ネットワークリクエストに問題がないこと（または失敗の一覧）
注意事項
- 要素をクリックする前に、必ず
browser_snapshotを使って正しい要素参照を取得してください。 - レスポンシブ表示をテストするには、
browser_resizeを使ってさまざまなビューポートサイズを確認してください。 position: "side"を指定してbrowser_navigateを使うと、コードの横にブラウザーを開けます。