mcp-chrome-devtools
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.jsonand.codex/mcp.jsoncontainio.github.ChromeDevTools/chrome-devtools-mcpserver configuration. - Ensure the Black-Tortoise app is running locally (typically
pnpm starton 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
More from neversight/skills_feed
ai-image-generation
|
7react-best-practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
7ui-designer
Use when user needs visual UI design, interface creation, component systems, design systems, interaction patterns, or accessibility-focused user interfaces.
7python-env
Fast Python environment management with uv (10-100x faster than pip). Triggers on: uv, venv, pip, pyproject, python environment, install package, dependencies.
7typescript-best-practices
Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation. Must use when reading or writing TypeScript/JavaScript files.
6ai-marketing-videos
|
6