Playwright Java Tutorial: Web Automation Testing | How to handle Single and Multi select dropdowns using Playwright?

In the previous tutorial, we learnt about performing browser navigations using Playwright Java.

Playwright Java Tutorial: Web Automation Testing | How to perform browser navigation?

In this blog, we will learn how to work with single and multi select dropdown boxes in Playwright framework using Java.

What is a Single select dropdown box?

A single select dropdown box on a website allows select only a single value from the list of values available in the dropdown box. This field can normally be seen on a website where users are asked to select an option from the pre-defined values. For example, selecting Gender(Male/Female) or selecting a day from the list of days, etc.

The following is an example of the dropdown box from the The-internet demo website.

What is a Multi select dropdown box?

A Multi select dropdown box allows selecting multiple values from the list. The idea behind adding this field to the website is to allow users to select multiple options from a pre-defined set of values available in the dropdown field.

The following is an example of multi select dropdown field from the LambdaTest Selenium Playground demo website

How to handle single and multi dropdown box using Playwright with Java

Playwright Java offers selectOption() method that can be used to select the values from the dropdown box. This method can be used to select single as well as multiple options from the dropdown using its value, index or label.

Playwright also caters to the need of performing assertions making the tester’s life easy by providing the assertThat(locator).hasValues() method which can be used to check that the correct values are selected in the dropdown box.

Let’s now delve in to the demonstration and check out how to handle the dropdown box using Playwright Java.

The following test scenarios will be automated using Dropdown window of the The-internet herokuapp demo website.

Test Scenario 1

1. Navigate to the dropdown page on the The-internet herokuapp demo website
2. Locate the dropdown box and select the option — “Option 2”
3. Perform assertion to check that “Option 2” has been selected successfully

Implementation — Test Scenario 1

A new java class DropdownTests is created in which all the dropdown demo tests will be written. But before we begin to write the tests, let’s first create a setup() method which will help us in starting the Chrome browser in headless mode.

public class DropdownTests {

    private Playwright playwright;
    private Page page;


    @BeforeClass
    public void setup() {
        this.playwright = Playwright.create();
        final Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setChannel("chrome"));
        this.page = browser.newPage();
    }

    @AfterClass
   public void tearDown() {
      this.playwright.close();
}

//...

}

The Page interface of Playwright framework will also be instantiated in this method. This will help us in calling all the respective method from the Page interface in the tests without duplicating the instantiation statement of Page interface in every tests.

Similarly, the tearDown() method is created which will close the Playwright session gracefully.

The test method testSelectByOption() will implement the first test scenario.

    @Test
    public void testSelectByOption() {

        this.page.navigate("https://the-internet.herokuapp.com/dropdown");
        final Locator dropdownField = this.page.locator("#dropdown");

        dropdownField.selectOption("Option 2");

        final String dropdownFieldSelectedValue = this.page.locator("#dropdown [selected='selected']").innerText();
        assertEquals(dropdownFieldSelectedValue, "Option 2");

    }

The first statement in the test method will navigate to the dropdown page of the the-internet herokuapp website. Next, it will locate the dropdown field using the locator “#dropdown”.

The dropdown option “Option 2” will be selected using the selectOption() method. The value that needs to be selected is passed as a String parameter in the selectOption() method.

The locator ‘#dropdown [selected=’selected’]”’ will locate the text of the selected option in the dropdown. Finally, the assertEquals() method of TestNG is used to verify that the correct value is selected in the dropdown.

Test Scenario 2

In this test scenario, the value in the dropdown field will be selected using the setLabel() method of the SelectOption class.

1. Navigate to the dropdown screen on the The-internet herokuapp demo website
2. Locate the dropdown box and select the option — “Option 1”
3. Perform assertion to check that “Option 1” has been selected successfully

Implementation — Test Scenario 2

A new test method testSelectByLabel() is created to implement the test scenario 2.

    @Test
    public void testSelectByLabel() {

        this.page.navigate("https://the-internet.herokuapp.com/dropdown");
        final Locator dropdownField = this.page.locator("#dropdown");

        dropdownField.selectOption(new SelectOption().setLabel("Option 1"));

        final String dropdownFieldSelectedValue = this.page.locator("#dropdown [selected='selected']").innerText();
        assertEquals(dropdownFieldSelectedValue, "Option 1");

    }

The implementation for this scenario is same as Test Scenario 1, the only difference is the method used to select the dropdown value. The option “Option 1” is selected using the following statement:

dropdownField.selectOption(new SelectOption().setLabel("Option 1"));

The setLabel() method selects the option in the dropdown by matching its label. After the value in the dropdown is selected, the assertion is performed using the assertEquals() method to verify that the correct option was successfully selected in the field.

Test Scenario 3

In this test scenario, the value in the dropdown box will be selected using its index

1. Navigate to the dropdown screen on the The-internet herokuapp demo website
2. Locate the dropdown box and select the option with index 2.
3. Perform assertion to check that option “Option 2”(index 2 value) has been selected successfully

Implementation — Test Scenario 3

A new test method testSelectByIndex() is created for demonstrating the selection of values in the dropdown using its index.

    @Test
    public void testSelectByIndex() {

        this.page.navigate("https://the-internet.herokuapp.com/dropdown");
        final Locator dropdownField = this.page.locator("#dropdown");

        dropdownField.selectOption(new SelectOption().setIndex(2));

        final String dropdownFieldSelectedValue = this.page.locator("#dropdown [selected='selected']").innerText();
        assertEquals(dropdownFieldSelectedValue, "Option 2");

    }

The setIndex() method from the SelectOption class allows us to select the value in the dropdown box using its index.

dropdownField.selectOption(new SelectOption().setIndex(2));

The value at the index level 2 is “Option 2” which will be eventually selected. It can be viewed in the following screenshot from the Chrome browser:

The assertEquals() method is finally called at the end to ensure that the correct value, i.e. “Option 2” is selected in the dropdown box.

Test Scenario 4

In this test scenario, the option in the dropdown box will be selected using the value of the option present in it. The demonstration will be done using the Select dropdown list page of the LambdaTest Selenium playground website.

1. Navigate to the Select dropdown list page of the LambdaTest Selenium Playground website
2. Locate the Select Option dropdown box and select the option “Wednesday”
3. Perform assertion to check that the option “Wednesday” has been selected successfully in the dropdown box by verifying the text displayed below the dropdown field after the value is selected in the field

Implementation — Test Scenario 4

A new test method testSelectByIndex() is created for demonstrating the selection of values in the dropdown using its index.

    @Test
    public void testSelectByValue() {

        this.page.navigate("https://www.lambdatest.com/selenium-playground/select-dropdown-demo");
        final Locator dropdownField = this.page.locator("#select-demo");

        dropdownField.selectOption(new SelectOption().setValue("Wednesday"));

    }

The code will first navigate to the Select dropdown list page on the LambdaTest Selenium Playground website. Next, it will locate the dropdown field using the ‘#select-demo’ selector.

The setValue() method from the SelectOption class will select the option “Wednesday” in the dropdown field. To ensure that the required value is selected in the field, the text displayed below the dropdown field is used to perform assertion. The text is retrieved using the“.p-10 p” selector.

final Locator daySelected = this.page.locator(".pt-10 p");
assertThat(daySelected).hasText("Day selected :- Wednesday");

Playwright framework has inbuilt assertions as well that can be used to verify the values selected in the dropdown field.

The assertThat() method is used to check that the daySelected locator has the text “Day selected :- Wednesday”.

Test Scenario 5

In this test scenario, we will be checking out how to select values from the multi dropdown box and perform assertion to check that the desired multiple options are selected in the dropdown box successfully.

1. Navigate to the Select dropdown list page of the LambdaTest Selenium Playground website
2. Locate the multi select option dropdown box and select the following values: “New York”, “Texas”, “California”.
3. Select the option “Washington” using its index.
4. Perform assertion to check that the the respective multi options are selected successfully in the dropdown field

Implementation — Test Scenario 5

A new test method named testMultiSelectOptions() is created inside the DropdownTests class.

    @Test
    public void testMultiSelectOptions() {
        this.page.navigate("https://www.lambdatest.com/selenium-playground/select-dropdown-demo");

        final Locator dropdownField = this.page.locator("#multi-select");
        dropdownField.selectOption(new SelectOption[]{new SelectOption().setLabel("New York"), new SelectOption().setLabel("Texas"), new SelectOption().setValue("California"), new SelectOption().setIndex(7)});

        assertThat(dropdownField).hasValues(new Pattern[]{Pattern.compile("California"), Pattern.compile("New York"), Pattern.compile("Texas"), Pattern.compile("Washington")});
    }

The initial lines of the method will navigate to the Select dropdown list page and locate the multi select dropdown field using the “#multi-select” selector.

The selectOption() method will help in selecting the multiple values in the field. Multiple options can be selected by passing array as parameter in the method.

As we have seen in the earlier test scenarios that setValue(), setIndex(), setLabel() method could be used to select the desired dropdown options. The same methods can be used to select the multiple values in the dropdown field.

dropdownField.selectOption(new SelectOption[]{
new SelectOption().setLabel("New York"), 
new SelectOption().setLabel("Texas"), 
new SelectOption().setValue("California"), 
new SelectOption().setIndex(7)});

The first two options namely, “New York”, “Texas” are selected using setLabel() method, while “California” is selected using setValue() method.

The option “Washington” is selected using the setIndex() method. The index value for the value“Washington” in the dropdown field is “7”, hence the number “7” is passed in the parameter of the setIndex() method.

For performing the assertions to check that the correct values are selected in the dropdown field, the assertThat() method is chained with the hasValues() method which can accept multiple values as parameter.

assertThat(dropdownField).hasValues(new Pattern[]{
Pattern.compile("California"), 
Pattern.compile("New York"), 
Pattern.compile("Texas"), 
Pattern.compile("Washington")});

These values can be supplied using the Pattern class of java and calling the compile() method that accepts the values in the String format. The values required to be asserted can be supplied as a parameter in the compile() method.

Test Execution

The following testng.xml file is created to group all the 5 test scenarios in a single testng.xml file. This helps in executing all the related tests easily.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="Browser Navigation test suite">
    <test name="Browser navigation tests using Playwright on Chrome">
        <classes>
            <class name="io.github.mfaisalkhatri.tests.DropdownTests">
                <methods>
                    <include name="testSelectByOption"/>
                    <include name="testSelectByLabel"/>
                    <include name="testSelectByIndex"/>
                    <include name="testSelectByValue"/>
                    <include name="testMultiSelectOptions"/>
                </methods>
            </class>
        </classes>
    </test>
</suite>

Let’s execute the above testng.xml file using IntelliJ IDE.

Summary

In this blog, we learnt how to run the handle the single and multi dropdown boxes using Playwright with Java. We also learnt about the inbuilt assertions in Playwright framework that could be used to verify the values selected in the dropdown box.

I hope you got a detailed understanding on working with dropdown field using Playwright. Try these tests at your end to get hands-on on working with the Playwright framework.

Happy Testing!!