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 '

,

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

安装

--reporter