e2e-writer_skill

Overview

This skill generates Playwright end-to-end tests from a URL or a component file so you get runnable e2e coverage fast. It analyzes pages or source components, produces .spec.ts test files, and includes happy-path and error-case tests with selectors and assertions. One command, zero config — ready to run with npx.

How this skill works

The tool reads a component file or fetches a live URL, inspects the DOM and interaction points, and extracts likely user flows. It then uses an AI-driven generator to produce Playwright test files that cover form submissions, navigation, async behavior, and edge cases. Output files are complete .spec.ts tests you can run or add to CI immediately.

When to use it

• You have no e2e coverage and need a quick baseline suite
• A new feature shipped and you need tests before the next release
• QA is overloaded and you need automated regression checks
• You want starter tests for login, signup, checkout, or other critical flows
• You need test files to drop into CI quickly

Best practices

• Start with the most critical flows (login, signup, checkout) to maximize value
• Review and stabilize selectors—add data-testid attributes where possible
• Run generated tests immediately to validate and iterate on failures
• Add the generated tests to CI so regressions are caught early
• Tweak timeouts and network mocks for flaky or slow endpoints

Example use cases

• Generate tests for a single page component: npx ai-e2e-gen src/pages/Login.tsx
• Create tests from a live page URL: npx ai-e2e-gen https://myapp.com/signup
• Bulk-generate tests for many components: npx ai-e2e-gen src/pages/*.tsx
• Rapidly create a regression suite after a hotfix or production incident
• Seed CI with basic Playwright specs to protect critical user journeys