Development

If you want to work on the improvement to this repository (Steps, etc…) you may need to publish the NPM package and upgrade the consumer repositories.

Package has scripts to help with publishing:

npm version major|minor|patch
npm publish

This publishes the package on the Github NPM repo and the ‘consumer packages’ can upgrade.

Implementing steps

FryWorld

At the core of customization and re-use is a custom Cucumber world - FryWorld - which is configured to be used by the Cucumber in the cucumber-hooks.ts file in each test suite repository.

You can read more about the custom world and how it’s used in the Cucumber-js documentation.

FryWorld sets up Playwright infrastructure and takes care of launching the Browser and creating the Browser Context and most importantly the Page.

These Playwright objects are then provided to you in the Steps by the this function argument which is of type {@link FryWorld} and then this.browser|context|page properties which are documented in {@link FryWorldParams}.

import { FryWorld } from '@fry-it/e2e.support';
import { Given } from '@cucumber/cucumber';

Given(
  '{actor} goes to the {string} page',
  async function (this: FryWorld, actor: string, path: string) {
    const page = await this.getOrCreatePageForKey(new ContextKey(actor));
    await page.goto(path);
  }
);

Playwright BrowserContext and Page

FryWorld provides (together with the src/cucumber-hooks.ts) all required initialization of the Playwright environment and creation of the Playwright Browser.

FryWorld does not provide/create the default browser context or page, this is due to multi browser support. FryWorld provides FryWorld#getOrCreatePageForKey() method which Step authors use to get an existing Playwright Page & Browser context or create new one.

The method expects ContextKey parameter, looks for the context with the matching key or creates new one. The Playwright Browser is reused.

Given(
  '{actor} goes to the {string} page',
  async function (this: FryWorld, actor: string, path: string) {
    const page = await this.getOrCreatePageForKey(new ContextKey(actor));
    await page.goto(path);
  }
);

For usage of multi browser support please refer to test/features/multiple-browser-contexts.feature.