back
loading skill details...
>-
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
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:
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):
getByRole() — buttons, links, headings, form elements
getByLabel() — form fields with labels
getByText() — non-interactive text content
getByPlaceholder() — inputs with placeholder text
getByTestId() — when semantic options aren't available
Assertions — always web-first:
// 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:
npx playwright test <generated-file> --reporter=list
If it fails:
Read the error
Fix the test (not the app)
Run again
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 testeddon't have the plugin yet? install it then click "run inline in claude" again.