Configuration

Cucumber and Playwright provide massive amount of configuration and customization and we take advantage of this by using:

  1. Custom world: FryWorld
  2. Single configuration file: cucumber.mjs
  3. Implementing Cucumber hooks putting everything together: cucumber-hooks.ts

Configuration file cucumber.mjs

Each consumer repository contains cucumber.mjs file which is used to configure both Cucumber and Playwright (with help of the FryWorld).

You will see that it contains test suite specific configuration and consumes the Environment variables to create single configuration object.

This configuration object is consumed by the Cucumber infrastructure and used to configure Cucumber, Playwright and the FryWorld. FryWorld allows access to the configuration in the runtime.

Configuration profiles

We use Cucumber configuration profiles to provide different settings on different environments.

You can use {@link FryWorldParams.profile} to access the profile name in runtime.

The file defines default configuration profile for daily/local use.

npm run test

Profiles cionlybugs and ciexcludebugs are profiles to be used on Jenkins.

npm run test -- --profile cionlybugs

World parameters

Cucumber and more importantly FryWorld knows about the configuration from the cucumber.mjs because Cucumber will set the {@link FryWorld#parameters} property (of type {@link FryWorldParams}) to the contents of the worldParameters key in the cucumber.mjs.

createPlaywrightBrowser(options: LaunchOptions = {}): Promise<Browser> {
  // Return Browser if we already have one
  if (FryWorld.browser) { return FryWorld.browser; }

  const launchOptions = {
    ...this.parameters.browserOptions,              // <- consuming cucumber.mjs
    ...options
  };

  let browser: Browser;
  switch (this.parameters.browser) {                // <- consuming cucumber.mjs
    case firefox.name():
      browser = await firefox.launch(launchOptions);
      break;
    case webkit.name():
      browser = await this.page.goto(path);
});

Environment variables

We use environment variables to quickly configure the test suite from the command line. The cucumber.mjs expects following configuration options, all have some default in the file.

PW_BASE_URL=string

Provides base URL for the test suite eg. https://booking.fox.dev.kaizenep.com all urls will be relative to it. Default is specified on the cucumber.mjs.

PW_DEVICE=string

Specifies which Device should Playwright use to execute the test suite. See the Device emulation.

PW_DEBUG=1|0

Enables verbose debugging output from Playwright and Cucumber.

Disabled by default, see cucumber.mjs.

PW_DISABLE_SSL_VERIFICATION=1|0

Disables the verification of the SSL for self signed certificates such as ones used on the localhost environments and dev machines.

Should you get an SSL error such as unable to verify the first certificate or similar you can set this to true.

Disabled by default, see cucumber.mjs.

PW_ENABLE_TRACING=1|0

Enables recording traces of the interactions for each scenario. The trace is stored in the artifacts/traces folder of the test suite only if the particular scenario fails. You can open the Playwright trace viewer using npx playwright show-trace path/to/trace.zip.

Disabled by default, see cucumber.mjs.

PW_ENABLE_INTERACTION_HIGHLIGHTING=1|0

Enables highlighting of the interaction with the web page. It highlights clicks by showing a red circle at the point where Playwright clicks on the elements.

PW_HEADED=1|0

When provided Playwright will open a browser window so that you can see the interaction, otherwise tests are run in headless mode.

Disabled by default, see cucumber.mjs.

PW_RECORD_VIDEO=1|0

Enables recording videos of the interactions for each scenario.

Disabled by default, see cucumber.mjs.

PW_SLOWMO=number

Defines how much slow motion (delay after each Playwright operation) should be used. This is very useful together with PW_HEADED to inspect what is happening.

Disabled by default, see cucumber.mjs.

PW_REGENERATE_REFERENCE_SCREENSHOTS=1|0

Enables regenerating the reference screenshots for the visual comparison.

Disabled by default, see cucumber.mjs.