chrome-devtools-testing-patterns

---

name: chrome-devtools-testing-patterns description: Standardize chrome-devtools usage for testing scenarios with best practices for browser automation, common interaction patterns, testing workflow integration, and robust error handling license: MIT compatibility: opencode metadata: audience: developers, testers, qa-engineers domain: testing, browser-automation workflow: e2e-testing, functional-testing, accessibility-testing updated: "2025-01" keywords: chrome-devtools, testing, automation, e2e, browser-testing

What I do

I help you standardize chrome-devtools usage patterns for testing scenarios in the GoPayShortcuts project. I provide:

• Best practices for browser automation testing - Establish reliable, maintainable testing patterns using chrome-devtools tools
• Common interaction patterns - Standardized approaches for page setup, navigation, element interaction, and verification
• Testing workflow integration - Seamless integration with functional, E2E, and accessibility testing processes
• Practical examples and templates - Ready-to-use patterns for scrolling, form filling, clicking, and waiting strategies
• Error handling and troubleshooting - Robust patterns for handling chrome-devtools failures and debugging test issues

When to use me

Load this skill when:

• Writing or maintaining E2E tests that use chrome-devtools for browser automation
• Setting up new testing workflows that require browser interaction patterns
• Debugging failing browser tests or chrome-devtools operations
• Standardizing testing approaches across the team's automation suite
• Implementing accessibility testing using chrome-devtools capabilities

Best practices for browser automation testing

Page Setup and Configuration

• Always select a page context before operations using chrome-devtools_select_page
• Set appropriate timeouts for operations that may take time (navigation, waiting)
• Configure network conditions if testing under specific constraints (slow 3G, offline)
• Resize page to consistent dimensions for screenshot comparisons
• Take snapshots before interactions to get current element UIDs

Reliable Element Interaction

• Use snapshots for element identification - Always take a fresh snapshot before selecting elements by UID
• Prefer semantic selectors over fragile XPath/CSS when possible
• Wait for elements before interaction using chrome-devtools_wait_for or evaluate scripts
• Verify element state before actions (enabled, visible, not obscured)

Verification and Assertions

• Use evaluate scripts for complex DOM state checks rather than multiple tool calls
• Capture screenshots for visual regression testing
• Check console messages for JavaScript errors during test execution
• Monitor network requests to verify API calls and resource loading

Common patterns

Page Navigation Pattern

Copy// Pattern: Navigate to page and wait for load
chrome-devtools_navigate_page(type="url", url="https://example.com")
chrome-devtools_wait_for(text="Expected content")
chrome-devtools_take_snapshot()  // Get current element state

Form Interaction Pattern

Copy// Pattern: Fill form and submit
chrome-devtools_take_snapshot()
chrome-devtools_fill_form(elements=[
  {"uid": "username-field", "value": "testuser"},
  {"uid": "password-field", "value": "testpass"}
])
chrome-devtools_click(uid="submit-button")
chrome-devtools_wait_for(text="Login successful")

Element Verification Pattern

Copy// Pattern: Verify element exists and has expected state
chrome-devtools_evaluate_script(function=() => {
  const element = document.querySelector('#target-element');
  return element && element.textContent === 'Expected text';
})

Integration with testing workflows

Functional Testing Integration

• Use chrome-devtools for UI component testing within larger test suites
• Combine with assertion libraries for DOM state verification
• Integrate with existing test runners (Jest, Vitest) using tool calls

E2E Testing Workflow

Copy// Example E2E flow
1. chrome-devtools_new_page(url="https://app.gopayshortcuts.com")
2. chrome-devtools_fill_form(elements=[...])  // Login
3. chrome-devtools_click(uid="dashboard-link")
4. chrome-devtools_wait_for(text="Welcome back")
5. chrome-devtools_take_screenshot(filePath="dashboard.png")  // Verification
6. chrome-devtools_close_page()

Accessibility Testing Integration

• Use chrome-devtools_performance_start_trace for accessibility audits
• Check console messages for accessibility violations
• Evaluate scripts to test keyboard navigation and screen reader compatibility

Examples

Scrolling and Element Interaction

Copy// Scroll to element and click
chrome-devtools_evaluate_script(function=(element) => {
  element.scrollIntoView({ behavior: 'smooth' });
  return element.getBoundingClientRect();
}, args=[{"uid": "target-element"}])
chrome-devtools_click(uid="target-element")

Form Filling with Validation

Copy// Fill form with validation checks
chrome-devtools_fill(uid="email-field", value="user@example.com")
chrome-devtools_evaluate_script(function=() => {
  const email = document.getElementById('email-field');
  return email.checkValidity();  // HTML5 validation
})
chrome-devtools_fill(uid="password-field", value="securePass123")
chrome-devtools_click(uid="register-button")

Waiting for Dynamic Content

Copy// Wait for AJAX-loaded content
chrome-devtools_click(uid="load-more-button")
chrome-devtools_wait_for(text="New content loaded")
chrome-devtools_evaluate_script(function=() => {
  return document.querySelectorAll('.dynamic-item').length > 5;
})

Error handling and troubleshooting

Common Failure Patterns

Element not found errors:

• Cause: Page not fully loaded, dynamic content not rendered
• Solution: Add chrome-devtools_wait_for before taking snapshot, increase timeout
• Prevention: Use semantic selectors, avoid brittle XPath

Timeout errors:

• Cause: Network slow, page heavy, animations not complete
• Solution: Increase timeout parameter, wait for specific elements
• Prevention: Set realistic timeouts based on page complexity

Stale element references:

• Cause: Page updated after snapshot taken
• Solution: Take fresh snapshot before each interaction
• Prevention: Minimize time between snapshot and action

Debugging Techniques

Console logging:

Copychrome-devtools_list_console_messages()
chrome-devtools_get_console_message(msgid=0)

Network inspection:

Copychrome-devtools_list_network_requests()
chrome-devtools_get_network_request(reqid=0)

Visual debugging:

Copychrome-devtools_take_screenshot(filePath="debug-state.png")
chrome-devtools_take_snapshot(verbose=true)

Performance analysis:

Copychrome-devtools_performance_start_trace(reload=true, autoStop=true)
# After test completes, analyze trace for bottlenecks

Recovery Patterns

Retry failed operations:

Copy# Implement retry logic in your test framework
def retry_chrome_operation(operation, max_attempts=3):
    for attempt in range(max_attempts):
        try:
            operation()
            break
        except Exception as e:
            if attempt == max_attempts - 1:
                raise e
            time.sleep(1)

Clean up on failure:

Copy# Always close pages in finally blocks
try:
    # test operations
finally:
    chrome-devtools_close_page()

Reference

• Chrome DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/
• Related skills:
  • sveltekit-fullstack-development - For SvelteKit testing integration
  • testing-implementation-specialist - For comprehensive testing strategies
• GoPayShortcuts testing docs: See project README for testing setup