In this blog we will leverage the power of Playwright-Java to seamlessly interact with dropdown menus.<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
select by value (example 1, method 1)<\/li>\n
select by value (method 2)<\/li>\n
select by value (example 2)<\/li>\n
select by text<\/li>\n
select by index<\/li>\n
Soure code<\/li>\n<\/ul>\n
select by value (example 1, method 1)<\/strong><\/p>\n
Go to https:\/\/demo.automationtesting.in\/Register.html<\/a><\/p>\n
There is a \u2018Skills\u2019 dropdown field<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Let us try to select any value from this simple dropdown field.\u00a0<\/p>\n
But before we do that, let us first inspect the \u2018Skills\u2019 dropdown field.\u00a0<\/p>\n
Notice below that it has unique \u2018id\u2019 and various dropdown values can be seen as part of \u2018value\u2019 attribute, example, dropdown values such as: Adobe InDesign, Java, HTML <\/em>etc\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0There is a \u2018selectOption<\/em>\u2019<\/em> method hat accepts the css selector and the desired value (example HTML value)\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n\n
\u00a0So we can pass these 2 arguments<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
select by value (method 2)<\/strong><\/p>\n
In the above syntax pg.selectOption(selector, value)<\/em>, we were passing 2 arguments in the selectOption() method: selector and value.\u00a0<\/p>\n
We can also break the same syntax such that ‘locator()’ plays the role of ‘selector’ and selectOption() accepts only value: pg.locator().selectOption();<\/em><\/p>\n<\/div>\n
\n
Let us now inspect \u2018Month\u2019 dropdown<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute, notice that \u2018October\u2019 gets selected<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
select by value (example 2)<\/strong><\/p>\n
Let us see another website https:\/\/www.wikipedia.org\/<\/a>\u00a0<\/p>\n
You can see various dropdown values<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Let us inspect the dropdown field<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Notice above that \u2018select\u2019 tag identifies this dropdown. Let us now use this tagname as the selector in selectOption() method. Also let us write any desired value\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute. Notice below that \u2018Af\u2019 gets selected from dropdown\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0select by text<\/strong><\/p>\n
The circle below highlights the respective text for various dropdown values \u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0If we want to select by text, we can use setLabel()<\/em> method<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0select by index<\/strong><\/p>\n
If we want to select 4^{th<\/sup> value from top (index 3), we can do that as well<\/p>\n<\/div>\n}
$\"\"$ <\/span><\/div>\n
\n
\u00a0If we want to select by index, we can use setIndex()<\/em> method<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute the code, notice that AST gets selected<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
So this is how we can select dropdown values using playwright-java.\u00a0<\/p>\n
Source code<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/p>\n
<\/p>\n
import<\/strong> org.junit.jupiter.api.Test;<\/p>\n
import<\/strong> com.microsoft.playwright.Browser;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/p>\n
import<\/strong> com.microsoft.playwright.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
import<\/strong> com.microsoft.playwright.options.SelectOption;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog7_dropdowns_PWJava {<\/p>\n
@Test<\/p>\n
public<\/strong>
\nvoid<\/strong> PlaywrightJTest() {<\/p>\n
Playwright pt = Playwright.create<\/em>();<\/p>\n
LaunchOptions lo = new<\/strong> LaunchOptions();<\/p>\n
lo.setChannel(“msedge”);<\/p>\n
lo.setHeadless(false<\/strong>);<\/p>\n
BrowserType btype = pt.chromium();<\/p>\n
Browser b = btype.launch((new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>)));<\/p>\n
Page pg = b.newPage();<\/p>\n
\/*<\/p>\n
\/\/Example 1<\/p>\n
pg.navigate(“https:\/\/demo.automationtesting.in\/Register.html”);<\/p>\n
\/\/select by value<\/p>\n
pg.selectOption(“#Skills”, “HTML”);<\/p>\n
pg.locator(“[placeholder=’Month’]”).selectOption(“October”);<\/p>\n
*\/<\/p>\n
\/\/Example 2<\/p>\n
pg.navigate(“https:\/\/www.wikipedia.org\/”);<\/p>\n
\/\/select by value<\/p>\n
\/\/pg.selectOption(“select”, “af”);<\/p>\n
\/\/select by text<\/p>\n
\/\/pg.selectOption(“select”, new SelectOption().setLabel(“Polski”));<\/p>\n
\/\/select by index<\/p>\n
pg.selectOption(“select”, new<\/strong> SelectOption().setIndex(3));<\/p>\n
pg.pause();<\/p>\n
}<\/p>\n
}<\/p>\n
<\/p>\n
Thanks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-3101","post","type-post","status-publish","format-standard","hentry","category-java","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3101"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3101\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}