cucumber-playwright

Kudos

This repository is based on the Cucumber-typescript-starter repo.

What's inside

• Typescript setup for writing steps with eslint/typescript and prettier
• Launching of Playwright browser before running all tests
• Launching new context and page for each scenario
• Running feature with video recording option
• Report generated with last good image attached
• Utilies function to help you with writing steps
• VScode configuration to debug a single feature or an only scenario (run when located on the feature file)

Usage

1. Add your Cucumbers features (playwright.feature.ts) in the feature folder
2. Create steps (yourFeature.steps.ts) for your features in src/steps
3. Ad utility methods in src/utils
4. If needed, modify the CustomWorld class and before-after hooks in src/support

To run your tests

• npm run test or npx cucumber-js runs all tests
• npm run test <feature name> or npx cucumber-js --name <feature name> run the single feature
• npx cucumber-js --tags <your tags names> runs all test with the listed tags

Browser selection

By default we will use chromium. You can define an envrionment variable called BROWSER and set the name of the browser. Available options: chromium, firefox, webkit

On Linux and Mac you can write:

BROWSER=firefox npm run test or BROWSER=firefox npx cucumber-js runs all tests using Firefox

One Windows you need to write

set BROWSER=firefox
npm run test

Debugging Features

From CLI

• npm run debug - headful mode with APIs enables both APIs and debug options
• npm run api - headless mode with debug apis
• npm run video - headless mode vith video

In Visual Studio Code

• Open the feature
• Select the debug options in the VSCode debugger
• Set breakpoints in the code

To stop the feature, you can add the Then debug step inside your feature. It will stop your debugger.

To choose a reporter

The last reporter/formatter found on the cucumber-js command-line wins:

--format summary --format @cucumber/pretty-formatter --format cucumber-console-formatter

In cucumber.js file, modify the options.

To ignore a scenario

• tag the scenario with @ignore

To check for typescript, linting and gherkin errors

• run the command npm run build.

To view the steps usage

• run the command npm run steps-usage.

To view the html report of the last run

• run the command npm run report.