visual-qa-testing について
Cursor内蔵ブラウザーでUI変更を視覚的に確認するスキルです。スクリーンショット、コンソール、ネットワークリクエスト、操作確認をCursor内で行います。
主な機能
- 01変更したページへの移動
- 02スクリーンショットの撮影と確認
- 03ブラウザーコンソールの確認
- 04ネットワークリクエストの監査
- 05インタラクティブ要素のテスト
活用シーン
- 01実装後のUI変更の検証
- 02ブラウザーエラーや失敗リクエストの発見
- 03編集後のフォームや操作部品の確認
MCP 対応
Cursor内蔵の`cursor-ide-browser` MCPを使い、ページ移動、撮影、コンソールとネットワークの確認、ページ要素の操作を行います。
インストール
コマンドをコピーしてターミナルで実行します。
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を使うと、コードの横にブラウザーを開けます。