From browser-devtools-mcp
Automated browser testing and debugging using Browser DevTools MCP. Use when testing web pages, debugging frontend issues, verifying UI behavior, or automating browser interactions.
npx claudepluginhub serkan-ozal/browser-devtools-claude --plugin browser-devtools-mcpThis skill uses the workspace's default tool permissions.
Automated browser testing and debugging skill using Browser DevTools MCP.
Automates browser testing/debugging with DevTools MCP: navigate/interact, screenshots, console/HTTP logs, Web Vitals, accessibility audits, request mocking, React DevTools, JS execution.
Automates Playwright browser tasks: navigates URLs, takes screenshots, snapshots accessibility tree, interacts with UI elements (click, type, fill forms), reports findings. For e2e testing, deployment verification, debugging.
Automates browser testing for web apps using Playwright MCP: navigate pages, click/fill elements, take screenshots, verify UI/console logs, debug frontend issues, validate responsive design.
Share bugs, ideas, or general feedback.
Automated browser testing and debugging skill using Browser DevTools MCP.
Page structure: To understand what is on a page, use ARIA snapshot first (a11y_take-aria-snapshot or a11y_take-ax-tree-snapshot), not screenshot. Use screenshot only when you need to verify how something looks visually (e.g. design check, visual bug).
This skill activates when:
a11y_take-aria-snapshot) — Returns refs (e1, e2, …) and a refs map. Options: interactiveOnly, cursorInteractive (for div/span buttons), selector (scope).e1, @e1). Refs valid until next snapshot or navigation.content_take-screenshot with annotate: true overlays labels [1],[2],… mapping to e1,e2,…navigation_go-to) — returns ARIA snapshot and refs by default; use response refs for interactions without calling a11y_take-aria-snapshot againnavigation_go-back-or-forward and navigation_reload (includeSnapshot: true)e1, #submit)interaction_press-key), scroll (interaction_scroll), drag (interaction_drag)content_take-screenshot) — optional annotate, annotateContent, cursorInteractiveo11y_get-console-messages)o11y_get-http-requests)o11y_get-web-vitals)o11y_get-trace-id, o11y_set-trace-id)a11y_take-aria-snapshot) — returns refs; options: interactiveOnly, cursorInteractive, selectora11y_take-ax-tree-snapshot) — bounding box, occlusion, stylesstub_intercept-http-request)stub_mock-http-response)stub_list)stub_clear)react_get-component-for-element)react_get-element-for-component)page.evaluate() (e.g. return await page.evaluate(() => document.title)). See commands/browser/execute.md for callTool and page.page; use built-ins and callTool). On Node platform, execute runs in the session VM (callTool only).execute — Run custom JavaScript that can call multiple tools in one request via await callTool(name, input, returnOutput?). Use to batch click/fill/select/navigation and reduce round-trips. Code runs in async IIFE (no wrapper); browser platform exposes page (Playwright). Prefer when you have a fixed sequence of steps; use individual tools when you need to inspect results between steps. Also supported: browser-devtools-mcp CLI subcommand run execute, and daemon HTTP API (POST /call with toolName: "execute").a11y_take-aria-snapshot, then use refs (e1, e2) in interactions or take annotated screenshots.annotate: true when you need visual labels that match refs for vision-driven actions