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

2. Start the application: pnpm start

3. Wait for server to be ready

4. Navigate to http://localhost:4200/

5. Verify landing page loads

6. Capture initial state screenshot

7. Login Flow

8. Navigate to /auth/login

9. Wait for login form to appear

10. Fill email field with test credentials

11. Fill password field with test credentials

12. Click login button

13. Wait for navigation to complete

14. Verify successful login (e.g., URL change, user menu visible)

15. Capture post-login screenshot

16. Workspace Navigation

17. From authenticated state

18. Navigate to /workspace

19. Wait for workspace content to load

20. Verify workspace UI elements

21. Check for console errors

22. Capture workspace screenshot

23. Full User Flow Test

24. Start app (pnpm start)

25. Navigate to home (http://localhost:4200/)

26. Navigate to login (/auth/login)

27. Perform login (demo@test.com / 123123)

28. Navigate to workspace (/workspace)

29. Verify complete flow

30. 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

Element not found

• Solution: Add explicit wait with timeout

• Use waitForSelector before interaction

• Verify selector is correct

Page load timeout

• Solution: Increase timeout duration

• Check if app is running (pnpm start )

• Verify network connectivity

Form submission fails

• Solution: Verify field values are filled

• Check form validation rules

• Monitor console for errors

Navigation not completing

• Solution: Wait for URL pattern match

• Check for redirects

• Verify route guards are satisfied

Best Practices

• Always verify app is running - Check http://localhost:4200 is accessible

• Use explicit waits - Wait for specific conditions, not fixed delays

• Capture evidence - Take screenshots at critical points

• Monitor console - Check for errors and warnings

• Handle errors gracefully - Add try-catch blocks with screenshots

• Clean state - Start each test from a known state

• Incremental testing - Test one flow at a time

• 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