mcp-chrome-devtools

用途

mcp-chrome-devtools 是一个 MCP 技能，使用配置为 io.github.ChromeDevTools/chrome-devtools-mcp 的 MCP 服务器，在测试和验证期间执行浏览器自动化任务，包括导航、表单填写、点击、截图和控制台监控。

前置条件

确保 .vscode/mcp.json 和 .codex/mcp.json 中包含 io.github.ChromeDevTools/chrome-devtools-mcp 服务器配置。
确保 Black-Tortoise 应用在本地运行（通常使用 pnpm start，地址为 http://localhost:4200）。
系统中应安装 Chrome 浏览器。

操作规则

优先使用语义化选择器：data-testid、role、aria-label、id 或稳定的类名。
避免基于动态类或深层 DOM 路径的脆弱选择器。
交互前始终等待页面加载和元素可见。
截图用于留证和调试。
自动化期间监控控制台错误/警告。
使用显式等待而非固定延迟。

主要能力

导航：导航到 URL（绝对或相对）、处理页面跳转和重定向、等待页面加载完成、验证 URL 变化。
表单交互：填写文本输入、点击按钮和链接、选择下拉框、提交表单、处理输入验证。
元素交互：点击元素、在字段中输入、检查元素可见性、读取元素文本/属性、等待元素。
验证：断言元素存在、验证文本内容、检查 URL 模式、验证页面状态、检查 DOM 结构。
调试与留证：捕获整页截图、元素截图、监控控制台日志、记录网络活动、检查页面指标。

典型工作流

应用启动与导航：启动应用（pnpm start）、等待服务器就绪、导航到 http://localhost:4200/、验证落地页加载、捕获初始状态截图。
登录流程：导航到 /auth/login、等待登录表单出现、填写邮箱和密码字段、点击登录按钮、等待导航完成、验证登录成功（如 URL 变化、用户菜单可见）、捕获登录后截图。
工作区导航：从已认证状态导航到 /workspace、等待工作区内容加载、验证工作区 UI 元素、检查控制台错误、捕获工作区截图。
完整用户流程测试：启动应用、导航到首页、导航到登录页、执行登录（demo@test.com / 123123）、导航到工作区、验证完整流程、在每一步捕获证据。

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。

安全提示：这些是仅用于本地开发的测试凭据。切勿在生产环境使用或提交到公共仓库。

错误处理

元素未找到：添加带超时的显式等待，交互前使用 waitForSelector，验证选择器正确。
页面加载超时：增加超时时间，检查应用是否运行（pnpm start），验证网络连接。
表单提交失败：验证字段值已填写，检查表单验证规则，监控控制台错误。
导航未完成：等待 URL 模式匹配，检查重定向，验证路由守卫已满足。

最佳实践

始终验证应用正在运行——检查 http://localhost:4200 可访问。
使用显式等待——等待特定条件，而非固定延迟。
捕获证据——在关键点截图。
监控控制台——检查错误和警告。
优雅处理错误——添加带截图的 try-catch 块。
干净状态——每个测试从已知状态开始。
增量测试——一次测试一个流程。
使用 data-testid——优先使用稳定的测试标识符。

提示模板

基础导航测试：使用 chrome-devtools-mcp 导航到 http://localhost:4200/、验证页面标题包含 "Black-Tortoise"、截图、检查控制台错误。

登录流程测试：使用 chrome-devtools-mcp 导航到 http://localhost:4200/auth/login、填写邮箱 "demo@test.com"、填写密码 "123123"、点击登录按钮、等待导航完成、验证 URL 为 /workspace 或 /dashboard、截图登录后状态。

完整用户旅程：使用 chrome-devtools-mcp 测试完整用户流程：从 http://localhost:4200/ 开始、导航到登录页、使用 demo@test.com / 123123 登录、导航到工作区、验证所有步骤成功完成、在每个主要步骤截图、报告任何控制台错误。

限制

需要安装 Chrome 浏览器。
本地服务器必须正在运行。
无法测试需要外部 OAuth 的认证流程。
在非常慢的网络上可能存在时序问题。
截图存储需要磁盘空间管理。

版本

chrome-devtools-mcp：0.15.0 兼容：Black-Tortoise Angular 20+ 应用最后更新：2026-02-01

技能介绍

用途