Handling Non-Select or Any Types Of dropdown In Selenium Webdriver

Selenium WebDriver provides a special class called Select which can be used only for drop down created using Select tag. You can not use this class methods for a Non-Select drop downs. This is a major limitation of Select class.

Drop downs in a website could be created in multiple ways. You will find maximum drop downs are created using ul and li tags. There are many drag and drop front end development tools which generates drop down codes dynamically. Sometimes you need to mouse hover on an element to see drop down options. In short, there should be a common way to handle any or most of drop down.

In this post, I will explain some common ways to handle any type of drop downs.

This is a very common logic I see around. Steps are simple as below:-

Click on drop down to make options visible.
Get all options of drop down.
Iterate through it and match with option to be selected.
If found then click on option for selection.

package HandlingDropDowns; import java.util.List; import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test; import io.github.bonigarcia.wdm.WebDriverManager; public class SelectOpionInDropDownUsingIteration { @Test public void iterateOverOptions() { WebDriverManager.chromedriver().setup(); WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); // Select Day WebElement day = driver.findElement(By.id("day")); day.click(); List allDayDropDownOptions = driver.findElements(By.xpath("//select[@id='day']/option")); selectOptionInDropDownUsingIteration(allDayDropDownOptions, "3"); // Select Month WebElement month = driver.findElement(By.id("month")); month.click(); List allMonthDropDownOptions = driver.findElements(By.xpath("//select[@id='month']/option")); selectOptionInDropDownUsingIteration(allMonthDropDownOptions, "Aug"); // Select year WebElement year = driver.findElement(By.id("year")); year.click(); List allYearDropDownOptions = driver.findElements(By.xpath("//select[@id='year']/option")); selectOptionInDropDownUsingIteration(allYearDropDownOptions, "1990"); } private void selectOptionInDropDownUsingIteration(List dropDownOptions, String optionToBeSelected) { boolean isFound = false; for (WebElement option : dropDownOptions) { if (option.getText().equals(optionToBeSelected)) { option.click(); isFound = true; break; } } if (!isFound) System.out.println("No matching opion found."); }
}

You can write same logic using Sream API as below :-

package HandlingDropDowns; import java.util.List; import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test; import io.github.bonigarcia.wdm.WebDriverManager; public class SelectOpionInDropDownUsingStreamIteration { @Test public void iterateOverOptionsUsingStream() { WebDriverManager.chromedriver().setup(); WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); // Select Day WebElement day = driver.findElement(By.id("day")); day.click(); List allDayDropDownOptions = driver.findElements(By.xpath("//select[@id='day']/option")); selectOptionInDropDownUsingStream(allDayDropDownOptions, "3"); // Select Month WebElement month = driver.findElement(By.id("month")); month.click(); List allMonthDropDownOptions = driver.findElements(By.xpath("//select[@id='month']/option")); selectOptionInDropDownUsingStream(allMonthDropDownOptions, "Aug"); // Select year WebElement year = driver.findElement(By.id("year")); year.click(); List allYearDropDownOptions = driver.findElements(By.xpath("//select[@id='year']/option")); selectOptionInDropDownUsingStream(allYearDropDownOptions, "1990"); } private void selectOptionInDropDownUsingStream(List dropDownOptions, String optionToBeSelected) { // anyMatch() method will not continue once rue is returned unlike forEach where we can not break loop. dropDownOptions.stream().anyMatch(option -> { if (option.getText().equals(optionToBeSelected)) { option.click(); return true; } else return false; }); }
}

Problem in above logic is that it is not optimal as it need to iterate over options. If your desired option to be selected in the list is at bottom position then whole options will be iterated and that will be a performance impact.

Click on drop down to make options visible.
Create a custom locator using option to be selected.
Locate it and select.

package HandlingDropDowns;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import io.github.bonigarcia.wdm.WebDriverManager;

public class SelectOpionInDropDownWithoutIteration {

        @Test
        public void iterateOverOptions() {
                WebDriverManager.chromedriver().setup();
                WebDriver driver = new ChromeDriver();
                driver.get("https://www.facebook.com/");

                // Select Day
                WebElement day = driver.findElement(By.id("day"));
                day.click();
                selectOptionUsingCustomLoc(driver, "3");

                // Select Month
                WebElement month = driver.findElement(By.id("month"));
                month.click();
                selectOptionUsingCustomLoc(driver, "Aug");

                // Select year
                WebElement year = driver.findElement(By.id("year"));
                year.click();
                selectOptionUsingCustomLoc(driver, "1990");

        }

        private void selectOptionUsingCustomLoc(WebDriver driver, String valueToBeSelected) {
                String customLoc = "//option[text()='" + valueToBeSelected + "']";
                driver.findElement(By.xpath(customLoc)).click();
        }

}

You can download/clone above sample project from here.

If you have any doubt, feel free to comment below.If you like my posts, please like, comment, share and subscribe.#ThanksForReading

#HappyLearning

Related Posts