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