{"id":3218,"date":"2020-05-18T18:37:03","date_gmt":"2020-05-18T13:07:03","guid":{"rendered":"https:\/\/www.h2kinfosys.com\/blog\/?p=3218"},"modified":"2024-09-26T16:42:55","modified_gmt":"2024-09-26T11:12:55","slug":"selecting-values-from-dropdown-using-selenium-webdriver","status":"publish","type":"post","link":"https:\/\/www.h2kinfosys.com\/blog\/selecting-values-from-dropdown-using-selenium-webdriver\/","title":{"rendered":"Selecting Values from Dropdown using Selenium WebDriver"},"content":{"rendered":"\n<p>In this article, you will study how to select values from dropdown in Selenium WebDriver. Before moving ahead with this tutorial, first let us understand some of the basics of handling drop-downs in Selenium WebDriver.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Select in Selenium WebDriver<\/strong><\/h2>\n\n\n\n<p>In Selenium WebDriver the <strong>\u2018Select\u2019<\/strong> class is used for selecting and deselecting option from a dropdown. The select type object can be initialized as parameter by <a href=\"https:\/\/www.h2kinfosys.com\/blog\/selenium-form-webelement\/\">passing the webElement<\/a> dropdown to its constructor.<\/p>\n\n\n\n<p>WebElement&nbsp;DropDown&nbsp;=&nbsp;driver.findElement(By.id(&#8220;testDropdown&#8221;));&nbsp;&nbsp;<\/p>\n\n\n\n<p>Select&nbsp;dropdown&nbsp;=&nbsp;<strong>new<\/strong>&nbsp;Select(DropDown);<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Selecting an option from drop-down menu<\/strong><\/h3>\n\n\n\n<p>Below are the three ways to select an option from the drop-down menu.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>selectByValue<\/strong><\/li>\n\n\n\n<li><strong>selectByIndex<\/strong><\/li>\n\n\n\n<li><strong>selectByVisibleText<\/strong><\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method Name: selectByValue:&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>Purpose:<\/strong> This option is used to select a value matching with the given argument by the user.<\/p>\n\n\n\n<p><strong>Syntax:<\/strong> select.selectByValue(Value);<br>dropdown.selectByValue(\u201cTesting\u201d)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method Name: selectByIndex:<\/strong>&nbsp;<\/h4>\n\n\n\n<p><strong>Purpose:<\/strong> This option is used to select an option based on its index given by the user. There is an attribute called \u201cvalues\u201d which will have the values index.<\/p>\n\n\n\n<p><strong>Syntax:<\/strong> select.selectByIndex(Index);<br>dropdown.selectByIndex(4);<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method Name: selectByVisibleText:<\/strong>&nbsp;<\/h4>\n\n\n\n<p><strong>Purpose:<\/strong> This option is used to select all the options based on the <a href=\"https:\/\/www.h2kinfosys.com\/blog\/webelement-in-selenium\/\">display text matching <\/a>the given argument. It will not look for any value or index, it will try to match with the VisibleText.<\/p>\n\n\n\n<p><strong>Syntax:<\/strong> select.selectByVisibleText(Text);<br>dropdown.selectByVisibleText(\u201cAutomationTesting\u201d);<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>De-select operations<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method&nbsp;Name:&nbsp;deselectByIndex&nbsp;&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>Syntax:<\/strong>\u00a0select.deselectByIndex(Index);<br><strong>Purpose:<\/strong> This command deselects an option by index\u00a0<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method&nbsp;Name:&nbsp;deselectByValue&nbsp;&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>Syntax:<\/strong>\u00a0select.deselectByValue(Value);<br><strong>Purpose:<\/strong> This command deselects an option by using \u201cvalue\u201d attribute\u201d<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method&nbsp;Name:&nbsp;deselectByVisibleText&nbsp;&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>Syntax:<\/strong>\u00a0select.deselectByVisibleText(Text);\u00a0<br><strong>Purpose:<\/strong> This command deselects an option through its displayed text<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Method&nbsp;Name:&nbsp;deselectAll<\/strong><\/h4>\n\n\n\n<p><strong>Syntax:<\/strong>\u00a0select.deselectAll();<br><strong>Purpose:<\/strong> This command will deselects all the selected options which are selected previously.<\/p>\n\n\n\n<p>Let&#8217;s create a test case in which we will automate the following scenarios to handle Drop-downs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Invoke a Google chrome browser.<\/li>\n\n\n\n<li>Open URL: <a href=\"https:\/\/www.facebook.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.facebook.com\/<\/a><\/li>\n\n\n\n<li>Select the option \u201cMay\u201d month from the drop-down menu.<\/li>\n\n\n\n<li>Close the browser.<\/li>\n<\/ul>\n\n\n\n<p>Now, we will create a test case step by step in order to understand of how to handle drop-downs in WebDriver.<\/p>\n\n\n\n<p><strong>Step 1:<\/strong> Launch Eclipse IDE.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Go to File &gt; New &gt; Click on Java Project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"656\" height=\"635\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-5.png\" alt=\"Selenium WebDriver\" class=\"wp-image-3219\" title=\"Selenium WebDriver\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-5.png 656w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-5-300x290.png 300w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p><strong>Step 3:<\/strong> Right click on the src folder and click on the New &gt; class.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"702\" height=\"575\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-6.png\" alt=\"Eclipse IDE\" class=\"wp-image-3220\" style=\"width:538px;height:441px\" title=\"\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-6.png 702w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-6-300x246.png 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/><\/figure>\n<\/div>\n\n\n<p>Give your Class name as &#8220;Test_Dropdown&#8221; and <a href=\"https:\/\/www.h2kinfosys.com\/blog\/selecting-checkbox-and-radio-button-with-selenium-webdriver\/\">Select the checkbox<\/a> \u201cpublic static void main(String[] args) and click on &#8220;Finish&#8221; button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"615\" height=\"730\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-7.png\" alt=\"Java Class\" class=\"wp-image-3221\" style=\"width:505px;height:599px\" title=\"\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-7.png 615w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-7-253x300.png 253w\" sizes=\"(max-width: 615px) 100vw, 615px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Step 4:<\/strong> Invoke the Google Chrome browser and set the system property to the path of your chromedriver.exe file.<\/p>\n\n\n\n<p>Here is the sample code to set Chrome driver system property:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ System Property for Chrome Driver\u00a0\u00a0\u00a0\n\u00a0System.setProperty(\"webdriver.chrome.driver\", \u201c D:\\\\Drivers\\\\geckodriver.exe \");\u00a0<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\u00a0After that, we have to initialize the <a href=\"https:\/\/chromedriver.chromium.org\/\" rel=\"nofollow noopener\" target=\"_blank\">Chrome driver<\/a> using ChromeDriver Class. Below is the sample code to initialize Chrome driver using ChromeDriver class.<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Instantiate a ChromeDriver class.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\nWebDriver driver=new ChromeDriver();<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\u00a0\nWe will get the below code to launch the Google Chrome browser after combining both of the above codes.<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>System.setProperty(\"webdriver.chrome.driver\", \u201c D:\\\\Drivers\\\\geckodriver.exe \");\u00a0\u00a0\nWebDriver driver=new ChromeDriver();<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">After that we need to navigate to the desired URL.<\/pre>\n\n\n\n<p>Below is the sample code to navigate to the desired URL:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Launch Website&nbsp;&nbsp;\ndriver.navigate().to(\"<a href=\"https:\/\/www.facebook.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.facebook.com\/<\/a>\");<\/pre>\n\n\n\n<p><strong>Here is the complete code for above scenario:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import org.openqa.selenium.WebDriver;\u00a0\u00a0\nimport org.openqa.selenium.chrome.ChromeDriver;\u00a0\u00a0\n\u00a0\u00a0\npublic class Test_Dropdown {\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public static void main(String&#91;] args) {\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ System Property for Chrome Driver\u00a0\u00a0\u00a0\n\u00a0System.setProperty(\"webdriver.chrome.driver\", \u201c D:\\\\Drivers\\\\geckodriver.exe \");\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Instantiate a ChromeDriver class.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0WebDriver driver=new ChromeDriver();\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Launch Website\u00a0\u00a0\ndriver.navigate().to(\"https:\/\/www.facebook.com\/\");\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\u00a0\n}<\/code><\/pre>\n\n\n\n<p><strong>Step 5:<\/strong> Now we will try to locate the drop-down menu.<\/p>\n\n\n\n<p>Follow the below steps to locate the drop-down menu on the web page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open URL:&nbsp;<a href=\"https:\/\/www.facebook.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.facebook.com\/<\/a>&nbsp;<\/li>\n\n\n\n<li>Right click on the drop-down menu on the web page and click on Inspect<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"301\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-8.png\" alt=\"\" class=\"wp-image-3222\" title=\"\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-8.png 685w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-8-300x132.png 300w\" sizes=\"(max-width: 685px) 100vw, 685px\" \/><\/figure>\n\n\n\n<p><strong>Step 6:<\/strong> Now we try to locate the \u201cMonth\u201d dropdown by inspecting its HTML code. It will launch a window containing all the specific codes of the drop-down menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"257\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-9.png\" alt=\"\" class=\"wp-image-3223\" title=\"\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-9.png 691w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-9-300x112.png 300w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/figure>\n\n\n\n<p><strong>Note the id attribute of a \u201cMonth\u201d dropdown.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"101\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-10.png\" alt=\"\" class=\"wp-image-3224\" title=\"\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-10.png 648w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/05\/image-10-300x47.png 300w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p><strong>Step 7: <\/strong>&nbsp;Now we need to write the code which will select the option &#8220;May&#8221; from the drop-down menu.<\/p>\n\n\n\n<p>Below is the sample code to select the option from the drop-down menu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/By using Select class for selecting value from dropdown\u00a0\u00a0\nSelect dropdown = new Select(driver.findElement(By.id(\"month\")));\u00a0\u00a0\ndropdown.selectByVisibleText(\"May\");<\/code><\/pre>\n\n\n\n<p><strong>Now,\u00a0our\u00a0final\u00a0test\u00a0script\u00a0will\u00a0look\u00a0something\u00a0like:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import org.openqa.selenium.By;\u00a0\u00a0\nimport org.openqa.selenium.WebDriver;\u00a0\u00a0\nimport org.openqa.selenium.chrome.ChromeDriver;\u00a0\u00a0\nimport org.openqa.selenium.support.ui.Select;\u00a0\u00a0\n\u00a0\u00a0\npublic class Test_Dropdown\u00a0 {\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0public static void main(String&#91;] args) {\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ System Property for Chrome Driver\u00a0\u00a0\u00a0\nSystem.setProperty(\"webdriver.chrome.driver\",\"D:\\\\ChromeDriver\\\\chromedriver.exe\");\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Instantiate a ChromeDriver class.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0WebDriver driver=new ChromeDriver();\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Launch Website\u00a0\u00a0\ndriver.navigate().to(\"<a href=\"https:\/\/www.facebook.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.facebook.com\/<\/a>\");\u00a0 \u00a0\u00a0\n\u00a0\u00a0\n\/\/Use Select class for selecting value from dropdown\u00a0 menu\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\nSelect dropdown = new Select(driver.findElement(By.id(\"month\")));\u00a0\u00a0\ndropdown.selectByVisibleText(\"May\");\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Close the Browser\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0driver.close();\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\n}<\/code><\/pre>\n\n\n\n<p><strong>Step 8:<\/strong>&nbsp;Right click on the Eclipse and select&nbsp;the option <strong>Run As &gt; Java Application<\/strong>.<\/p>\n\n\n\n<p>After running, the above test script will launch the Chrome browser and select the value from the dropdown.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion:<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Element<\/strong><\/td><td><strong>Command<\/strong><\/td><td><strong>Description<\/strong><\/td><\/tr><tr><td><strong>Dropdown Box<\/strong><\/td><td>selectByValue()deselectByValue()<\/td><td>This command selects\/deselects an option by using \u201cvalue\u201d attribute\u201d<\/td><\/tr><tr><td><\/td><td>selectByVisibleText()deselectByVisibleText()<\/td><td>This command selects\/deselects an option through its displayed text<\/td><\/tr><tr><td><\/td><td>selectByIndex()deselectByIndex()<\/td><td>This command select\/deselects an option by index&nbsp;<\/td><\/tr><tr><td><\/td><td>deselectAll()<\/td><td>This command will deselects all the selected options which are selected previously<\/td><\/tr><tr><td><\/td><td>isMultiple()<\/td><td>This command will returns TRUE if the drop-down element allows multiple selection at a time, otherwise it will returns FALSE<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will study how to select values from dropdown in Selenium WebDriver. Before moving ahead with this tutorial, first let us understand some of the basics of handling drop-downs in Selenium WebDriver. Select in Selenium WebDriver In Selenium WebDriver the \u2018Select\u2019 class is used for selecting and deselecting option from a dropdown. [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":3230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[743,745,744,746,742],"class_list":["post-3218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-selenium-tutorials","tag-chrome-driver","tag-selectbyindex","tag-selectbyvalue","tag-selectbyvisibletext","tag-selecting-values-from-dropdown"],"_links":{"self":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/3218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/comments?post=3218"}],"version-history":[{"count":0,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/3218\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media\/3230"}],"wp:attachment":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media?parent=3218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/categories?post=3218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/tags?post=3218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}