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:

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)#

GenreDescriptionFrameworkpomPage Object Modelpytest-playwright / Jest PlaywrightstandardStandard test scriptpytest-playwright / native Playwrightdata-drivenParameterized data testspytest-playwright / Jest PlaywrightapiAPI test helpersAny

Framework Support#

FrameworkLanguageCode Typepytest-playwrightPythonpom, standard, data-drivenjest-playwrightJavaScript/TypeScriptpom, standard, data-drivennative-playwrightJavaScript/TypeScriptstandard, 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#

TierFeaturesRateFree≤10 generations/day, standard scripts only0 creditsProUnlimited, POM + data-driven, priority1 credit/testEnterpriseCustom frameworks, team features, SLAContact

---

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#

VariableDescription{{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