Playwright Test Generator

Playwright Test Generator

An AI-powered skill that automatically generates Playwright test scripts from natural language descriptions, HTML/page analysis, or existing page URLs.

When to Use

This skill activates when the user:

Input Types

1. Natural Language → Test Code

Example:

Input: "Login to the app with username and password, then verify dashboard loads"
Output: Complete pytest-playwright test with POM

2. Page/URL Analysis → Locators + POM

Example:

Input: URL https://example.com/login
Output: login_page.py with all form element locators + methods

3. HTML Snippet → Element Locators

Output Types (Code Genres)

| Genre | Description | Framework | |-------|-------------|-----------| | pom | Page Object Model | pytest-playwright / Jest Playwright | | standard | Standard test script | pytest-playwright / native Playwright | | data-driven | Parameterized data tests | pytest-playwright / Jest Playwright | | api | API test helpers | Any |

Framework Support

| Framework | Language | Code Type | |-----------|----------|-----------| | pytest-playwright | Python | pom, standard, data-driven | | jest-playwright | JavaScript/TypeScript | pom, standard, data-driven | | native-playwright | JavaScript/TypeScript | standard, pom |

Usage

Command Mode

# Generate from natural language
playwright-test-generator generate \
  --input "Click login button, enter username and password, click submit" \
  --framework pytest \
  --type pom \
  --output ./tests/
Analyze URL and generate POM
playwright-test-generator analyze \
  --url https://example.com/login \
  --framework pytest \
  --output ./pages/
Analyze HTML and generate locators
playwright-test-generator extract-locators \
  --html "$(cat form.html)" \
  --output ./locators.json

Interactive Mode

playwright-test-generator interactive

Follow the guided wizard to generate tests step by step.

API Mode (from other skills/agents)

import { PlaywrightTestGenerator } from './src/generator.js';
const gen = new PlaywrightTestGenerator();
const result = await gen.generate({
  input: 'Click the search box, type "playwright", press Enter',
  framework: 'pytest-playwright',
  codeType: 'standard',
  pageName: 'search_page'
});

Pricing / Tier

| Tier | Features | Rate | |------|----------|------| | Free | ≤10 generations/day, standard scripts only | 0 credits | | Pro | Unlimited, POM + data-driven, priority | 1 credit/test | | Enterprise | Custom frameworks, team features, SLA | Contact |

Developer Guide

Architecture

src/
├── index.js        # CLI entry + skill interface
├── generator.js    # Core code generation logic
├── parser.js       # NL → test steps parser
├── locator.js      # HTML → locator extractor
└── templates/      # Code generation templates
    ├── pytest_pom.py.ejs
    ├── pytest_standard.py.ejs
    ├── pytest_data_driven.py.ejs
    ├── jest_pom.ts.ejs
    ├── jest_standard.ts.ejs
    └── native_pom.ts.ejs

Generator Pipeline

1. Parse NL input → structured test steps 2. Extract page elements (if URL/HTML provided) 3. Select template based on framework + code type 4. Render template with steps + locators 5. Output formatted code

Test Steps Schema

{
  action: 'click' | 'fill' | 'press' | 'navigate' | 'wait' | 'assert' | 'hover' | 'select' | 'check' | 'uncheck',
  target: string,        // CSS selector, XPath, or role-based
  value?: string,        // Input value or expected result
  options?: {
    timeout?: number,
    force?: boolean,
    expect?: 'visible' | 'hidden' | 'enabled' | 'disabled'
  }
}

Locator Strategy

Priority order for element selection: 1. data-testid attribute (most reliable) 2. role + accessible name (a11y-first) 3. id attribute 4. CSS class + tag combinations 5. XPath (last resort)

Template Variables

| Variable | Description | |----------|-------------| | {{pageName}} | Page object name (PascalCase) | | {{baseUrl}} | Target URL | | {{steps}} | Array of parsed test steps | | {{locators}} | Map of element name → selector | | {{testData}} | Data-driven test data | | {{framework}} | Target framework | | {{imports}} | Required imports |

Error Handling

Command Mode

# Generate from natural language
playwright-test-generator generate \
  --input "Click login button, enter username and password, click submit" \
  --framework pytest \
  --type pom \
  --output ./tests/
Analyze URL and generate POM
playwright-test-generator analyze \
  --url https://example.com/login \
  --framework pytest \
  --output ./pages/
Analyze HTML and generate locators
playwright-test-generator extract-locators \
  --html "$(cat form.html)" \
  --output ./locators.json

Interactive Mode

playwright-test-generator interactive

Follow the guided wizard to generate tests step by step.

API Mode (from other skills/agents)

import { PlaywrightTestGenerator } from './src/generator.js';
const gen = new PlaywrightTestGenerator();
const result = await gen.generate({
  input: 'Click the search box, type "playwright", press Enter',
  framework: 'pytest-playwright',
  codeType: 'standard',
  pageName: 'search_page'
});