✍️Playwright + Cucumber

​Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Cucumber is a tool that supports Behaviour-Driven Development(BDD), If you’re new to Behaviour-Driven Development read BDD introduction first.​

How to Setup:

Run the command in the terminal:

npm init

Install playwright:

npm i playwright

This command will install the playwright library and browser dependencies required for testing.

npm i @playwright/test

This command will install the modules required for validations with built-in automatic waits.

Install cucumber:

npm install @cucumber/cucumber

This command will install the Cucumber, a tool for running automated tests written in plain language.

Install typescript:

npm i typescript

npm i ts-node

This command will install the typescript dependencies to support with node.

After installing, go to package.json and your package.json must look similar to the below picture:

Features:

Features files are the test case files written in Gherkin language, which explains the motive of the tests in plain English, making it easier for non-technical people to understand the context of the test.

Let’s create a sample feature using Gherkin keywords and derive the logic using Playwright.

• Create a Feature folder

• A feature file should always end with a .feature extension.

• Add feature and scenario details as per the below image, based on the demo site’s functionality.

World

The word ‘World’ describes the steps where we can declare and invoke the objects/variables that can be used globally. The Java/C# version of Cucumber is said to be Hooks.

Hooks are primarily used to specify pre and post-conditions globally across the features. Here, we will create two global variables, one for the browser and another for the page.

The ‘Before’ and ‘After’ functions launch the app before each scenario and then kill it. The goal is to make the scenarios independent. The Before function captures the browser and page variables from the initializer and exports.

• Create a file with the name ‘world.ts’ under the steps folder.

• Initialize the browser and page variables.

• Set the default timeout at 60 seconds (default waits till promise gets resolved).

• Create a ‘Before’ function to launch the chromium browser and assign the session id to the browser object.

• Create a browser context and assign it to the page variable.

• Navigating the URL is specified here as part of the precondition.

Add this code to world.ts

import { After, Before, setDefaultTimeout, Status } from "@cucumber/cucumber";
import { Browser, chromium, Page } from "playwright";

const baseURL =
  "https://4h12dnftgp7hp.a9ni7d1ff3m0e.ap-southeast-1.cs.amazonlightsail.com";

let page: Page;
let browser: Browser;
setDefaultTimeout(60000);

Before(async () => {
  try {
    browser = await chromium.launch({ headless: true });
    const context = await browser.newContext();
    page = await context.newPage();
    await page.goto(
      "https://4h12dnftgp7hp.a9ni7d1ff3m0e.ap-southeast-1.cs.amazonlightsail.com/"
    );
    console.log(`${await page.title()}`);
  } catch (error) {
    throw new Error(`chrome navigation throws an error ${error}`);
  }
  return page;
});

After(async function (Scenario) {
  if (Scenario.result!.status === Status.FAILED) {
    const randomNo = Math.floor(Math.random() * 100);
    this.attach(
      await page.screenshot({
        path: `./Screenshots/${Scenario.pickle.name}${randomNo}.png`,
        fullPage: true,
      }),
      "image/png"
    );
    await browser.close();
  }
  await browser.close();
});

export { page, browser, baseURL };

Steps:

Steps from the feature file have to be implemented as definitions to specify your business logic.

Gherkin’s steps from the features are initially considered undefined by Cucumber, and when running the script command defined in package.json, Cucumber generates the undefined snippets which could be used in the steps file instead of writing them, which saves time for us.

Firstly, Cucumber needs to know where to look for the steps to notify us with the snippets of unimplemented ones (In case already implemented, it will directly run the matching step).

The below procedure helps you to run the script and get the status from Cucumber.

• Create a file named cucumber.js to define the Cucumber options where the path to the feature and step are defined.

Declare the options and export them as a module with the name ‘test_runner.’

Add the code below to cucumber.js

let options = [
  '--require-module ts-node/register',
  '--require ./steps/*.step.ts',
  '--format progress',
  '--format json:Reports/cucumberReport.json',
].join(' ');

let run_features = ['./features/', options].join(' ');

module.exports = {
  test_runner: run_features,
};

Now navigate to package.json and add this to script > test:

"scripts": {
    "test": "npx cucumber-js -p test_runner"
  },

Now run the “npm test”

Notice that you will see this result:

It shows undefined because there’s no steps yet for the signup.feature.

Add this to the signup.step.ts under step folder:

import { Given, When, Then } from "@cucumber/cucumber";
import { page, baseURL } from "../steps/world";
import { expect } from "@playwright/test";

Given("user is on the signup page", async () => {
  await page.goto(baseURL + `/signup/`);
  await expect(page.locator("h2")).toContainText("Create an Account");
});

// Scenario: User signup already registered account
When("user inputs all the given field", async () => {
  const randomNo = Math.floor(Math.random() * 4); // pick random number from 0 to 4
  const addRole = page.locator("ul[role='listbox'] li");

  await page.locator("input[name='emailAddress']").type("[e-mail]");
  await page.locator("input[name='company']").type("Testing");
  await page.locator(".chakra-input__right-element").click();
  await addRole.nth(randomNo).click();

  await page.locator("button[type='submit']").click();
});

Then("user should see {string} status", async (status: string) => {
  await expect(page.locator("div[role='status'] div span")).toContainText(
    status
  );
});

Steps execution:

We are now done installing the packages and creating some scripts.

To run all tests:

npm test

To run specific test:

npm test <nameOfTheFeature>.feature

npm test signup.feature

Reporting:

Though we have results displayed in the terminal, a report implementation is required to share the results as an html file.

Cucumber provides an html reporter plugin to generate the reports based on Gherkin’s steps, which can be customized using metadata.

Install the following:

npm i cucumber-html-reporter

npm i @types/cucumber-html-reporter

To confirm your installation, go to package.json.

Add a file ‘htmlReportGenerator.js’ under the root folder to define the report options.

const reporter = require('cucumber-html-reporter');

var date = new Date();
var currentDate =
  date.getDate() +
  '_' +
  (date.getMonth() + 1) +
  '_' +
  date.getFullYear() +
  '_' +
  date.getHours() +
  '_' +
  date.getMinutes() +
  '_' +
  date.getSeconds();

var options = {
  brandTitle: 'e2e testing: Subsit',
  theme: 'bootstrap',
  jsonFile: 'Reports/cucumberReport.json',
  output: 'Reports/cucumber_report_' + currentDate + '.html',
  screenshotsDirectory: './Screenshots/',
  storeScreenshots: true,
  reportSuiteAsScenarios: true,
  launchReport: true,
  metadata: {
    'App Version': '1.1.1',
    'Test Environment': 'QA',
    Platform: 'Web',
  },
};

reporter.generate(options);

To store the json data, create a folder name Reports. Under reports folder create cucumber_report.json

Navigate to cucumber.js and add the below option to format json data’– format json:./ Reports/cucumber_report.json.’

To run the report:

node htmlReportGenerator.js

Sample image for report:

Attach screenshot for failure:

Navigate to steps> world.ts. Add this to the After function

After(async function (Scenario) {
  if (Scenario.result!.status === Status.FAILED) {
    const randomNo = Math.floor(Math.random() * 100);
    this.attach(
      await page.screenshot({
        path: `./Screenshots/${Scenario.pickle.name}${randomNo}.png`,
        fullPage: true,
      }),
      'image/png',
    );
    await browser.close();
  }
  await browser.close();
});ty