Blog Posts

Automation using Playwright Library with Cucumber JS.

Blog: Indium Software - Big Data



This tutorial will walk you through using the Playwright library with Cucumber JS. Playwright supports TypeScript out of the box. We conducted effective end-to-end tests with the best possible narration by integrating the Playwright library with Cucumber- a test automation tool.

Extensions required

The VS code requires this extension to recognize the .feature files and provide snippet support. Some of the primary support functions are auto-parsing of feature steps, auto-completion, syntax highlight, and type validations.


This extension purely supports running npm scripts as defined in the package.json file. It also is equipped to validate installed modules against dependencies as defined in the package.json file

It would be a great piece to read on 10 Open Source Automation Tools For Your Automation Needs

Project setup:

Precondition: Node JS and Visual studio code should be installed.

Now your project structure looks similar to the below picture:

Modules/Libraries required:

As our project base is ready, modules related to Playwright and Cucumber have to be added to the package.json file. The required modules can be added under the file’s dependencies section by running npm commands to install the respective modules.

· Run the command ‘npm i playwright’ in the terminal – This command will install the playwright library and browser dependencies required for testing.

· Run the command ‘npm i @playwright/test’ in the terminal – This command will install the modules required for validations with built-in automatic waits.

· Run the command ‘@cucumber/cucumber’ – This command will install the Cucumber, a tool for running automated tests written in plain language.

· Run the command ‘npm i typescript’ – This command will install the typescript.

· Run the command ‘npm i ts-node’ – This command will install the typescript dependencies to support with node.

After installing all the required packages, your package.json looks similar to the below picture:


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.

A feature can have ‘n’ number of scenarios, and each can have an ‘n’ number of steps.

A step has to start with the Gherkin keyword ‘Given,’ ‘When,’ ‘And,’ or ‘Then.’

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

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

· Create a sample feature under the features folder with the name ‘demo_blaze.feature’ (feature named after the demo site will be using).

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

World (Hooks):

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 an ‘After’ function and close the chromium browser using the browser reference created.

Export the page and browser variables as given in the above image to use for further actions.


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.

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

The following image shows that locators and logic are scripted below each step.

Script execution:

It is time to execute the completed scripts as we are done with the logic implementation. This time we won’t see an undefined warning from Cucumber as the implementation is done. To execute the scripts, let’s repeat the steps to get undefined snippets:

Once the tests are completed, you will see the scenario/step count details as in the image below.


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

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

The following steps will walk you through setting up the Cucumber report:

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

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

‘npx cucumber-js -p test_runner –tags  @demo & node ./htmlReportGenerator.js’.

Also, the report file .html will be auto-generated in the Reports folder, which can be shared with others.

Attach screenshot for failure:

Attaching the screenshots for failed steps helps us identify what went wrong with the application under test.  To achieve it, we can make use of the ‘world.ts’ file to define the same as post-condition.

Add the ‘Scenario’ as a hooks parameter and define the condition to attach a screenshot of the scenario fails.

Now let’s test whether the reporter adds the screenshot in case of failure.

Feature file navigation support:

VS code does not provide the default support to navigate from feature to step. However, it can be achieved by adding additional Cucumber options such as sync features and auto-complete in the .settings.json file.

Now, navigation from feature to step can be done by right-clicking step->Go To Definition or using the F12 key.


Playwright is now considered a sensational tool for modern web apps. Integration of Cucumber with Playwright attracts a broader audience already using Cucumber with their deprecated tools such as Protractor/Spectron.

Below are some advantages of using Cucumber with Playwright:

Modernizing QA with life-cycle automation and AI practices to address scale, speed, security and innovation in the cloud is a prerequisite for Digital Transformation.

The post Automation using Playwright Library with Cucumber JS. appeared first on Indium Software.

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples