BDD | Cucumber | Gherkin

As of October 16, 2023, Playwright doesn’t natively support BDD-style test definitions. The cucumber-js (opens in a new tab) test runner can be used to run a BDD-style tests, while using Playwright as the underlying browser automation driver.

cucumber-js is a mature and popular test runner, however it is different from the native Playwright test runner - those are not compatible. Refer to the resources below to explore currently available support for BDD-style tests in Playwright.

• Open Feature Request to support BDD-style syntax in Playwright (opens in a new tab)

The ongoing discussion on the above feature request is a good place to start to understand the current state of BDD-style tests in Playwright.

• playwright-bdd (opens in a new tab) - convert BDD scenarios into Playwright tests and run them with Playwright runner as usual.

The tool converts BDD scenarios via an intermediate step that produces Playwright-runner compatible code and supports Playwright fixtures (opens in a new tab), class decorators, tags, test info, data tables, and more.

The tool automatically transforms the following feature file:

From
 
Feature: Playwright site
 
    Scenario: Check title
        Given I open url "https://playwright.dev"
        When I click link "Get started"
        Then I see in title "Playwright"

To

import { test } from "playwright-bdd";
 
test.describe("Playwright site", () => {
  test("Check title", async ({ Given, When, Then }) => {
    await Given('I open url "https://playwright.dev"');
    await When('I click link "Get started"');
    await Then('I see in title "Playwright"');
  });
});

More resources: playwright-bdd example repository (opens in a new tab) | Playwright BDD Documentation (opens in a new tab)

• gherkin-wrapper (opens in a new tab) - a lightweight wrapper that allows using BDD-style syntax using the native Playwright test runner.

const wrapper = new GherkinWrapper.forPlaywright(test)
 
// Register step functions
wrapper.given(/the Maker has started a game with the word "(.*)"/, async ({ page, value }, { match }) => {
    // Do things ...
})
wrapper.when("the Maker starts a game", () => {...})
wrapper.then("the Maker waits for a Breaker to join", () => {...})
 
// Run tests
wrapper.test('./features/example.feature')

• cucumber-playwright (opens in a new tab) - A starter repo for writing E2E tests based on Cucumber(7) with Playwright using Typescript.

• ✨ Generate BDD tests with ChatGPT and run them with Playwright (opens in a new tab) by Vitalii Potapov (opens in a new tab)

Useful tips on how you can obtain AI-generated tests for your project and execute them in a real browser with Playwright.