💧Drop Down

What are Drop Downs?

A dropdown menu is a graphical user interface element that allows the user to choose one value from a list of predefined options.

Some key characteristics of dropdown menus:

• The dropdown is collapsed initially, showing only the selected value or a default placeholder text.

• When clicked or tapped, it expands to show the list of selectable options.

• The user can select one option from the list.

• Once an option is selected, the dropdown collapses back, displaying the chosen value.

• The options list can be a simple text-based list or contain complex items with icons, images, sub-texts, etc.

• The options may be static or dynamic based on other conditions.

• It saves space on the UI as the full list is hidden initially.

• Allows the user to choose from many options without taking up too much space.

• Often has a default value preselected when first loaded.

• Widely used in forms, filters, configurations, etc. to allow selecting from sets of data.

Handle Dynamic Drop Down

Dynamic dropdown:

• The options in the dropdown are dynamically generated or loaded at runtime.

• The options can change in response to user actions or other events.

• Example - A search dropdown where suggestions keep changing as the user types in the search box.

Sample Dynamic Drop Down Script

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class SeleniumIntro {
    public static void main(String[] args) throws InterruptedException {

        System.setProperty("webdriver.chrome.driver", "/Users/tasingucci/Downloads/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("<https://rahulshettyacademy.com/dropdownsPractise/>");

        driver.findElement(By.id("ctl00_mainContent_ddl_originStation1")).click();
        driver.findElement(By.xpath("//a[@value='BLR']")).click();
        Thread.sleep(2000);
        driver.findElement(By.xpath("(//a[@value='MAA'])[2]")).click();
    }
}

Handle Static Drop Down

Static dropdown:

• The options in the dropdown are fixed and do not change dynamically.

• The dropdown always displays the same set of predetermined options every time.

• Example - A dropdown to select a country, where the list of countries is predefined and remains the same.

Sample Static Drop-Down Script

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class SeleniumIntro {
    public static void main(String[] args) throws InterruptedException {

        System.setProperty("webdriver.chrome.driver", "/Users/tasingucci/Downloads/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("<https://rahulshettyacademy.com/dropdownsPractise/>");

        Select origin = new Select(driver.findElement(By.id("ctl00_mainContent_ddl_originStation1")));
        origin.selectByValue("BLR");
        Thread.sleep(2000);

        Select destination = new Select(driver.findElement(By.id("ctl00_mainContent_ddl_destinationStation1")));
        destination.selectByValue("MAA");

        driver.quit();
    }
}

Here's the difference between static and dynamic dropdowns in a table:

Feature	Static Dropdown	Dynamic Dropdown
Definition	A dropdown menu that has a fixed set of options that do not change at runtime.	A dropdown menu that has options that are loaded dynamically at runtime based on user input or other factors.
HTML	The options are defined in the HTML code using <option> elements.	The options may be created dynamically using JavaScript or other server-side technologies.
Elements	A static dropdown has one HTML element for each option and one element for the dropdown itself.	A dynamic dropdown may have one or more HTML elements for the dropdown, and may load options from a data source such as a database or web service.
Interactions	A static dropdown can be interacted with using the Select class from Selenium's support.ui package, which provides methods for selecting options by value, index, or text.	A dynamic dropdown may require additional interactions, such as typing into a search box or clicking a button to load options. It may also require additional logic to handle changing options at runtime.
Stability	A static dropdown is more stable, as it has a fixed set of options that do not change at runtime.	A dynamic dropdown is less stable, as its options may change at runtime based on various factors. This may require additional logic to handle changing options and avoid test failures.
Performance	A static dropdown is generally faster and requires less processing time, as all options are loaded with the page.	A dynamic dropdown may be slower, as it may need to load options on demand based on user input or other factors. This may require additional processing time and slow down test execution.

Common Interview Questions

How do you handle dropdown lists using the Select class in Selenium WebDriver?

Selenium provides a Select class specifically for interacting with dropdown list elements.

You first need to locate the dropdown list element using one of the locator strategies:

driver.findElement([By.id](<http://by.id/>)("dropdown"))

Then pass that element to the Select constructor:

Select dropdown = new Select(driver.findElement([By.id](<http://by.id/>)("dropdown")));

The Select class provides 3 main methods to select an option from the dropdown:

.selectByValue("value") - Selects the option based on its value attribute

.selectByIndex(index) - Selects the option based on its numeric index (starting from 0)

.selectByVisibleText("text") - Selects the option based on the visible text

Examples:

Select year = new Select(driver.findElement([By.id](<http://by.id/>)("year")));
year.selectByValue("2015");  // Selects 2015

Select size = new Select(driver.findElement([By.name](<http://by.name/>)("size")));
size.selectByIndex(1);  // Selects the 2nd option

Select color= new Select(driver.findElement(By.className("color")));
color.selectByVisibleText("Yellow"); // Selects the Yellow option

So in summary, the Select class provides an easy API to select options from dropdown lists using:

.selectByValue()
.selectByIndex()
.selectByVisibleText()

How do you handle dropdown WITHOUT Select class?

Here are the organized steps for handling a dropdown without the Select class in Selenium:

1. Launch and open the Chrome browser using the ChromeDriver.

2. Navigate to the URL "http://demo.guru99.com/test/newtours/register.php".

3. Maximize the window of the browser.

4. Wait for 3 seconds.

5. Scroll down the webpage using JavascriptExecutor.

6. Find the dropdown element and click on it to open the dropdown options.

7. Store all the dropdown options in a List.

8. Use a for loop to fetch all the options from the List.

9. Use an if condition to select the desired option.

Here is the updated code with the organized steps:

public class SelectDropDownV {

    public static void main (String [] aa) throws AWTException, InterruptedException {

        System.setProperty("webdriver.chrome.driver", "C:\\\\\\\\Users\\\\\\\\AJEET\\\\\\\\Downloads\\\\\\\\chromedriver_win32\\\\\\\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("<http://demo.guru99.com/test/newtours/register.php>");
        driver.manage().window().maximize();

        Thread.sleep(3000);

        //scroll down the page
        JavascriptExecutor js = (JavascriptExecutor)driver;
        js.executeScript("window.scrollBy(0,500)");

        //click on the dropdown element and store all options in a list
        WebElement dropdown = driver.findElement(By.xpath("//select[@name='country']"));
        dropdown.click();
        List<WebElement> options = dropdown.findElements(By.tagName("option"));

        //use for loop to fetch all options and select the desired option
        for (WebElement option: options) {
            if (option.getText().equals("India")) {
                option.click();
                break;
            }
        }
    }
}