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

Table of Contents:

 

• • Introduction
  • Prerequisite to start with cucumber BDD framework using playwright in java script
  • Steps install all the packages and dependencies for playwright cucumber BDD framework

 

• • Folder structure of Project in Page object model using BDD framework

Introduction:

In this blog we are going to see about how to set up cucumber BDD framework using playwright in Java script. 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.

Perquisite:
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:

 

1. 1. 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) and follow the installation instructions for your operating system.

To download Node.js visit -> https://nodejs.org/en/download

To check whether the node.js is already installed in your system, open command prompt, type node -v.

 

 

2. 2. Text Editor (VS Code): Choose a text editor or an integrated development environment (IDE) for writing your JavaScript code. We choose VS Code in our project.

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 directory where you want to set up the playwright

Step 2. Open the newly created folder in the VS Code.

Way to open project folder ->

 

• • From Command prompt Open VS Code

 

From VS Code go to File menu -> Click on Open Folder -> Click on the project directory -> open the folder

 

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

To open terminal. We can open the terminal by entering keys Control + j (or) we can click on Terminal menu and select New Terminal.

 

 

Step 4. Enter the commands in the terminal to generate the package.json file for our Java script project

The command “npm init -y” is used to initialize a new Node.js project with default settings, skipping the interactive setup. 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. Type the commands to install playwright

 

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. 1. Checks if Node.js is installed on your system.

 

2. 2. Creates a new directory for your Playwright project.

 

3. 3. Initializes a new Node.js project within that directory.

 

4. 4. Installs the latest version of Playwright as a dependency for your project.

 

5. 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. Type the command 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. 1. Creates or updates the package-lock.json file, which keeps track of the specific versions of dependencies installed in your project.

 

2. 2. Downloads and installs the Playwright package from the npm registry.

 

3. 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. To install cucumber package, type the command -> npm install cucumber -D

 

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. 1. Creates or updates the package-lock.json file, which keeps track of the specific versions of dependencies installed in your project.

 

2. 2. Downloads and installs the Cucumber package from the npm registry.

 

3. 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. Type the command in the terminal-> 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. 1. Creates or updates the package-lock.json file, which keeps track of the specific versions of dependencies installed in your project.

 

2. 2. Downloads and installs the @cucumber/cucumber package from the npm registry.

 

3. 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 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

 

Step 10: Create a Cucumber feature file 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 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.

 

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

 

Step 13. Create a Page file inside the pages directory, create a new file name examplePage.js. This file contains Cucumber pages that will perform all the operations for the testing.

 

Step 14. Create cucumber.json file in the project directory in which store all the required paths to run the tests. In Cucumber, the cucumber.json file is used for configuring various settings for the 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: Give commands in package.json file in the “scripts” property.

 

Step 16: Redirection from the 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 test to run your tests, use the npm run test command to run the test.

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 installation process of packages and dependencies of playwright in java script using cucumber BDD framework will helps you while creating cucumber BDD framework in playwright. You can expand on this by adding more feature files, scenarios, and step definitions to suit your specific needs. Remember to install the necessary dependencies and adjust the code accordingly if you’re using a different programming language or test runner, use Playwright’s API to automate browser actions within your step definitions.

We at Varseno, provide Software Development Services for all business websites to improve their reliability, scalability and stability. Reach out to us for any web app services.