How are manual steps handled in the generated tests?

Steps tagged with [MANUAL] in your markdown are translated into test.skip() blocks in Playwright, ensuring they are documented in the code without failing the CI build.

Will it overwrite my existing Playwright tests?

No, it uses a diff strategy that parses existing files to detect changes. It will ask for confirmation before updating and attempts to preserve code marked with custom comments.

How does this skill find the correct selectors for my app?

The skill spawns a specialized Explore agent that searches your codebase for the most stable selectors, prioritizing data-testid, aria-labels, and semantic roles over fragile CSS paths.

Can I use this for workflows that require file uploads?

Yes, the skill automatically maps natural language commands like 'upload [file]' or 'select [option]' to the appropriate Playwright API calls like setInputFiles and selectOption.

Browser Workflow to Playwright

Name: Browser Workflow to Playwright
Author: neonwatty

byneonwatty

0•

セキュリティとテスト

Translates human-readable browser workflow markdown files into automated Playwright E2E test suites for continuous integration.

This skill bridges the gap between manual testing documentation and automated CI suites by intelligently converting browser workflow specifications into robust Playwright code. It utilizes a sophisticated multi-agent pipeline to parse natural language steps, discover the most stable selectors within your codebase (prioritizing data-testids and ARIA labels), and generate structured TypeScript tests. The skill includes a smart diffing strategy to update existing test files while preserving manual modifications, ensuring your automated suites stay synchronized with evolving user journey documentation.

主な機能

01Smart diffing strategy to update existing test files while preserving custom code

020 GitHub stars

03Natural language mapping for complex actions like file uploads, hovers, and selections

04Automated translation of Markdown workflows into Playwright TypeScript tests

05Automatic handling of manual testing steps using test.skip() blocks

06Priority-based selector discovery searching for data-testids, ARIA labels, and roles

ユースケース

01Promoting refined browser workflows from manual execution to automated CI/CD pipelines

02Maintaining synchronization between human-readable test plans and automated execution scripts

03Rapidly generating E2E test boilerplate from existing product requirements documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add neonwatty/claude-skills browser-workflow-to-playwright

For use in Claude.ai and ChatGPT

Download Skill