skills.rest
metasaver
metasaverCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools-testing

Automate GUI Chrome web application testing via Chrome DevTools Protocol.

Updated Aug 27, 2026
Search Tags:#quality assurance#browser automation#web testing#Chrome DevTools#E2E testing#GUI testing#CDP
One-click install
npx skills add https://github.com/metasaver/metasaver-marketplace --skill chrome-devtools-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools-testing
Source: https://github.com/metasaver/metasaver-marketplace/tree/main/plugins/metasaver-core/skills/cross-cutting/chrome-devtools-testing
Command: npx skills add https://github.com/metasaver/metasaver-marketplace --skill chrome-devtools-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automating web application testing, especially for E2E scenarios, often requires complex setups and can be prone to headless browser issues. This Skill standardizes GUI Chrome DevTools automation for reliable testing.

Core Features & Use Cases

  • GUI Chrome Automation: Provides a standard setup for launching GUI Chrome with remote debugging, avoiding the known issues of headless mode.
  • E2E Testing Workflow: Guides through a complete workflow from starting Chrome and dev servers to navigating, inspecting (snapshots, console, network), and interacting (click, fill, hover) with web pages.
  • Troubleshooting & Best Practices: Offers solutions for common issues like "requires non-default data directory," "Not connected" from MCP, ERR_CONNECTION_REFUSED, and specific WSL environment failures.
  • Use Case: Automate an end-to-end test for a checkout flow, including navigating pages, filling forms, clicking buttons, and taking screenshots to verify visual elements.

Quick Start

Start Chrome with remote debugging and navigate to "http://localhost:3000/login".

Frequently Asked Questions about chrome-devtools-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate end-to-end testing with Chrome DevTools Protocol?▼

Chrome DevTools Protocol (CDP) enables browser automation by launching GUI Chrome with remote debugging on port 9222, then orchestrating navigation, DOM inspection, and user interactions programmatically. This approach avoids headless browser limitations and provides reliable E2E testing for web applications.

Can I use Chrome DevTools for GUI browser automation instead of headless mode?▼

Yes. GUI Chrome automation with CDP solves common headless browser issues by running a full graphical browser instance with remote debugging enabled, allowing visual verification, screenshot capture, and more stable interaction handling during test execution.

How do I set up Chrome with remote debugging for automated testing?▼

Launch Chrome with a non-default user data directory and remote debugging on port 9222, verify the CDP endpoint is accessible, start your dev server (e.g., Vite), then connect via MCP to automate navigation, snapshots, and interactions across your test workflow.

What are common connection issues when automating Chrome DevTools tests?▼

Frequent errors include 'requires non-default data directory,' 'Not connected' from MCP, ERR_CONNECTION_REFUSED, and WSL environment failures. Troubleshooting involves verifying the CDP endpoint, confirming port 9222 accessibility, and ensuring proper dev server orchestration.

Does Chrome DevTools automation work for testing checkout flows and form interactions?▼

Yes. E2E testing with CDP supports complete user workflows including page navigation, form filling, button clicks, hovering, and screenshot capture to verify visual elements—ideal for checkout flows, login sequences, and multi-step transaction testing.

What's the difference between GUI Chrome testing and headless browser automation?▼

GUI Chrome automation provides a visible browser instance with stable interaction handling and screenshot verification, avoiding headless mode instabilities. It's preferred for visual testing, debugging, and complex user interactions that require full DOM inspection and network monitoring.

Related Skills

Explore More Software Engineering Skills→
ajianazajianaz
4

browser

Automate Chrome browser control for site exploration and scraping via CDP.

Community
Advanced
janjaszczakjanjaszczak

mcp-browser-verify

Validate UI flows and reproduce issues with Playwright browser automation.

Community
Intermediate
paidethonpaidethon

use-my-browser

Interact with a live browser session via Chrome DevTools Protocol.

Community
Advanced
SecurityRoninSecurityRonin
1

browser-automation

Automate browser tasks and testing across Playwright, Puppeteer, Selenium, and CDP workflows.

Official
Intermediate