Playwright with Cucumber/JUnit 5 - Page Object
Tags: java, playwright, testing, cucumber
Published: 2022-10-03 00:14:08

### Page Object <a name="page"></a>


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.
```html
<input type="text" name="first_name" class="first_name input mb1" placeholder="First Name">
```
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.
```java
this.firstName = page.locator("[name='first_name']");
```
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.

```java
public void navigate(){
        page.navigate("https://phptravels.com/demo");
    }
```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);
    }
```

Complete **DemoPage.java** class
```java
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];
    }
}

```

As always code is on available on [Github](https://github.com/terencenmnpan/TestAutomation/tree/main/PlaywrightCucumberExample)