Playwright - Cucumber Framework

Why Playwright ?

Playwright is one of the most powerful test automation tools which is gaining popularity now a days due to its simplicity and various built-in features which help overcome serval limitations of other existing test frameworks.

Playwright Advantage :

• Less Flaky tests.

• Auto wait Mechanism.

• Built-in assertions.

• Support for high frames and shadow DOM.

• Built-in and custom reports.

• CI/CD and Docker support.

• Recording of tests, debug and explore selectors.

• Parallel testing.

• Test retry, logs, Screenshots, videos.

Steps to set up Playwright BDD Framework using JavaScript:

Following are the steps to create a playwright BDD framework for DS-Algo project in VS Code.

Pre-Requisites:

•  Install NodeJS

• Install Visual Studio Code (VS Code).

Step 1:- Create a New Project Folder on your drive

Step 2:- Open this folder in VS code either via dragging or opening from VS code menu

Step 3:- Initialize a Node.js Project

In new VS code terminal, initialize a new Node.js project by running following cmd:

Cmd:

npm init -y

This cmd will create a pacakage.json file at project level.

pacakage.json file:--

The package. json file is the heart of any Node project. It records important metadata about a project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package.

Step 4:-  Install Playwright and Cucumber

Cmd:

npm install playwright @cucumber/cucumber chai

While installing playwrigth select Java script option.

And to add BDD into our project via running following cmd .

Cmd:

npm i -D playwright-bdd

Note:- that this installation is required only for new project folders, if we are using old project folders then no need to install it again.

Step 5:- Create framework packages (features, steps, pages etc) under playwright "tests" folder

Step 6:- Create Page Objects for each page under tests/pages package.

Step 7:-   Install VS Code Extensions for cucumber syntax

Cucumber (Gherkin) Full Support: For Gherkin syntax highlighting and step definition matching.

Step 8:- Now write feature file under features package

@HomePage
  Feature: Home page verification feature
    Background: Navigate to Home page
        Given user navigate to dsportalapp home page
   @NoSignInWaringByDefault 
   Scenario: verify Sign-In warning message is not present by default    
    When User is not signed in already
    Then User should not get warning message by default

Step 9:- Now generate Step-Definitions for feature file

Note:-- To auto generate default "StepDef" with empty methods, run following cmd. This cmd will generate step definition methods for your feature files.

Cmd:

npx bddgen

Step 10:- In the src/steps directory, create a "Home-StepDef.js" file and copy paste the auto generated step def methods in it. Update those all auto generated step definition methods with appropriate code.

And also add this import statement in StepDef files.

import { createBdd } from 'playwright-bdd';

For Ex:- To invoke application page in 'Given' method

Given('user navigate to dsportalapp home page', async ({page}) => {

await page.goto('https://dsportalapp.herokuapp.com/home');

});

Step 11: Add environment file

Playwright provide a ".env" file to handle different test environments like ".env.qa" and ".env.prod" etc.

this file stores everything as key-value pair similar to config.properties files in java.

We can add all URLs for different env , username, password etc in this file.

Install "dotenv" package:

to add .env file we need to Install "dotenv" package in our project.

         npm install dotenv @playwright/test

"dotenv" package to load environment variables from a .env file into "process.env",which we can use in our files.

Step 12:- Configure Playwright

NOW UPDATE "playwright.config.js" file for BDD settings. Add path of feature file and step definition as below

import { defineBddConfig } from 'playwright-bdd';

const testDir = defineBddConfig({

paths: ['Home.feature'],

require: ['Home-StepDef.js']

})

Remove /.tests folder path from default "testDir" as we are now not running file from tests folder. Instead we r running cucumber files as per new defineBddConfig.

Note:-In this file we can  also manage the browser context and set up various configurations under "defineConfig" based on our project requirements, for example:

fullyParallel: true,
screenshot:'only-on-failure',
video: 'retain-on-failure'
reporter: 'html',

Step 13:- Run playwright test on specified test environment.

In the terminal, Now first we need to setup test environment as per .env file and then execute test in that specified environment running following cmds. In this case I am setting up "qa" env first and then running test in headed mode.

$env:ENV="qa"

npx bddgen

npx playwright test --headed

Step 14:-To open playwright report.

npx playwright show report

Important Playwright cmds:--

Installation:-

To install latest version of playwright.

npm init playwright@latest

to check playwright version.

npm playwright -v

Execution:-

To runs end-to-end tests in headless mode.

npx playwright test

To runs end-to-end tests in UI mode.

npx playwright test --headed

To runs the end-to-end tests in specific browser/browser engine.

npx playwright test --project chromium

To runs the tests in a specific file.

npx playwright test example.spec.js

To runs tests in debug mode.

npx playwright test --debug

 To open playwright report.

npx playwright show report

To  run with 3 workers in parallel.

npx playwright test --workers 3

Hope You find this set up useful. HAPPY LEARNING!!