In this blog we will leverage the power of Playwright-Java to seamlessly interact with dropdown menus.

Topics that we will cover:

• select by value (example 1, method 1)
• select by value (method 2)
• select by value (example 2)
• select by text
• select by index
• Soure code

select by value (example 1, method 1)

Go to https://demo.automationtesting.in/Register.html

There is a ‘Skills’ dropdown field

Let us try to select any value from this simple dropdown field. 

But before we do that, let us first inspect the ‘Skills’ dropdown field. 

Notice below that it has unique ‘id’ and various dropdown values can be seen as part of ‘value’ attribute, example, dropdown values such as: Adobe InDesign, Java, HTML etc 

 There is a ‘selectOption’ method hat accepts the css selector and the desired value (example HTML value) 

 So we can pass these 2 arguments

select by value (method 2)

In the above syntax pg.selectOption(selector, value), we were passing 2 arguments in the selectOption() method: selector and value. 

We can also break the same syntax such that 'locator()' plays the role of 'selector' and selectOption() accepts only value: pg.locator().selectOption();

Let us now inspect ‘Month’ dropdown

 Execute, notice that ‘October’ gets selected

select by value (example 2)

Let us see another website https://www.wikipedia.org/ 

You can see various dropdown values

 Let us inspect the dropdown field

 Notice above that ‘select’ tag identifies this dropdown. Let us now use this tagname as the selector in selectOption() method. Also let us write any desired value 

 Execute. Notice below that ‘Af’ gets selected from dropdown 

 select by text

The circle below highlights the respective text for various dropdown values  

 If we want to select by text, we can use setLabel() method

 select by index

If we want to select 4^th value from top (index 3), we can do that as well

 If we want to select by index, we can use setIndex() method

 Execute the code, notice that AST gets selected

So this is how we can select dropdown values using playwright-java. 

Source code

package com.rsa.playwrightjava;

import org.junit.jupiter.api.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.BrowserType.LaunchOptions;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

import com.microsoft.playwright.options.SelectOption;

public class Blog7_dropdowns_PWJava {

@Test

public void PlaywrightJTest() {

Playwright pt = Playwright.create();

LaunchOptions lo = new LaunchOptions();

lo.setChannel("msedge");

lo.setHeadless(false);

BrowserType btype = pt.chromium();

Browser b = btype.launch((new BrowserType.LaunchOptions().setHeadless(false)));

Page pg = b.newPage();

/*

//Example 1

pg.navigate("https://demo.automationtesting.in/Register.html");

//select by value

pg.selectOption("#Skills", "HTML");

pg.locator("[placeholder='Month']").selectOption("October");

*/

//Example 2

pg.navigate("https://www.wikipedia.org/");

//select by value

//pg.selectOption("select", "af");

//select by text

//pg.selectOption("select", new SelectOption().setLabel("Polski"));

//select by index

pg.selectOption("select", new SelectOption().setIndex(3));

pg.pause();

}

}

Thanks.