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

{
  "format": "aiskill/v1",
  "skill": {
    "name": "generate",
    "slug": "playwright-generate",
    "version": "1.0.0",
    "description": "Generate Playwright tests. Use when user says \"write tests\", \"generate tests\", \"add tests for\", \"test this component\", \"e2e test\", \"create test for\", \"test this page\", or \"test this feature\".",
    "category": "Development",
    "tags": [
      "testing"
    ],
    "platforms": [
      "chatgpt",
      "claude-code",
      "cursor"
    ],
    "tested_environment": "Agent Skills convention (SKILL.md) — works with Claude Code, Cursor, ChatGPT/Codex and compatible agents",
    "license": "MIT"
  },
  "prompts": {
    "system": "# Generate Playwright Tests\r\n\r\nGenerate production-ready Playwright tests from a user story, URL, component name, or feature description.\r\n\r\n## Input\r\n\r\n`$ARGUMENTS` contains what to test. Examples:\r\n- `\"user can log in with email and password\"`\r\n- `\"the checkout flow\"`\r\n- `\"src/components/UserProfile.tsx\"`\r\n- `\"the search page with filters\"`\r\n\r\n## Steps\r\n\r\n### 1. Understand the Target\r\n\r\nParse `$ARGUMENTS` to determine:\r\n- **User story**: Extract the behavior to verify\r\n- **Component path**: Read the component source code\r\n- **Page/URL**: Identify the route and its elements\r\n- **Feature name**: Map to relevant app areas\r\n\r\n### 2. Explore the Codebase\r\n\r\nUse the `Explore` subagent to gather context:\r\n\r\n- Read `playwright.config.ts` for `testDir`, `baseURL`, `projects`\r\n- Check existing tests in `testDir` for patterns, fixtures, and conventions\r\n- If a component path is given, read the component to understand its props, states, and interactions\r\n- Check for existing page objects in `pages/`\r\n- Check for existing fixtures in `fixtures/`\r\n- Check for auth setup (`auth.setup.ts` or `storageState` config)\r\n\r\n### 3. Select Templates\r\n\r\nCheck `templates/` in this plugin for matching patterns:\r\n\r\n| If testing... | Load template from |\r\n|---|---|\r\n| Login/auth flow | `../pw/templates/auth/login.md` |\r\n| CRUD operations | `templates/crud/` |\r\n| Checkout/payment | `templates/checkout/` |\r\n| Search/filter UI | `templates/search/` |\r\n| Form submission | `templates/forms/` |\r\n| Dashboard/data | `templates/dashboard/` |\r\n| Settings page | `templates/settings/` |\r\n| Onboarding flow | `templates/onboarding/` |\r\n| API endpoints | `templates/api/` |\r\n| Accessibility | `templates/accessibility/` |\r\n\r\nAdapt the template to the specific app — replace `{{placeholders}}` with actual selectors, URLs, and data.\r\n\r\n### 4. Generate the Test\r\n\r\nFollow these rules:\r\n\r\n**Structure:**\r\n```typescript\r\nimport { test, expect } from '@playwright/test';\r\n// Import custom fixtures if the project uses them\r\n\r\ntest.describe('Feature Name', () => {\r\n  // Group related behaviors\r\n\r\n  test('should <expected behavior>', async ({ page }) => {\r\n    // Arrange: navigate, set up state\r\n    // Act: perform user action\r\n    // Assert: verify outcome\r\n  });\r\n});\r\n```\r\n\r\n**Locator priority** (use the first that works):\r\n1. `getByRole()` — buttons, links, headings, form elements\r\n2. `getByLabel()` — form fields with labels\r\n3. `getByText()` — non-interactive text content\r\n4. `getByPlaceholder()` — inputs with placeholder text\r\n5. `getByTestId()` — when semantic options aren't available\r\n\r\n**Assertions** — always web-first:\r\n```typescript\r\n// GOOD — auto-retries\r\nawait expect(page.getByRole('heading')).toBeVisible();\r\nawait expect(page.getByRole('alert')).toHaveText('Success');\r\n\r\n// BAD — no retry\r\nconst text = await page.textContent('.msg');\r\nexpect(text).toBe('Success');\r\n```\r\n\r\n**Never use:**\r\n- `page.waitForTimeout()`\r\n- `page.$(selector)` or `page.$$(selector)`\r\n- Bare CSS selectors unless absolutely necessary\r\n- `page.evaluate()` for things locators can do\r\n\r\n**Always include:**\r\n- Descriptive test names that explain the behavior\r\n- Error/edge case tests alongside happy path\r\n- Proper `await` on every Playwright call\r\n- `baseURL`-relative navigation (`page.goto('/')` not `page.goto('http://...')`)\r\n\r\n### 5. Match Project Conventions\r\n\r\n- If project uses TypeScript → generate `.spec.ts`\r\n- If project uses JavaScript → generate `.spec.js` with `require()` imports\r\n- If project has page objects → use them instead of inline locators\r\n- If project has custom fixtures → import and use them\r\n- If project has a test data directory → create test data files there\r\n\r\n### 6. Generate Supporting Files (If Needed)\r\n\r\n- **Page object**: If the test touches 5+ unique locators on one page, create a page object\r\n- **Fixture**: If the test needs shared setup (auth, data), create or extend a fixture\r\n- **Test data**: If the test uses structured data, create a JSON file in `test-data/`\r\n\r\n### 7. Verify\r\n\r\nRun the generated test:\r\n\r\n```bash\r\nnpx playwright test <generated-file> --reporter=list\r\n```\r\n\r\nIf it fails:\r\n1. Read the error\r\n2. Fix the test (not the app)\r\n3. Run again\r\n4. If it's an app issue, report it to the user\r\n\r\n## Output\r\n\r\n- Generated test file(s) with path\r\n- Any supporting files created (page objects, fixtures, data)\r\n- Test run result\r\n- Coverage note: what behaviors are now tested",
    "user_template": ""
  },
  "variables": [],
  "install": {
    "steps": [
      {
        "title": "Download & unzip",
        "detail": "Download the .zip package from SkillVault and unzip it. The playwright-generate/ folder contains SKILL.md plus any companion scripts, references and assets."
      },
      {
        "title": "Copy into your agent skills directory",
        "detail": "Move the folder into your agent's skills directory — e.g. ~/.claude/skills/ (Claude Code), .codex/skills/, .cursor/skills/ or your project's .claude/skills/ folder — then restart or reload the session."
      },
      {
        "title": "Use it",
        "detail": "Describe the task in natural language; the agent loads the skill automatically when the request matches the skill description."
      }
    ]
  },
  "usage": {
    "steps": []
  },
  "metadata": {
    "author": "SkillVault",
    "source": "https://skillvault.top/skills/playwright-generate",
    "exported_at": "2026-11-03T07:43:31.498Z"
  }
}

format: aiskill/v1
skill:
  name: generate
  slug: playwright-generate
  version: 1.0.0
  description: >-
    Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for",
    "test this component", "e2e test", "create test for", "test this page", or "test this feature".
  category: Development
  tags:
    - testing
  platforms:
    - chatgpt
    - claude-code
    - cursor
  tested_environment: >-
    Agent Skills convention (SKILL.md) — works with Claude Code, Cursor, ChatGPT/Codex and
    compatible agents
  license: MIT
prompts:
  system: "# Generate Playwright Tests\r\n\r\nGenerate production-ready Playwright tests from a user story, URL, component name, or feature description.\r\n\r\n## Input\r\n\r\n`$ARGUMENTS` contains what to test. Examples:\r\n- `\"user can log in with email and password\"`\r\n- `\"the checkout flow\"`\r\n- `\"src/components/UserProfile.tsx\"`\r\n- `\"the search page with filters\"`\r\n\r\n## Steps\r\n\r\n### 1. Understand the Target\r\n\r\nParse `$ARGUMENTS` to determine:\r\n- **User story**: Extract the behavior to verify\r\n- **Component path**: Read the component source code\r\n- **Page/URL**: Identify the route and its elements\r\n- **Feature name**: Map to relevant app areas\r\n\r\n### 2. Explore the Codebase\r\n\r\nUse the `Explore` subagent to gather context:\r\n\r\n- Read `playwright.config.ts` for `testDir`, `baseURL`, `projects`\r\n- Check existing tests in `testDir` for patterns, fixtures, and conventions\r\n- If a component path is given, read the component to understand its props, states, and interactions\r\n- Check for existing page objects in `pages/`\r\n- Check for existing fixtures in `fixtures/`\r\n- Check for auth setup (`auth.setup.ts` or `storageState` config)\r\n\r\n### 3. Select Templates\r\n\r\nCheck `templates/` in this plugin for matching patterns:\r\n\r\n| If testing... | Load template from |\r\n|---|---|\r\n| Login/auth flow | `../pw/templates/auth/login.md` |\r\n| CRUD operations | `templates/crud/` |\r\n| Checkout/payment | `templates/checkout/` |\r\n| Search/filter UI | `templates/search/` |\r\n| Form submission | `templates/forms/` |\r\n| Dashboard/data | `templates/dashboard/` |\r\n| Settings page | `templates/settings/` |\r\n| Onboarding flow | `templates/onboarding/` |\r\n| API endpoints | `templates/api/` |\r\n| Accessibility | `templates/accessibility/` |\r\n\r\nAdapt the template to the specific app — replace `{{placeholders}}` with actual selectors, URLs, and data.\r\n\r\n### 4. Generate the Test\r\n\r\nFollow these rules:\r\n\r\n**Structure:**\r\n```typescript\r\nimport { test, expect } from '@playwright/test';\r\n// Import custom fixtures if the project uses them\r\n\r\ntest.describe('Feature Name', () => {\r\n  // Group related behaviors\r\n\r\n  test('should <expected behavior>', async ({ page }) => {\r\n    // Arrange: navigate, set up state\r\n    // Act: perform user action\r\n    // Assert: verify outcome\r\n  });\r\n});\r\n```\r\n\r\n**Locator priority** (use the first that works):\r\n1. `getByRole()` — buttons, links, headings, form elements\r\n2. `getByLabel()` — form fields with labels\r\n3. `getByText()` — non-interactive text content\r\n4. `getByPlaceholder()` — inputs with placeholder text\r\n5. `getByTestId()` — when semantic options aren't available\r\n\r\n**Assertions** — always web-first:\r\n```typescript\r\n// GOOD — auto-retries\r\nawait expect(page.getByRole('heading')).toBeVisible();\r\nawait expect(page.getByRole('alert')).toHaveText('Success');\r\n\r\n// BAD — no retry\r\nconst text = await page.textContent('.msg');\r\nexpect(text).toBe('Success');\r\n```\r\n\r\n**Never use:**\r\n- `page.waitForTimeout()`\r\n- `page.$(selector)` or `page.$$(selector)`\r\n- Bare CSS selectors unless absolutely necessary\r\n- `page.evaluate()` for things locators can do\r\n\r\n**Always include:**\r\n- Descriptive test names that explain the behavior\r\n- Error/edge case tests alongside happy path\r\n- Proper `await` on every Playwright call\r\n- `baseURL`-relative navigation (`page.goto('/')` not `page.goto('http://...')`)\r\n\r\n### 5. Match Project Conventions\r\n\r\n- If project uses TypeScript → generate `.spec.ts`\r\n- If project uses JavaScript → generate `.spec.js` with `require()` imports\r\n- If project has page objects → use them instead of inline locators\r\n- If project has custom fixtures → import and use them\r\n- If project has a test data directory → create test data files there\r\n\r\n### 6. Generate Supporting Files (If Needed)\r\n\r\n- **Page object**: If the test touches 5+ unique locators on one page, create a page object\r\n- **Fixture**: If the test needs shared setup (auth, data), create or extend a fixture\r\n- **Test data**: If the test uses structured data, create a JSON file in `test-data/`\r\n\r\n### 7. Verify\r\n\r\nRun the generated test:\r\n\r\n```bash\r\nnpx playwright test <generated-file> --reporter=list\r\n```\r\n\r\nIf it fails:\r\n1. Read the error\r\n2. Fix the test (not the app)\r\n3. Run again\r\n4. If it's an app issue, report it to the user\r\n\r\n## Output\r\n\r\n- Generated test file(s) with path\r\n- Any supporting files created (page objects, fixtures, data)\r\n- Test run result\r\n- Coverage note: what behaviors are now tested"
  user_template: ""
variables: []
install:
  steps:
    - title: Download & unzip
      detail: >-
        Download the .zip package from SkillVault and unzip it. The playwright-generate/ folder
        contains SKILL.md plus any companion scripts, references and assets.
    - title: Copy into your agent skills directory
      detail: >-
        Move the folder into your agent's skills directory — e.g. ~/.claude/skills/ (Claude Code),
        .codex/skills/, .cursor/skills/ or your project's .claude/skills/ folder — then restart or
        reload the session.
    - title: Use it
      detail: >-
        Describe the task in natural language; the agent loads the skill automatically when the
        request matches the skill description.
usage:
  steps: []
metadata:
  author: SkillVault
  source: https://skillvault.top/skills/playwright-generate
  exported_at: "2026-11-03T07:43:31.498Z"