jpskill.com
🛠️ 開発・MCP コミュニティ

mcp-chrome-devtools

Chrome DevTools MCPサーバーを活用し、Black-Tortoise AngularアプリのUI動作やユーザーフローを自動テストするSkill。

📜 元の英語説明(参考)

Use the Chrome DevTools MCP server (io.github.ChromeDevTools/chrome-devtools-mcp) for browser automation, navigation, form interaction, and UI flow validation in Chrome; use when testing Black-Tortoise Angular application UI behavior and user flows.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Chrome DevTools MCPサーバーを活用し、Black-Tortoise AngularアプリのUI動作やユーザーフローを自動テストするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o mcp-chrome-devtools.zip https://jpskill.com/download/6860.zip && unzip -o mcp-chrome-devtools.zip && rm mcp-chrome-devtools.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6860.zip -OutFile "$d\mcp-chrome-devtools.zip"; Expand-Archive "$d\mcp-chrome-devtools.zip" -DestinationPath $d -Force; ri "$d\mcp-chrome-devtools.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して mcp-chrome-devtools.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → mcp-chrome-devtools フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

MCP スキル: Chrome DevTools MCP (ブラウザ自動化)

範囲

テストおよび検証中にブラウザ自動化タスク（ナビゲーション、フォーム入力、クリック、スクリーンショット、コンソール監視）を実行するために、.vscode/mcp.json および .codex/mcp.json で io.github.ChromeDevTools/chrome-devtools-mcp として構成された MCP サーバーを使用します。

前提条件

  • .vscode/mcp.json および .codex/mcp.json に io.github.ChromeDevTools/chrome-devtools-mcp サーバー構成が含まれていることを確認してください。
  • Black-Tortoise アプリがローカルで実行されていることを確認してください（通常、http://localhost:4200 で pnpm start）。
  • システムに Chrome ブラウザが利用可能であることを確認してください。

操作ルール

  • セマンティックセレクターを優先してください: data-testid、role、aria-label、id、または安定したクラス名。
  • 動的なクラスや深い DOM パスに基づく脆いセレクターは避けてください。
  • 操作の前に、常にページの読み込みと要素の可視性を待機してください。
  • 証拠とデバッグのためにスクリーンショットをキャプチャしてください。
  • 自動化中にコンソールエラー/警告を監視してください。
  • 固定遅延ではなく、明示的な待機を使用してください。

コア機能

1. ナビゲーション

  • URL（絶対または相対）に移動します
  • ページ遷移とリダイレクトを処理します
  • ページの読み込み完了を待機します
  • URL の変更を検証します

2. フォーム操作

  • テキスト入力を入力します
  • ボタンとリンクをクリックします
  • ドロップダウンを選択します
  • フォームを送信します
  • 入力検証を処理します

3. 要素操作

  • 要素をクリックします
  • フィールドに入力します
  • 要素の可視性を確認します
  • 要素のテキスト/属性を読み取ります
  • 要素を待機します

4. 検証

  • 要素の存在をアサートします
  • テキストコンテンツを検証します
  • URL パターンを確認します
  • ページの状態を検証します
  • DOM 構造を検査します

5. デバッグと証拠

  • ページ全体のスクリーンショットをキャプチャします
  • 要素のスクリーンショットを撮ります
  • コンソールログを監視します
  • ネットワークアクティビティを記録します
  • ページメトリクスを検査します

典型的なワークフロー

1. アプリケーションの起動とナビゲーション

1. アプリケーションを起動します: pnpm start
2. サーバーが準備できるまで待機します
3. http://localhost:4200/ に移動します
4. ランディングページが読み込まれることを確認します
5. 初期状態のスクリーンショットをキャプチャします

2. ログインフロー

1. /auth/login に移動します
2. ログインフォームが表示されるまで待機します
3. テスト資格情報でメールフィールドに入力します
4. テスト資格情報でパスワードフィールドに入力します
5. ログインボタンをクリックします
6. ナビゲーションが完了するまで待機します
7. ログインが成功したことを確認します（例: URL の変更、ユーザーメニューの表示）
8. ログイン後のスクリーンショットをキャプチャします

3. ワークスペースナビゲーション

1. 認証された状態から
2. /workspace に移動します
3. ワークスペースコンテンツが読み込まれるまで待機します
4. ワークスペース UI 要素を検証します
5. コンソールエラーを確認します
6. ワークスペースのスクリーンショットをキャプチャします

4. 完全なユーザーフローテスト

1. アプリを起動します (pnpm start)
2. ホームに移動します (http://localhost:4200/)
3. ログインに移動します (/auth/login)
4. ログインを実行します (demo@test.com / 123123)
5. ワークスペースに移動します (/workspace)
6. 完全なフローを検証します
7. 各ステップで証拠をキャプチャします

Black-Tortoise の一般的なセレクター

ログインページ

  • メール入力: input[type="email"]、#email、[data-testid="email-input"]
  • パスワード入力: input[type="password"]、#password、[data-testid="password-input"]
  • ログインボタン: button[type="submit"]、[data-testid="login-button"]

ナビゲーション

  • ホームリンク: [routerLink="/"]、a[href="/"]
  • ワークスペースリンク: [routerLink="/workspace"]、a[href="/workspace"]
  • ユーザーメニュー: [data-testid="user-menu"]、.user-menu

一般的な要素

  • メインコンテンツ: main、[role="main"]
  • ナビゲーションバー: nav、[role="navigation"]
  • エラーメッセージ: .error-message、[role="alert"]
  • ローディングインジケーター: .loading、[data-testid="loading"]

テスト資格情報

デモアカウント

  • メール: demo@test.com
  • パスワード: 123123

⚠️ セキュリティに関する注意: これらはローカル開発専用のテスト資格情報です。本番環境で使用したり、公開リポジトリにコミットしたりしないでください。

エラー処理

一般的な問題と解決策

  1. 要素が見つからない

    • 解決策: タイムアウト付きの明示的な待機を追加します
    • 操作の前に waitForSelector を使用します
    • セレクターが正しいことを確認します

  2. ページ読み込みタイムアウト

    • 解決策: タイムアウト時間を増やします
    • アプリが実行中であることを確認します (pnpm start)
    • ネットワーク接続を確認します

  3. フォーム送信の失敗

    • 解決策: フィールド値が入力されていることを確認します
    • フォーム検証ルールを確認します
    • エラーについてコンソールを監視します

  4. ナビゲーションが完了しない

    • 解決策: URL パターンの一致を待機します
    • リダイレクトを確認します
    • ルートガードが満たされていることを確認します

ベストプラクティス

  1. 常にアプリが実行中であることを確認する - http://localhost:4200 にアクセスできることを確認します
  2. 明示的な待機を使用する - 固定遅延ではなく、特定の条件を待機します
  3. 証拠をキャプチャする - 重要なポイントでスクリーンショットを撮ります
  4. コンソールを監視する - エラーと警告を確認します
  5. エラーを適切に処理する - スクリーンショット付きの try-catch ブロックを追加します
  6. クリーンな状態 - 各テストを既知の状態から開始します
  7. 増分テスト - 一度に1つのフローをテストします
  8. data-testid を使用する - 安定したテスト識別子を優先します

プロンプトテンプレート

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

chrome-devtools-mcp を使用して以下を実行します:
1. http://localhost:4200/ に移動します
2. ページタイトルに "Black-Tortoise" が含まれていることを確認します
3. スクリーンショットを撮ります
4. コンソールでエラーを確認します

ログインフローテスト

chrome-devtools-mcp を使用して以下を実行します:
1. http://localhost:4200/auth/login に移動します
2. メールフィールドに "demo@test.com" を入力します
3. パスワードフィールドに "123123" を入力します
4. ログインボタンをクリックします
5. ナビゲーションが完了するまで待機します
6. URL が /workspace または /dashboard であることを確認します
7. ログイン状態のスクリーンショットを撮ります

完全なユーザー体験

chrome-devtools-mcp を使用して完全なユーザーフローをテストします:
1. http://localhost:4200/ から開始します
2. ログインページに移動します
3. demo@test.com / 123123 でログインします
4. ワークスペースに移動します
5. すべてのステップが正常に完了したことを確認します
6. 各主要なステップでスクリーンショットをキャプチャします
7. コンソールエラーを報告します

関連スキル

  • .github/skills/webapp-testing - 一般的なウェブテストパターン
  • .github/skills/mcp-playwright - 代替の Playwright MCP アプローチ
  • .github/skills/e2e-playwright - E2E テストの編成
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

MCP Skill: Chrome DevTools MCP (Browser Automation)

Scope

Use the MCP server configured as io.github.ChromeDevTools/chrome-devtools-mcp in .vscode/mcp.json and .codex/mcp.json to run browser automation tasks (navigation, form filling, clicking, screenshots, console monitoring) during testing and validation.

Preconditions

  • Ensure .vscode/mcp.json and .codex/mcp.json contain io.github.ChromeDevTools/chrome-devtools-mcp server configuration.
  • Ensure the Black-Tortoise app is running locally (typically pnpm start on http://localhost:4200).
  • Chrome browser should be available on the system.

Operating Rules

  • Prefer semantic selectors: data-testid, role, aria-label, id, or stable class names.
  • Avoid brittle selectors based on dynamic classes or deep DOM paths.
  • Always wait for page load and element visibility before interaction.
  • Capture screenshots for evidence and debugging.
  • Monitor console errors/warnings during automation.
  • Use explicit waits instead of fixed delays.

Core Capabilities

1. Navigation

  • Navigate to URLs (absolute or relative)
  • Handle page transitions and redirects
  • Wait for page load completion
  • Verify URL changes

2. Form Interaction

  • Fill text inputs
  • Click buttons and links
  • Select dropdowns
  • Submit forms
  • Handle input validation

3. Element Interaction

  • Click elements
  • Type into fields
  • Check element visibility
  • Read element text/attributes
  • Wait for elements

4. Verification

  • Assert element presence
  • Verify text content
  • Check URL patterns
  • Validate page state
  • Inspect DOM structure

5. Debugging & Evidence

  • Capture full-page screenshots
  • Take element screenshots
  • Monitor console logs
  • Record network activity
  • Inspect page metrics

Typical Workflows

1. Application Startup & Navigation

1. Start the application: pnpm start
2. Wait for server to be ready
3. Navigate to http://localhost:4200/
4. Verify landing page loads
5. Capture initial state screenshot

2. Login Flow

1. Navigate to /auth/login
2. Wait for login form to appear
3. Fill email field with test credentials
4. Fill password field with test credentials
5. Click login button
6. Wait for navigation to complete
7. Verify successful login (e.g., URL change, user menu visible)
8. Capture post-login screenshot

3. Workspace Navigation

1. From authenticated state
2. Navigate to /workspace
3. Wait for workspace content to load
4. Verify workspace UI elements
5. Check for console errors
6. Capture workspace screenshot

4. Full User Flow Test

1. Start app (pnpm start)
2. Navigate to home (http://localhost:4200/)
3. Navigate to login (/auth/login)
4. Perform login (demo@test.com / 123123)
5. Navigate to workspace (/workspace)
6. Verify complete flow
7. Capture evidence at each step

Common Selectors for Black-Tortoise

Login Page

  • Email input: input[type="email"], #email, [data-testid="email-input"]
  • Password input: input[type="password"], #password, [data-testid="password-input"]
  • Login button: button[type="submit"], [data-testid="login-button"]

Navigation

  • Home link: [routerLink="/"], a[href="/"]
  • Workspace link: [routerLink="/workspace"], a[href="/workspace"]
  • User menu: [data-testid="user-menu"], .user-menu

Common Elements

  • Main content: main, [role="main"]
  • Navigation bar: nav, [role="navigation"]
  • Error messages: .error-message, [role="alert"]
  • Loading indicators: .loading, [data-testid="loading"]

Test Credentials

Demo Account

  • Email: demo@test.com
  • Password: 123123

⚠️ Security Note: These are test credentials for local development only. Never use in production or commit to public repositories.

Error Handling

Common Issues & Solutions

  1. Element not found

    • Solution: Add explicit wait with timeout
    • Use waitForSelector before interaction
    • Verify selector is correct

  2. Page load timeout

    • Solution: Increase timeout duration
    • Check if app is running (pnpm start)
    • Verify network connectivity

  3. Form submission fails

    • Solution: Verify field values are filled
    • Check form validation rules
    • Monitor console for errors

  4. Navigation not completing

    • Solution: Wait for URL pattern match
    • Check for redirects
    • Verify route guards are satisfied

Best Practices

  1. Always verify app is running - Check http://localhost:4200 is accessible
  2. Use explicit waits - Wait for specific conditions, not fixed delays
  3. Capture evidence - Take screenshots at critical points
  4. Monitor console - Check for errors and warnings
  5. Handle errors gracefully - Add try-catch blocks with screenshots
  6. Clean state - Start each test from a known state
  7. Incremental testing - Test one flow at a time
  8. Use data-testid - Prefer stable test identifiers

Prompt Templates

Basic Navigation Test

Use chrome-devtools-mcp to:
1. Navigate to http://localhost:4200/
2. Verify the page title contains "Black-Tortoise"
3. Take a screenshot
4. Check console for errors

Login Flow Test

Use chrome-devtools-mcp to:
1. Navigate to http://localhost:4200/auth/login
2. Fill email field with "demo@test.com"
3. Fill password field with "123123"
4. Click login button
5. Wait for navigation to complete
6. Verify URL is /workspace or /dashboard
7. Take screenshot of logged-in state

Full User Journey

Use chrome-devtools-mcp to test the complete user flow:
1. Start at http://localhost:4200/
2. Navigate to login page
3. Login with demo@test.com / 123123
4. Navigate to workspace
5. Verify all steps complete successfully
6. Capture screenshots at each major step
7. Report any console errors

Related Skills

  • .github/skills/webapp-testing - General web testing patterns
  • .github/skills/mcp-playwright - Alternative Playwright MCP approach
  • .github/skills/e2e-playwright - E2E test organization

Related Instructions

  • 64-quality-testing-copilot-instructions.md - Testing standards
  • 72-angular-accessibility-copilot-instructions.md - Accessibility testing

Limitations

  • Requires Chrome browser installed
  • Local server must be running
  • Cannot test authentication flows requiring external OAuth
  • May have timing issues with very slow networks
  • Screenshot storage needs disk space management

Version

  • chrome-devtools-mcp: 0.15.0
  • Compatible with: Black-Tortoise Angular 20+ application
  • Last updated: 2026-02-01