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:

• Asks to "generate Playwright tests", "create test script", "build POM from page"
• Wants to convert natural language steps into test code
• Needs to analyze a page/URL and generate locators + test code
• Requests data-driven or Page Object Model test generation
• Mentions Playwright test generation for pytest, Jest, or native Playwright

Input Types

1. Natural Language → Test Code

Provide test steps in plain English and get complete test scripts.

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

Provide a URL or HTML content to extract elements and generate Page Object Model.

Example:

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

3. HTML Snippet → Element Locators

Provide HTML snippets to extract robust CSS/XPath selectors.

Output Types (Code Genres)

Framework Support

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

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

Error Handling

• Invalid input → error with suggestion
• Unsupported framework → list supported frameworks
• Generation failure → partial output + error report