DEV Community

Terence Pan
Terence Pan

Posted on • Updated on

Playwright with Cucumber/JUnit 5 - Page Object

Page Object

In Page Object Model for UI testing, you organize pages into their own classes.

Page field here represents the browser session we will use to grab page elements with. We also will pass page from the step to the page object when we initialize it through the Constructor.

The page elements are defined as fields and the constructor initializes those fields.
The below block represents the input for the first name field. Note there is not an id, but we can use the name attribute to find it.

<input type="text" name="first_name" class="first_name input mb1" placeholder="First Name">
Enter fullscreen mode Exit fullscreen mode

In the constructor we can use the name attribute of the element to locate it. If id is not available, then try to use other easy attributes to locate, otherwise you may have to resort to xpath.

this.firstName = page.locator("[name='first_name']");
Enter fullscreen mode Exit fullscreen mode

We also have methods that the step definitions can call to perform actions through Playwright. The method below will navigate to the page the page object represents.

public void navigate(){
        page.navigate("https://phptravels.com/demo");
    }
Enter fullscreen mode Exit fullscreen mode


java
The fillRegistrationInfo method will fill in the first name, last name, business name and email fields.

public void fillRegistrationInfo(String firstName, String lastName, String businessName, String email){
        this.firstName.fill(firstName);
        this.lastName.fill(lastName);
        this.businessName.fill(businessName);
        this.email.fill(email);
    }
Enter fullscreen mode Exit fullscreen mode

Complete DemoPage.java class

package io.tpan.pages;

import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import io.tpan.steps.TestContext;

public class DemoPage {

    private final Page page;

    private final Locator firstName;

    private final Locator lastName;

    private final Locator businessName;

    private final Locator email;

    private final Locator submit;

    private final Locator result;

    private final Locator numberOne;

    private final Locator numberTwo;

    public DemoPage(Page page) {
        this.page = page;
        this.firstName = page.locator("[name='first_name']");
        this.lastName = page.locator("[name='last_name']");
        this.businessName = page.locator("[name='business_name']");
        this.email = page.locator("[name='email']");
        this.submit = page.locator("id=demo");
        this.result = page.locator("id=number");
        this.numberOne = page.locator("id=numb1");
        this.numberTwo = page.locator("id=numb2");
    }

    public void navigate(){
        page.navigate("https://phptravels.com/demo");
    }

    public void fillRegistrationInfo(String firstName, String lastName, String businessName, String email){
        this.firstName.fill(firstName);
        this.lastName.fill(lastName);
        this.businessName.fill(businessName);
        this.email.fill(email);
    }

    public void fillResult(){
        int num1 = Integer.parseInt(numberOne.textContent());
        int num2 = Integer.parseInt(numberTwo.textContent());
        result.fill(String.valueOf(num1 + num2));
    }

    public void fillWrongResult(){
        int num1 = Integer.parseInt(numberOne.textContent());
        int num2 = Integer.parseInt(numberTwo.textContent());
        result.fill(String.valueOf(num1 + num2 + 1));
    }


    public String clickSubmit(){
        final String[] message = new String[1];
        page.onDialog(dialog -> {
            message[0] = dialog.message();
            dialog.accept();
        });
        submit.click();
        return message[0];
    }
}

Enter fullscreen mode Exit fullscreen mode

As always code is on available on Github

Latest comments (0)