Post#54.Different ways to select dropdown option

Different ways to select dropdown option

Selecting a value from dropdown is easier task but sometimes we may need to select option without using Select class.
We can select the dropdown values in few ways:

1. Select class methods ( selectByIndex, selectByValue, selectByVisibleText )s
2. Click method
3. Actions class click methods
4. Find element method
5. Sendkeys method
6. Javascript method

Method 1, 4, 5 are not applicable for custom dropdowns.

We already familiar with Select class methods, we will learn how to use remaining methods in above list.

Click Method to select dropdown option

We can use click method to select option from the dropdown, and this method is most preferred method after select class methods.

Program to choose value from the custom dropdown

//open webpage

driver.get("application-url");

//find the dropdown using xpath

                        WebElement dropdownElement = driver.findElement(By.xpath("//select[@id='first']"));

// click the dropdown element

dropdownElement.click();

Thread.sleep(3000);

// find and click the dropdown element

driver.findElement(By.xpath("//option[text()='Bing']")).click();

Actions class to select option from dropdown

Actions class can be used to select a dropdown value in selenium WebDriver, we have to click the dropdown first and then option from the dropdown.

Actions act = new Actions(driver);

//click the dropdown

act.click(driver.findElement(By.xpath("//select[@id='first']")))

                        // click the option

                        .click(driver.findElement(By.xpath("//option[text()='Bing']")))

                        // perform the operation

                        .build().perform();

Find Element Method

This is the simplest way to select dropdown option in selenium but sometimes this approach throws ElementNotVisibleException.

1. Find the option and store it as Webelement, click the webelement

//find the option and click

driver.findElement(By.xpath("//option[text()='Bing']")).click();

Select dropdown option with Sendkeys

We can use sendkeys method to select an option from a dropdown, first of all we have to find the dropdown element and use sendkeys method to select the option.

We have to pass the exact text present in the dropdown option, if we donot send exact text, selenium webdriver chooses the almost exact match option which is in top.

For example: If you want to choose option "22" but if you are sending "2" in sendkeys , selenium tries to set "2" only but if there is no option "2" but if there is "21" which is topper than option "22", selenium selects "21".

//open firefox

WebDriver driver = new FirefoxDriver();

driver.manage().timeouts().implicitlyWait(1, TimeUnit.MINUTES);

//open webpage

driver.get("Application-url");

//find the option and click it

driver.findElement(By.xpath("//select[@id='first']")).sendKeys("Bing");

JavaScript method to select dropdown option

We can use Javascript method to select an option from the dropdown with help of JavaScriptExecutor. We have to set the dropdown option using "value" property of the element.

1. Open browser and navigate to url
2. Find the dropdown
3. Set the value using Javascript executor

//open webpage

driver.get("Application-url");

//find the dropdown using xpath

WebElement dropdownElement = driver.findElement(By.xpath("//button[@id='custom']"));

//cast driver object to JavaScriptExecutor

JavascriptExecutor jse = (JavascriptExecutor) driver;

//set the dropdown value t0 'Bing' using javascript

 jse.executeScript("arguments[0].value='Bing'", dropdownElement);