Skip to content

Use Gherkin do describe your playwright tests, while keeping the playwright test-runner

License

Notifications You must be signed in to change notification settings

lucaelin/playwright-gherkin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

playwright-gherkin

Generate Playwright test-runner code from gherkin files!

This project is WIP, issues, discussions and contributions are very much welcome!

Getting started

  1. Install playwright-gherkin: npm i playwright-gherkin.

  2. Create a gherkin file, preferably in a subfolder: ./my-game/my-game.feature

Feature: My Game
  Scenario: Loading the game
    When I open the game
    Then the game loads
  1. Next run npx playwright-gherkin. This will generate two files alongside your feature.

  2. Now you can implement the steps like this: ./my-game/steps.ts

import { StepRegistry } from "playwright-gherkin";

export const steps = new StepRegistry<FeatureSteps[keyof FeatureSteps]>();

steps.define("When I open the game", async ({ page }) => {
  await page.open("example.com");
});

steps.define("Then the game loads", async ({ page }) => {
  await expect(page.locate("canvas")).toBeVisible();
});
  1. Run your test using npx playwright test ./my-game/my-game.feature.js (note the .js extension)

Features

  • Auto suggests available steps:
steps.define("", ({ page }) => {});
//           ^?: 'When I open the game' | 'Then the game loads'
  • Supports and hints parameters:
steps.define(
  "Then the game {}",
  ({ page, parameters }) => {
    console.log(parameters);
    //              ^?: ['loads']
  },
);
  • Supports a shared object (world) that can be accessed across all steps within a scenario:
const defaultWorld = { someSharedState: undefined as string | undefined };

export const steps = new StepRegistry<
  FeatureSteps[keyof FeatureSteps],
  typeof defaultWorld // pass a second type argument to get ts support during step definition
>(
  "en",
  defaultWorld,
);

steps.define(
  "Then the game loads",
  ({ page, world }) => {},
  //         ^?: {someSharedState: string | undefined}
);
  • Supports tables:
/*
Feature: Tables
  Scenario: Defining tables
    When I define a table
    | Test | Foo | Bar |
    |    1 |   2 |   3 |
*/
export const steps = new StepRegistry<FeatureSteps[keyof FeatureSteps]>();

steps.define(
  "Then the game loads",
  ({ page, table }) => {
    //       ^?: DataTable<[['Test', 'Foo', 'Bar'], ['1', '2', '3']]>
    console.log(table.rowObjects); // {Test: '1', Foo: '2', Bar: '3'}
  },
);

Areas of WIP

  • RegEx steps
  • stepRegistry.import(other: StepRegistry) / StepRegistry.from(other: StepRegistry)
  • on-the-fly conversion
  • auto prettier / lint-fix
  • validate code/gherkin is in sync
  • code quality improvements / refactoring
  • fixtures

About

Use Gherkin do describe your playwright tests, while keeping the playwright test-runner

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published