Generate Playwright Tests

Generate production-ready Playwright tests from a user story, URL, component name, or feature description.

Input

$ARGUMENTS

• "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

• 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

• 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/

templates/auth/login.md

templates/crud/

templates/checkout/

templates/search/

templates/forms/

templates/dashboard/

templates/settings/

templates/onboarding/

templates/api/

templates/accessibility/

Adapt the template to the specific app — replace

{{placeholders}}

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):

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:

// 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:

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