generate
Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".
Security Assessment
About generate
This skill generates production-ready Playwright end-to-end tests from a user story, URL, component path, or feature description. It solves the problem of writing reliable, convention-matching browser tests by hand: it explores the existing project to learn its test directory, base URL, fixtures, and page-object conventions before generating anything, so the output fits the target codebase rather than a generic template.
The workflow parses what to test, uses an Explore subagent to read the Playwright config and existing tests, selects a matching template (auth, CRUD, checkout, search, forms, dashboard, settings, onboarding, API, accessibility), and adapts it with real selectors and data. Generated tests follow strict quality rules: a locator priority order favoring getByRole, getByLabel, and other semantic locators over bare CSS; web-first auto-retrying assertions; and an explicit ban on anti-patterns like waitForTimeout, page.$ selectors, and unnecessary page.evaluate. It matches project conventions for TypeScript vs JavaScript, page objects, and fixtures, and can generate supporting page objects, fixtures, and test-data files when warranted. Finally it runs the generated test with the Playwright CLI and iterates on failures.
It is aimed at web developers and QA engineers who use Playwright and want consistent, maintainable e2e coverage generated in their own project's style. Use cases include testing login and checkout flows, form validation, search-and-filter UIs, and component behavior. The skill ships with a SKILL.md and a patterns.md library of concrete test examples for authentication, CRUD, and validation flows.
FAQ
What inputs does it accept?
A user story, a component file path, a page or URL, or a feature name — for example 'user can log in with email and password' or 'src/components/UserProfile.tsx'.
What locator and assertion style does it enforce?
It prefers semantic locators (getByRole, getByLabel, getByText, getByPlaceholder, getByTestId in that order) and always uses web-first auto-retrying assertions instead of manual text extraction.
Which anti-patterns does it avoid?
It never uses page.waitForTimeout(), page.$/page.$$ selectors, bare CSS selectors unless unavoidable, or page.evaluate() for things locators can do.
Does it verify the tests it writes?
Yes — it runs the generated test with 'npx playwright test <file> --reporter=list', reads any error, and fixes the test rather than the app, reporting genuine app issues back to you.
Will it match my project's conventions?
It reads playwright.config.ts and existing tests to match TypeScript vs JavaScript, existing page objects, custom fixtures, and test-data directories.
Install generate
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
alirezarezvani/claude-skills