Generate

# 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 | `../pw/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 | `templates/settings/` | | Onboarding flow | `templates/onboarding/` | | API endpoints | `templates/api/` | | Accessibility | `templates/accessibility/` | Adapt the template to the specific app — replace `{{placeholders}}` with actual selectors, URLs, and data. ### 4. Generate the Test Follow these rules: **Structure:** ```typescript import { test, expect } from '@playwright/test'; // Import custom fixtures if the project uses them test.describe('Feature Name', () => { // Group related behaviors test('should <expected behavior>', async ({ page }) => { // Arrange: navigate, set up state // Act: perform user action // Assert: verify outcome }); }); ``` **Locator priority** (use the first that works): 1. `getByRole()` — buttons, links, headings, form elements 2. `getByLabel()` — form fields with labels 3. `getByText()` — non-interactive text content 4. `getByPlaceholder()` — inputs with placeholder text 5. `getByTestId()` — when semantic options aren't available **Assertions** — always web-first: ```typescript // GOOD — auto-retries await expect(page.getByRole('heading')).toBeVisible(); await expect(page.getByRole('alert')).toHaveText('Success'); // BAD — no retry const text = await page.textContent('.msg'); expect(text).toBe('Success'); ``` **Never use:** - `page.waitForTimeout()` - `page.$(selector)` or `page.$$(selector)` - Bare CSS selectors unless absolutely necessary - `page.evaluate()` for things locators can do **Always include:** - Descriptive test names that explain the behavior - Error/edge case tests alongside happy path - Proper `await` on every Playwright call - `baseURL`-relative navigation (`page.goto('/')` not `page.goto('http://...')`) ### 5. Match Project Conventions - If project uses TypeScript → generate `.spec.ts` - If project uses JavaScript → generate `.spec.js` with `require()` imports - If project has page objects → use them instead of inline locators - If project has custom fixtures → import and use them - If project has a test data directory → create test data files there ### 6. Generate Supporting Files (If Needed) - **Page object**: If the test touches 5+ unique locators on one page, create a page object - **Fixture**: If the test needs shared setup (auth, data), create or extend a fixture - **Test data**: If the test uses structured data, create a JSON file in `test-data/` ### 7. Verify Run the generated test: ```bash npx playwright test <generated-file> --reporter=list ``` If it fails: 1. Read the error 2. Fix the test (not the app) 3. Run again 4. If it's an app issue, report it to the user ## Output - Generated test file(s) with path - Any supporting files created (page objects, fixtures, data) - Test run result - Coverage note: what behaviors are now tested