Notre avis

Cette compétence standardise la vérification du comportement des applications web via Chrome MCP, en allant au-delà de la simple inspection visuelle pour inclure des tests opérationnels complets.

Points forts

Procédure structurée couvrant l'affichage, les opérations CRUD et les appels réseau
Vérification obligatoire du viewport mobile pour les modifications UI
Détection des erreurs console et échecs réseau
Gestion des cas de données existantes pour éviter les faux positifs

Limites

Nécessite l'extension Chrome MCP installée et active
Impossible de paralléliser les vérifications avec des sous-agents
Dépend de ports spécifiques (1357, 2460) qui peuvent varier

Quand l'utiliser

Utilisez cette compétence lorsque vous devez valider visuellement et fonctionnellement des modifications UI ou de nouvelles fonctionnalités dans une application web.

Quand l'éviter

Évitez cette compétence pour les tests unitaires, les modifications backend uniquement, ou lorsque Chrome MCP n'est pas disponible.

Exemples

Full UI verification on frontend v1

Run a browser check on the frontend at port 1357. Verify the page loads, check for console errors, test the create/edit/delete flows, and also check mobile viewport at 375px width.

Post-deployment sanity check

Perform a browser verification on frontend-v2 at port 2460. Ensure the main page renders correctly, all CRUD operations work, and network requests succeed.

Mobile layout validation

Check the responsive layout on the frontend at port 1357. Resize to 375x812 and take screenshots of the header, modal, and form button visibility.

name: browser-check description: Chrome MCPでブラウザ動作確認を標準化された手順で実施する。 user_invocable: true

ブラウザ動作確認

Chrome MCPを使った動作確認の標準手順。「表示されている」だけでなく「操作が正しく動く」まで検証する。

手順

Step 1: 対象アプリのポート確認

確認対象のvite.config.tsを読んでポートを特定する。推測しない。

| アプリ | ポート | |--------|--------| | frontend (v1) | 1357 | | frontend-v2 | 2460 | | backend API | 3456 |

Step 2: Chrome MCP接続

1. mcp__claude-in-chrome__tabs_context_mcp で現在のタブ情報を取得
2. 接続失敗時はユーザーに「Chrome拡張の再接続をお願いします」と依頼
3. mcp__claude-in-chrome__tabs_create_mcp で新しいタブを作成
4. mcp__claude-in-chrome__navigate で対象URLにアクセス

Step 3: ページ表示確認

1. mcp__claude-in-chrome__computer action=screenshot でスクリーンショット取得
2. mcp__claude-in-chrome__read_page で要素の存在を確認
3. mcp__claude-in-chrome__read_console_messages pattern="error|Error|ERR" でコンソールエラーチェック

Step 3.5: モバイルビューポート確認（UI変更時は必須）

UI変更を含む場合、375px幅でのレイアウトを確認する:

mcp__claude-in-chrome__resize_window で幅375px、高さ812pxにリサイズ
スクリーンショットで表示確認
特に注意: ヘッダの中央寄せ、モーダル表示位置、フォームボタンの可視性、autoFocusによるキーボード占有

Step 4: 操作検証（これが重要）

「表示されている」だけでは動作確認とは言えない。以下を実施する:

作成フロー: ボタンクリック → フォーム入力 → 送信 → 結果表示を確認
編集フロー: 既存データの編集 → 保存 → 反映を確認
削除フロー: 削除ボタン → 確認UI表示 → 実行 → 一覧から消えることを確認
ネットワーク確認: mcp__claude-in-chrome__read_network_requests でAPIコールの成否を確認

Step 5: 結果報告

各ページ/フローごとに以下を報告:

スクリーンショット（成功時）
コンソールエラーの有無
ネットワークリクエストの成否
操作検証の結果

Step 4補足: 空データだけで確認しない

新規ユーザー（データ0件）だけでなく、既存データがある状態でも確認する
特にグラフ・統計・プログレス表示は、データがないと正常に見えてバグを見逃す
フォーム系は送信まで確認する（表示されている≠動く）

注意事項

ポートを間違えない（v1: 1357, v2: 2460）。必ずStep 1で確認する
小さい要素はzoomで拡大して確認する
フォーム送信ボタンのクリックが効かない場合はEnterキーで代替
confirm()は使っていないはずだが、もし出たらセッションがブロックされるので注意
サブエージェントにはChrome MCPのアクセス権がない。ブラウザ確認は並列化できない

Vérification navigateur standardisée avec Chrome MCP

Recommandé pour