{"id":3101,"date":"2025-01-14T15:45:08","date_gmt":"2025-01-14T15:45:08","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3101"},"modified":"2025-01-17T10:31:28","modified_gmt":"2025-01-17T10:31:28","slug":"utilize-playwright-java-to-interact-with-dropdown-menus","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/14\/utilize-playwright-java-to-interact-with-dropdown-menus\/","title":{"rendered":"Utilize Playwright-Java to interact with dropdown menus"},"content":{"rendered":"<p><em>In this blog we will leverage the power of Playwright-Java to seamlessly interact with dropdown menus.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>select by value (example 1, method 1)<\/li>\n<li>select by value (method 2)<\/li>\n<li>select by value (example 2)<\/li>\n<li>select by text<\/li>\n<li>select by index<\/li>\n<li>Soure code<\/li>\n<\/ul>\n<p><strong>select by value (example 1, method 1)<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/demo.automationtesting.in\/Register.html\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/demo.automationtesting.in\/Register.html<\/a><\/p>\n<p>There is a \u2018Skills\u2019 dropdown field<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3105\" width=\"510\" data-init-width=\"958\" height=\"398\" data-init-height=\"748\" title=\"Screenshot 2025-01-14 at 9.17.39\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.17.39\u202fPM.png\" data-width=\"510\" data-height=\"398\" style=\"aspect-ratio: auto 958 \/ 748;\"><\/span><\/p>\n<p>Let us try to select any value from this simple dropdown field.&nbsp;<\/p>\n<p>But before we do that, let us first inspect the \u2018Skills\u2019 dropdown field.&nbsp;<\/p>\n<p>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: <em>Adobe InDesign, Java, HTML <\/em>etc&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3106\" width=\"672\" data-init-width=\"1172\" height=\"343\" data-init-height=\"598\" title=\"Screenshot 2025-01-14 at 9.18.54\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.18.54\u202fPM.png\" data-width=\"672\" data-height=\"343\" style=\"aspect-ratio: auto 1172 \/ 598;\"><\/span><\/p>\n<p>&nbsp;There is a \u2018<em>selectOption<\/em><em>\u2019<\/em> method hat accepts the css selector and the desired value (example HTML value)&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3107\" width=\"642\" data-init-width=\"1172\" height=\"291\" data-init-height=\"532\" title=\"Screenshot 2025-01-14 at 9.19.33\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.19.33\u202fPM.png\" data-width=\"642\" data-height=\"291\" style=\"aspect-ratio: auto 1172 \/ 532;\"><\/span><\/p>\n<p>&nbsp;So we can pass these 2 arguments<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3108\" width=\"558\" data-init-width=\"1190\" height=\"392\" data-init-height=\"836\" title=\"Screenshot 2025-01-14 at 9.20.09\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.20.09\u202fPM.png\" data-width=\"558\" data-height=\"392\" style=\"aspect-ratio: auto 1190 \/ 836;\"><\/span><\/p>\n<p><strong>select by value (method 2)<\/strong><\/p>\n<p>In the above syntax <em>pg.selectOption(selector, value)<\/em>, we were passing 2 arguments in the selectOption() method: selector and value.&nbsp;<\/p>\n<p>We can also break the same syntax such that &#8216;locator()&#8217; plays the role of &#8216;selector&#8217; and selectOption() accepts only value: <em>pg.locator().selectOption();<\/em><\/p>\n<p>Let us now inspect \u2018Month\u2019 dropdown<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3109\" width=\"484\" data-init-width=\"1190\" height=\"457\" data-init-height=\"1124\" title=\"Screenshot 2025-01-14 at 9.21.03\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.21.03\u202fPM.png\" data-width=\"484\" data-height=\"457\" style=\"aspect-ratio: auto 1190 \/ 1124;\"><\/span><\/p>\n<p>&nbsp;Execute, notice that \u2018October\u2019 gets selected<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3110\" width=\"579\" data-init-width=\"1190\" height=\"308\" data-init-height=\"632\" title=\"Screenshot 2025-01-14 at 9.22.03\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.22.03\u202fPM.png\" data-width=\"579\" data-height=\"308\" style=\"aspect-ratio: auto 1190 \/ 632;\"><\/span><\/p>\n<p><strong>select by value (example 2)<\/strong><\/p>\n<p>Let us see another website <a href=\"https:\/\/www.wikipedia.org\/\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/www.wikipedia.org\/<\/a>&nbsp;<\/p>\n<p>You can see various dropdown values<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3111\" width=\"553\" data-init-width=\"1190\" height=\"348\" data-init-height=\"748\" title=\"Screenshot 2025-01-14 at 9.22.37\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.22.37\u202fPM.png\" data-width=\"553\" data-height=\"348\" style=\"aspect-ratio: auto 1190 \/ 748;\"><\/span><\/p>\n<p>&nbsp;Let us inspect the dropdown field<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3112\" width=\"516\" data-init-width=\"1190\" height=\"283\" data-init-height=\"652\" title=\"Screenshot 2025-01-14 at 9.23.16\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.23.16\u202fPM.png\" data-width=\"516\" data-height=\"283\" style=\"aspect-ratio: auto 1190 \/ 652;\"><\/span><\/p>\n<p>&nbsp;Notice 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&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3113\" width=\"634\" data-init-width=\"1190\" height=\"177\" data-init-height=\"332\" title=\"Screenshot 2025-01-14 at 9.23.46\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.23.46\u202fPM.png\" data-width=\"634\" data-height=\"177\" style=\"aspect-ratio: auto 1190 \/ 332;\"><\/span><\/p>\n<p>&nbsp;Execute. Notice below that \u2018Af\u2019 gets selected from dropdown&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3114\" width=\"631\" data-init-width=\"1190\" height=\"461\" data-init-height=\"870\" title=\"Screenshot 2025-01-14 at 9.24.53\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.24.53\u202fPM.png\" data-width=\"631\" data-height=\"461\" style=\"aspect-ratio: auto 1190 \/ 870;\"><\/span><\/p>\n<p>&nbsp;<strong>select by text<\/strong><\/p>\n<p>The circle below highlights the respective text for various dropdown values &nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3115\" width=\"595\" data-init-width=\"1190\" height=\"281\" data-init-height=\"562\" title=\"Screenshot 2025-01-14 at 9.25.30\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.25.30\u202fPM.png\" data-width=\"595\" data-height=\"281\" style=\"aspect-ratio: auto 1190 \/ 562;\"><\/span><\/p>\n<p>&nbsp;If we want to select by text, we can use <em>setLabel()<\/em> method<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3116\" width=\"488\" data-init-width=\"1190\" height=\"561\" data-init-height=\"1368\" title=\"Screenshot 2025-01-14 at 9.26.09\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.26.09\u202fPM.png\" data-width=\"488\" data-height=\"561\" style=\"aspect-ratio: auto 1190 \/ 1368;\"><\/span><\/p>\n<p>&nbsp;<strong>select by index<\/strong><\/p>\n<p>If we want to select 4<sup>th<\/sup> value from top (index 3), we can do that as well<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3117\" width=\"329\" data-init-width=\"440\" height=\"665\" data-init-height=\"890\" title=\"Screenshot 2025-01-14 at 9.26.50\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.26.50\u202fPM.png\" data-width=\"329\" data-height=\"665\" style=\"aspect-ratio: auto 440 \/ 890;\"><\/span><\/p>\n<p>&nbsp;If we want to select by index, we can use <em>setIndex()<\/em> method<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3118\" width=\"547\" data-init-width=\"1172\" height=\"203\" data-init-height=\"436\" title=\"Screenshot 2025-01-14 at 9.27.37\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.27.37\u202fPM.png\" data-width=\"547\" data-height=\"203\" style=\"aspect-ratio: auto 1172 \/ 436;\"><\/span><\/p>\n<p>&nbsp;Execute the code, notice that AST gets selected<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3119\" width=\"489\" data-init-width=\"924\" height=\"60\" data-init-height=\"114\" title=\"Screenshot 2025-01-14 at 9.28.14\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-14-at-9.28.14\u202fPM.png\" data-width=\"489\" data-height=\"60\" style=\"aspect-ratio: auto 924 \/ 114;\"><\/span><\/p>\n<p>So this is how we can select dropdown values using playwright-java.&nbsp;<\/p>\n<p><strong>Source code<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> org.junit.jupiter.api.Test;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType.LaunchOptions;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.options.SelectOption;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog7_dropdowns_PWJava {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {<\/p>\n<p>Playwright pt = Playwright.<em>create<\/em>();<\/p>\n<p>LaunchOptions lo = <strong>new<\/strong> LaunchOptions();<\/p>\n<p>lo.setChannel(&#8220;msedge&#8221;);<\/p>\n<p>lo.setHeadless(<strong>false<\/strong>);<\/p>\n<p>BrowserType btype = pt.chromium();<\/p>\n<p>Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));<\/p>\n<p>Page pg = b.newPage();<\/p>\n<p>\/*<\/p>\n<p>\/\/Example 1<\/p>\n<p>pg.navigate(&#8220;https:\/\/demo.automationtesting.in\/Register.html&#8221;);<\/p>\n<p>\/\/select by value<\/p>\n<p>pg.selectOption(&#8220;#Skills&#8221;, &#8220;HTML&#8221;);<\/p>\n<p>pg.locator(&#8220;[placeholder=&#8217;Month&#8217;]&#8221;).selectOption(&#8220;October&#8221;);<\/p>\n<p>*\/<\/p>\n<p>\/\/Example 2<\/p>\n<p>pg.navigate(&#8220;https:\/\/www.wikipedia.org\/&#8221;);<\/p>\n<p>\/\/select by value<\/p>\n<p>\/\/pg.selectOption(&#8220;select&#8221;, &#8220;af&#8221;);<\/p>\n<p>\/\/select by text<\/p>\n<p>\/\/pg.selectOption(&#8220;select&#8221;, new SelectOption().setLabel(&#8220;Polski&#8221;));<\/p>\n<p>\/\/select by index<\/p>\n<p>pg.selectOption(&#8220;select&#8221;, <strong>new<\/strong> SelectOption().setIndex(3));<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3101\/revisions"}],"predecessor-version":[{"id":3699,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3101\/revisions\/3699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"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}]}}