What is the Reconnaissance-Then-Action pattern?

It is a reliable workflow where the agent first observes the page state via snapshots and wait commands before performing actions, ensuring elements are fully rendered and interactive.

Can I use this for visual testing?

Yes, the skill includes tools for taking screenshots and accessibility snapshots to compare visual states and document evidence of UI behavior.

Does this skill support modern JavaScript web apps?

Yes, it specifically includes wait commands and snapshot tools designed to handle dynamic JS rendering and asynchronous state changes common in modern web applications.

How does this skill help with bug fixing?

It automates the reproduction of bugs by navigating to the target page and capturing console logs and network requests, then verifies the fix by re-running the same scenario.

Playwright MCP Browser Automation

Name: Playwright MCP Browser Automation
Author: xxziiko

byxxziiko

0•

Browser Automation

Enables automated browser interactions, visual testing, and bug reproduction using the Playwright Model Context Protocol.

This skill empowers Claude to perform advanced browser automation by providing a comprehensive suite of tools for navigating pages, capturing accessibility snapshots, and executing user interactions. It implements the 'Reconnaissance-Then-Action' pattern to ensure reliable execution in dynamic web applications and offers specialized workflows for reproducing bugs and verifying code fixes. By integrating with DevTools, it allows for deep inspection of console logs and network requests, making it an essential tool for end-to-end testing and runtime debugging within the Claude Code environment.

Key Features

01Bug Reproduction Workflows: Standardized steps to replicate issues with console and network log capture.

02DevTools Collaboration: Simultaneous observation and action by pairing with DevTools MCP for runtime debugging.

03Visual & Structural Inspection: Capture accessibility tree snapshots and screenshots for state verification.

04Full Browser Control: Navigate, click, type, hover, and press keys programmatically.

050 GitHub stars

06Reconnaissance-Then-Action Pattern: Strategic execution to handle dynamic JavaScript rendering and async states.

Use Cases

01Reproducing and debugging complex frontend bugs by capturing runtime errors and failing network requests.

02Automating end-to-end testing scenarios to verify new feature implementations in a real browser.

03Verifying UI fixes by comparing visual states and ensuring console errors are resolved after code changes.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xxziiko/subagent playwright-mcp

For use in Claude.ai and ChatGPT