Build Playwright Suites Straight From Gherkin

ai-test-generator-4playwright-js (previously published on npm as playwright-testgen-from-gherkin-js) turns feature files into ready-to-run Playwright projects without hand-writing selectors or spec boilerplate. I built it to shrink the gap between product scenarios captured in Gherkin and trustworthy UI regression coverage.

The toolkit parses each scenario, infers selectors and actions, and emits both Page Object classes and Playwright specs. Under the hood the CLI still ships to npm with the original package name, while the GitHub repository has already moved to amiya-pattnaik/ai-test-generator-4playwright-js.

Why I Created It

  • Keep up with product speed: Teams already capture flows in Gherkin, so I wanted a generator that respects that source of truth.
  • Consistent Page Objects: The tool produces deterministic locator chains and fallback selectors so tests stay readable and resilient.
  • Less glue code: Spec files share the same scenario names and comments that bubble up unsupported steps, so engineers can focus on edge cases instead of scaffolding.

Highlight Features

  • Two-step pipeline: Convert .feature files into .stepMap.json, then transform those maps into Page Objects and specs.
  • AI-assisted selector naming: Natural language processing (via the compromise library) generates meaningful method and property names such as cardNumberField or menuToggle.
  • Fallback selectors and aliases: Each step carries a primary selector plus a configurable fallback chain. Override anything through an optional selector-aliases.json.
  • Watchers for local workflows: Development scripts regenerate step maps and specs on file changes so you can iterate quickly.
  • Allure reporting baked in: Run generators, execute specs, and open the Allure dashboard with a single CLI command.
  • Both CLI and programmatic entry points: Import generateStepMaps and generateTestSpecs in custom pipelines, or stick with the testgen CLI.

Quick Start

git clone git@github.com:amiya-pattnaik/ai-test-generator-4playwright-js.git
cd ai-test-generator-4playwright-js
npm install
npm install -g tsx   # required for CLI shebang
npm link

Generate artifacts:

testgen steps --all              # build every step map
testgen tests --all              # emit Page Objects + specs
testgen run --report             # execute tests and open Allure

Prefer project-local scripts?

npm run dev:steps:all
npm run dev:tests:all
npm run testgen:run -- --report

Programmatic Usage

const { generateStepMaps, generateTestSpecs } = require('playwright-testgen-from-gherkin-js');

generateStepMaps({
  featuresPath: './features',
  outputPath: './stepMaps',
  force: true
});

generateTestSpecs({
  stepMapDir: './stepMaps',
  outputDir: './tests',
  dryRun: false
});

Even though the GitHub project has been renamed, the npm import path remains playwright-testgen-from-gherkin-js until the package transition is complete.

Sample Feature To Playwright Spec

Feature Input

Feature: Login

  Scenario: My successful login
    Given I am on the "login" page
    When I fill "userName" with "adminuser"
    And I fill "password" with "adminpassword"
    And I click on "login"
    Then I should see "welcomeBanner"

Generated Step Map (excerpt)

{
  "scenario": "My successful login",
  "steps": [
    { "action": "open", "selectorName": "open", "note": "login" },
    { "action": "setValue", "selectorName": "userNameField", "note": "adminuser" },
    { "action": "setValue", "selectorName": "passwordField", "note": "adminpassword" },
    { "action": "click", "selectorName": "loginButton" },
    { "action": "assertVisible", "selectorName": "welcomeBanner" }
  ]
}

Generated Spec Snippet

test('mySuccessfulLogin', async ({ page }) => {
  const pageObj = new LoginPage(page);
  await pageObj.open('login');
  await pageObj.userNameField.fill('adminuser');
  await pageObj.passwordField.fill('adminpassword');
  await pageObj.loginButton.click();
  await expect(pageObj.welcomeBanner).toBeVisible();
});

What’s Next

I am currently collecting feedback on additional actions, improved selector heuristics, and the upcoming npm rebrand to align with the ai-test-generator-4playwright-js naming. If you try the generator, let me know which scenarios still need manual tweaks so we can keep pushing more flows into the automated happy path.