Playwright Test Generator

AI-driven Playwright test code generator for QA engineers. Generates Page Object Models, standard test scripts, and data-driven tests from natural language descriptions, HTML analysis, or page URLs. Supports pytest-playwright, Jest Playwright, and native Playwright. Activate when the user asks to "generate Playwright tests", "create test script", "build POM from page", or mentions Playwright test generation.

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:

text

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:

text

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)

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

bash

# 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

text

playwright-test-generator interactive

Follow the guided wizard to generate tests step by step.

API Mode (from other skills/agents)

javascript

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

text

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

javascript

{
  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

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