generate

SKILL.md

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 tested