How to set up Playwright in JavaScript with the Cucumber library BDD process or methodology

Introduction

In this blog, we are going to see how to set up the Cucumber BDD framework using Playwright in JavaScript. Playwright is an open-source Node.js library developed by Microsoft that allows you to automate browser testing across different web browsers, including Chromium, Firefox, and WebKit. It provides a high-level API for interacting with web pages, performing actions such as clicking buttons, filling out forms, and navigating through pages. Playwright aims to provide a consistent and reliable automation experience across multiple browsers, making it easier to write and maintain browser tests.

Prerequisites

To get started with the Cucumber BDD framework using Playwright in JavaScript, you’ll need a few prerequisites. Here’s a list of the things you’ll need:

• Node.js: Make sure you have Node.js installed on your machine. You can download it from the official Node.js website (https://nodejs.org/en/download) and follow the installation instructions for your operating system.
  To check whether the node.js is already installed in your system, open command prompt, type node -v.
• Text Editor (VS Code): Visual Studio Code (often abbreviated as VS Code) is a popular source-code editor and integrated development environment (IDE) developed by Microsoft. It is available as a free and open-source software, built on the Electron framework, and supports various programming languages and frameworks. The IDE has gained popularity among developers due to its performance, extensibility, and ease of use, making it a preferred choice for many programming tasks, ranging from small scripts to large-scale applications.

Steps to Install Playwright Cucumber BDD Framework

To Set up Playwright with the Cucumber BDD framework in JavaScript, you’ll need to follow a few steps:

Step 1: Create a New Project

Create a new Project, create a new directory where you want to set up the playwright

Step 2: Open the Newly Created Folder in VS Code

Open the newly created folder in the VS Code.

• From the Command Prompt, open VS Code.
• From VS Code, go to File → Open Folder → Select the project directory → Open the folder.

Step 3: Open the Terminal in VS Code

Open the terminal in VS Code and Give commands to install all the dependency packages to start with the implementation.

Open the terminal by pressing Control + J or by clicking on the Terminal menu and selecting New Terminal.

Step 4: Initialize Node.js Project

Run the following command in the terminal to generate the package.json file:

npm init -y

The npm init -y command initializes a new Node.js project with default settings.

Here’s what each part of the command means:

• “npm”: This refers to the Node Package Manager, which is a command-line tool used for managing Node.js packages and dependencies.
• “init”: It is the command to initialize a new Node.js project.
• “-y”: This flag stands for “yes” and automatically answers “yes” to all prompts, accepting the default values for project configuration.When you run “npm init -y” in your project’s directory, it creates a new package.json file that serves as a manifest for your project. The package.json file includes information about the project, such as its name, version, entry point, dependencies, and more.

  

Step 5: Install Playwright

Run the following command to install Playwright:

npm init playwright@latest

The command “npm init playwright@latest” is used to initialize a new Playwright project using the latest version available. Playwright is a Node.js library developed by Microsoft that allows you to automate browser interactions for web testing or web scraping purposes.

When you run “npm init playwright@latest” in your project’s directory, it performs the following steps:

1. Checks if Node.js is installed on your system.
2. Creates a new directory for your Playwright project.
3. Initializes a new Node.js project within that directory.
4. Installs the latest version of Playwright as a dependency for your project.
5. Sets up the necessary configuration files and scripts for Playwright.

Set up the configuration file to install playwright:

• Select Java script by pressing down arrow. By default, Type Script will be selected. Press Enter after selection.
  
• Press Enter to put your tests in the tests folder.
  
• Press ‘Y’ for GitHub basic setup
  
• Press ‘Y’ for installing browser binaries to your system.
  
• It will download all the browser binaries to your system. It will show a success message after successfully installation is done. And suggest several commands, and a few files will be created on the system.
  
• After running this command (npm init playwright@latest), you will have a basic Playwright project structure in place, with the required dependencies installed. You can start writing your Playwright scripts within your project directory to automate browser interactions.
  

Step 6: Install Playwright

Run the following command to install Playwright as a dependency:

npm install playwright

The command “npm install playwright” is used to install the Playwright package as a dependency in your Node.js project. Playwright is a Node.js library developed by Microsoft that enables browser automation for web testing or web scraping purposes.

When you run “npm install playwright” in your project’s directory, it performs the following steps:

1. Creates or updates the package-lock.json file, which keeps track of the specific versions of dependencies installed in your project.
2. Downloads and installs the Playwright package from the npm registry.
3. Updates the package.json file with the Playwright package as a dependency, along with its version number

After running this command, you will have the Playwright package installed and ready to use in your Node.js project. You can import Playwright modules in your code and start writing automation scripts using Playwright’s APIs.

Step 7: Install Cucumber Package

Run the following command to install Cucumber:

npm install cucumber -D

The -D flag saves the package as a development dependency.

The command “npm install cucumber -D” is used to install the Cucumber package as a development dependency in your Node.js project. Cucumber is a testing framework that supports behavior-driven development (BDD) and allows you to write executable specifications in a human-readable format.

When you run “npm install cucumber -D” in your project’s directory, it performs the following steps:

1. Creates or updates the package-lock.json file, which keeps track of the specific versions of dependencies installed in your project.
2. Downloads and installs the Cucumber package from the npm registry.
3. Updates the package.json file with the Cucumber package as a development dependency, along with its version number.

The “-D” flag stands for “–save-dev” and tells npm to save the package as a development dependency. Development dependencies are packages that are only required during development and testing, not in production.

Step 8: Install @cucumber/cucumber

Run the following command to install the @cucumber/cucumber package:

npm i @cucumber/cucumber

The command “npm i @cucumber/cucumber” is used to install the @cucumber/cucumber package, which is the latest version of the Cucumber testing framework. This package provides the core functionality for running Cucumber tests.

When you run “npm i @cucumber/cucumber” in your project’s directory, it performs the following steps:

1. Creates or updates the package-lock.json file, which keeps track of the specific versions of dependencies installed in your project.
2. Downloads and installs the @cucumber/cucumber package from the npm registry.
3. Updates the package.json file with the @cucumber/cucumber package as a dependency, along with its version number.

After running this command, you will have the @cucumber/cucumber package installed and ready to use in your Node.js project. You can start writing feature files and step definitions to define and execute your Cucumber scenarios using this package

Step 9: Create the Directory Structure

Create a directory structure Create the following directory structure inside your project directory

To create a folder, Click on + icon beside the project name

To create a file under the folder, click on folder name then click on + icon of fil which is beside the project name

• features – For feature files
• stepDefinitions – For step definition files
• Hooks – For hook files
• pages – For page object files

Step 10: Create Cucumber Feature Files

Inside the features directory, create a new file with a .feature extension, for example, example.feature. Add your Cucumber feature scenarios to this file.

Step 11: Write Step Definitions

Write step definitions Inside the stepDefinitions directory, create a new file named exampleSteps.js. This file will contain your step definitions. You can define step definitions that interact with Playwright’s API to automate browser actions — automation that becomes even more powerful when integrated with AI-powered personalization in B2B user experiences for tailored customer journeys.

Step 12: Create Cucumber Hooks

Inside the Hooks directory, create a new file named hooks.js. This file will contain Cucumber hooks that run before and after each scenario.

Step 13: Create a Page File

Inside the pages directory, create a file named examplePage.js. This file contains page object methods to perform actions for the testing.

Step 14: Create a cucumber.json File

Create a cucumber.json file in the root of your project directory. This file will store configuration settings for your Cucumber execution and reporting.

SnippetInterface:

The snippetInterface option determines the style of code snippets that are generated for undefined steps.

When snippetInterface is set to “async-await” in the cucumber.json file, it means that the generated code snippets for undefined steps will use the async/await syntax, which is a modern JavaScript feature for handling asynchronous operations.

By using the async/await syntax in the generated code snippets, you can write your step definitions using asynchronous functions and handle promises more easily. This can make your step definitions more concise and readable, especially when dealing with asynchronous operations like making API calls or interacting with web elements asynchronously.

Paths:In the cucumber.json file, you can use the paths property to specify the file or directory paths where your feature files are located. This property allows you to define the scope of the Cucumber execution and determine which feature files should be considered during the test execution.

The paths property can accept either a single path or an array of paths. You can use file globs pattern (‘**/*.js’) to specify patterns for matching multiple files.

require:

In the cucumber.json file, you can use the require property to specify the files or modules that should be loaded before executing your Cucumber tests. The require property allows you to define custom code files or modules that contain step definitions or other configuration logic.

The require property can accept either a single file path or an array of file paths or module names.

In the example below, three files are specified in the require property:

“stepDefinitions.js”: This file contains the step definitions for your Cucumber scenarios.

“Pages/**/*.js”: This glob pattern (**/*.js) matches all JavaScript files recursively inside a support directory. These files often contain helper functions, utility modules, or custom World objects.

“hooks.js”: This file contains Cucumber hooks, which are functions that run at specific points during the test execution, such as before or after each scenario.

By configuring the require property in the cucumber.json file, you can load the necessary code files or modules before running your Cucumber tests. This allows you to organize your step definitions, support code, and hooks separately and specify them for execution through the require property.

Step 15: Add Scripts in package.json

In the package.json file, add a “scripts” property to define the commands for running tests.

Step 16: Redirection from Feature File to Step File

• create a folder: .vscode under the project folder (don’t create in any other subfolder)
• create a file: settings.json under .vscode
  In .vscode, reopen the folder where .vscode insides to make settings.json take effect.{

  “cucumberautocomplete.steps”: [

  “Steps/*js”

  ],

  “cucumberautocomplete.syncfeatures”: “./Features/*.feature”,

  “cucumberautocomplete.strictGherkinCompletion”: true

  }

  

Step 17: Run the Tests

To run your tests, use the following command:

npm run test

This will execute your Cucumber tests using Playwright for browser automation.

That’s it! You should now have Playwright set up with the Cucumber BDD framework in your JavaScript project.

Install playwright for existing Node project:

Conclusion

This step-by-step guide for setting up Playwright with the Cucumber BDD framework in JavaScript will help you automate browser testing and behavior-driven development. You can expand on this by adding more feature files, scenarios, and step definitions as needed.

At Varseno, we provide Software Development Services to improve the reliability, scalability, and stability of your business websites. Reach out to us for web app services and assistance with your development needs.