← ClaudeAtlas

generatelisted

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".
adriannoes/awesome-vibe-coding · ★ 38 · AI & Automation · score 83
Install: claude install-skill adriannoes/awesome-vibe-coding
# Generate Playwright Tests Generate production-ready Playwright tests from a user story, URL, component name, or feature description. ## Input `$ARGUMENTS` contains what to test. Examples: - `"user can log in with email and password"` - `"the checkout flow"` - `"src/components/UserProfile.tsx"` - `"the search page with filters"` ## Steps ### 1. Understand the Target Parse `$ARGUMENTS` to determine: - **User story**: Extract the behavior to verify - **Component path**: Read the component source code - **Page/URL**: Identify the route and its elements - **Feature name**: Map to relevant app areas ### 2. Explore the Codebase Use the `Explore` subagent to gather context: - Read `playwright.config.ts` for `testDir`, `baseURL`, `projects` - Check existing tests in `testDir` for patterns, fixtures, and conventions - If a component path is given, read the component to understand its props, states, and interactions - Check for existing page objects in `pages/` - Check for existing fixtures in `fixtures/` - Check for auth setup (`auth.setup.ts` or `storageState` config) ### 3. Select Templates Check `templates/` in this plugin for matching patterns: | If testing... | Load template from | |---|---| | Login/auth flow | `templates/auth/login.md` | | CRUD operations | `templates/crud/` | | Checkout/payment | `templates/checkout/` | | Search/filter UI | `templates/search/` | | Form submission | `templates/forms/` | | Dashboard/data | `templates/dashboard/` | | Settings page | `