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
Examples:
| UserName | Password | ProductName |
| standard_user | secret_sauce | Sauce Labs Backpack |
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 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 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.