Generate Playwright Tests
Generates production-ready Playwright tests from a user story, URL, component name, or feature description. It explores the codebase, selects appropriate templates, and produces test files that follow best practices and project conventions.
✨ What it does
- Parses input to determine the target: user story, component, page, or feature.
- Explores the codebase for config, existing tests, page objects, fixtures, and auth setup.
- Selects and adapts templates for common flows like login, CRUD, checkout, search, forms, dashboard, settings, onboarding
- Generates tests with web-first assertions, proper locator priority, and no anti-patterns like waitForTimeout.
- Matches project conventions: TypeScript/JavaScript, page objects, custom fixtures, and test data files.
- Verifies generated tests by running them and fixing failures.
🎯 When to use it
- When the user asks to write or generate tests for a feature, page, or component.
- When the user provides a user story or behavior to verify with end-to-end tests.
- When the user specifies a component path or URL and wants tests for it.
- When the user wants to add e2e test coverage for a new or existing feature.
🚀 How to use
Trigger by asking to write, generate, or add tests for a feature, page, or component. Provide a user story, URL, component path, or feature description as input. The skill will explore your codebase and generate test files.
Example prompts:
write tests for user can log in with email and password
generate tests for the checkout flow
add tests for src/components/UserProfile.tsx
📄 Output: Generated test file(s) and any supporting files (page objects, fixtures, test data), along with test run results and coverage notes.
📦 Add this skill to Claude Code
# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills
# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/engineering-team/playwright-pro/skills/generate .claude/skills/generateSkill source: engineering-team/playwright-pro/skills/generate/SKILL.md
⚠️ Good to know
Requires a Playwright project with a playwright.config.ts and assumes the app is runnable for verification; if tests fail due to app issues, it reports them to the user.
❓ FAQ
What locator strategies does the skill use?
It prioritizes getByRole, getByLabel, getByText, getByPlaceholder, and getByTestId in that order, avoiding bare CSS selectors.
Does the skill create page objects?
Yes, if a test touches 5+ unique locators on one page, it creates a page object.
How does the skill handle project-specific conventions?
It checks for TypeScript vs JavaScript, existing page objects, custom fixtures, and test data directories, and generates code accordingly.
🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.