serkan-ozal/browser-devtools-mcp

Overview

This skill automates browser interactions using Playwright, exposing a live, inspectable browser environment for web testing, debugging, and automation. It provides CLI commands to navigate pages, interact with elements, capture content, audit accessibility, measure performance, monitor network/console, mock APIs, and integrate with React and Figma workflows. It is built for programmatic agents and CI workflows that need traceable browser control.

How this skill works

The skill runs a daemon that exposes a persistent browser session controlled via a CLI. Commands map to domains (navigation, content, interaction, a11y, o11y, stub, react, figma, etc.) and emit JSON-friendly output for AI parsing. It supports session IDs for state persistence, headless or headed modes, request interception for mocking, and runtime inspection like Web Vitals, console logs, HTTP traces, and ARIA/AX snapshots.

When to use it

• Automating end-to-end tests or CI visual checks (screenshots, PDFs, DOM/text extraction).
• Debugging dynamic web pages with live console, network traces, and React component inspection.
• Measuring performance and Web Vitals across pages or releases.
• Running accessibility audits (ARIA snapshots, AX tree) for compliance checks.
• Mocking backend responses to test edge cases or offline flows.
• Comparing UI against Figma designs or running visual diffs.

Best practices

• Use --json and --quiet when driving the CLI from agents or scripts to simplify parsing.
• Reuse a session-id to preserve cookies and local storage across steps when testing flows.
• Run in headless mode for CI; enable --no-headless for interactive debugging or manual inspection.
• Set appropriate --timeout values for slow pages and use sync wait-for-network-idle before captures.
• Mock external APIs with stub mock-http-response to create deterministic test environments.

Example use cases

• CI pipeline that navigates, waits for network idle, takes a screenshot, and fails on console errors.
• Agent-driven exploratory testing that fills forms, submits, and extracts resulting page text.
• Performance audit script that collects Web Vitals and HTTP traces for multiple pages.
• Accessibility runner that captures ARIA snapshots and AX trees for automated reports.
• Feature testing with API stubs to simulate backend errors and verify UI fallback behavior.