How we can integrate cucumber.js with playwright

Problem statement

This blog cover how we can integrate cucumber in playwright with java

Pre-Condition :

Eclipse IDE is installed Download from Here
Java is installed Download from Here
Maven is already installed in Eclipse Follow the steps attached here

Scenarios covered under this blog with Cucumber

Launch application
Verify the title of the application
Login into the site
Verify the product
Click on Hamburger and Logout from the application

High-level steps to implement the above scenario using Playwright With Java

Create Maven Project
Create packages for the pages class
Create packages for testrunner, features, and stepdefinitions
Create a feature file under ->features
Create page class for HomePage and LoginPage
Create methods under the LoginPage class
Create methods under the HomePage class
Create testclass under ->stepdefinitions
Create testrunner class under ->testrunner
Run the test cases

Explanation of steps

Add Playwright and other dependencies in POM.XML

Add the below dependency in POM.XML

<dependencies>
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.17.1</version>
</dependency>
</dependencies>

<dependency>
<groupId>io.cucumber</groupId>
<artifactId>cucumber-java</artifactId>
<version>6.9.1</version>
</dependency>

<dependency>
<groupId>io.cucumber</groupId>
<artifactId>cucumber-junit</artifactId>
<version>6.9.1</version>
<scope>compile</scope>
</dependency>

Step 1: Create Maven Project

We can see below project has been created with the Name “NewPlayWrightProject”

Step 2: Create packages for the pages class

Create package under src/main/java -> with name “com.saucedemo.pages”

Step 3: Create packages for testrunner, features, and stepdefinitions

Create three packages “testrunner”, “features” and “stepdefinitions” under -> src/test/java

Step 4: Create a feature file

Under features package create .feature file with name “LoginAndHomeTest.feature”

Feature: Login

Scenario Outline: Login to the SwagLabs Application with the Correct credentials
Given User launched SwagLabs application
When User verify the Page title
When User logged in the app using username “<UserName>” and password “<Password>”
Then User verify the product name “<ProductName>”
Then User logout from the application

Step 5: Create page class for HomePage and LoginPage

Step 6: Create methods under the LoginPage class

Under LoginPage.java create methods to login /verify product and logout from the site

Create methods under package com.saucedemo.pages

verifyTitle();
loginIntoApplication(String email, String pass);
logoutFromApplication();

Other methods :

enterUserName(String email),enterPassword(String pass),clickLoginButton(),clickOnHamburger() and clickOnLogout()

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.saucedemo.pages.HomePage;
import com.saucedemo.pages.LoginPage;

import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;

public class LoginCucumberTest {

LoginPage login;
HomePage home;
Playwright playwright = Playwright.create();
BrowserType firefox = playwright.firefox();
Browser browser = firefox.launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();

@Given(“User launched SwagLabs application”)
public void setUp() {
page.navigate(“https://www.saucedemo.com/“);
home = new HomePage(page);
login = new LoginPage(page);
}
@When(“User verify the Page title”)
public void verifyPageTitle() {
String title = login.verifyTitle();
Assert.assertEquals(title, “Swag Labs”);

}
//Login into the application
@When(“User logged in the app using username {string} and password {string}”)
public void loginIntoTheApplication(String username,String password ) {
login.loginIntoApplication(username, password);
}
//Verify product name after login
@Then(“User verify the product name {string}”)
public void verifyProductsName(String productname) {
String productName = home.getProductName();
Assert.assertEquals(productName, productname);

}
//Logout from application
@Then(“User logout from the application”)
public void logoutFromApplication() {
login.logoutApplication();}
}

Step 7: Create methods for the HomePage class

Under HomePage.java create the below methods

productName(); //To verify the product name in the site

package com.saucedemo.pages;

import com.microsoft.playwright.Page;

public class HomePage {

Page page;

// Locator — — — –

String productName_1 =”id=item_4_title_link”;

//initialize Page using constructor

public HomePage(Page page) {

this.page =page;}

//Method

public String productName() {

String productName = page.textContent(productName_1);

return productName;}}

Step 8: Create a Test class

Under the stepdefinitions -> Create “LoginCucumberTest.java” class to call all the methods that are created under LoginPage.java and HomePage.java

package stepdefinitions;
import org.testng.Assert;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

import io.cucumber.java.en.Given;
import io.cucumber.java.en.Then;
import io.cucumber.java.en.When;

public class LoginCucumberTest {

}
//Logout from application
@Then(“User logout from the application”)
public void logoutFromApplication() {
login.logoutApplication();}
}

Step 9: Create testrunner class to run the test cases

package com.testrunner;

import org.junit.runner.RunWith;

import io.cucumber.junit.Cucumber;
import io.cucumber.junit.CucumberOptions;

@RunWith(Cucumber.class)
@CucumberOptions(
features = “src/test/java/features/”,
glue = {“stepdefinitions”},
plugin = {“pretty”})
public class SauceDemoTestRunner {

}

Step 10: Run the test case

Two ways of running the test case

Method 1

Open testrunner class right click and Runs as -> Junit Test

Report after running the test cases

Method 2

We can run by right-clicking on the .feature file

Conclusion

Cucumber and Playwright are great frameworks. I hope this article will be of some use to you. thank you.

Post Views: 17

How we can Integrate cucumberjs in Playwright