14-Handling Drop-Downs in Selenium with Java

Welcome to today’s comprehensive guide on Handling Drop-Downs in Selenium with Java. Drop-down menus are ubiquitous in web applications, offering users a way to select options from a list. Mastering the interaction with different types of drop-downs is crucial for building robust automation scripts using Selenium WebDriver. This tutorial will walk you through various scenarios and provide practical examples to enhance your Selenium automation skills.

1. Types of Drop-Downs

In web applications, you typically encounter three primary types of drop-downs:

Select Drop-Down: Traditional drop-downs using the <select> tag.
Bootstrap Drop-Down: Enhanced drop-downs styled with Bootstrap or similar frameworks, often not using the <select> tag.
Hidden (Auto-Suggest) Drop-Downs: Dynamic drop-downs that appear based on user input, often resembling auto-suggest or autocomplete features.

Understanding the differences between these drop-downs is essential for selecting the appropriate handling method in your automation scripts.

1.1. Select Drop-Down

Select Drop-Downs are the traditional drop-downs implemented using the <select> HTML tag. They are straightforward to handle in Selenium due to the availability of the Select class, which provides built-in methods for interaction.

HTML Structure Example:

<select id="country" name="country">
    <option value="in">India</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <!-- More options -->
</select>

1.2. Bootstrap Drop-Down

Bootstrap Drop-Downs are styled using frameworks like Bootstrap, which enhance the aesthetics and functionality of standard drop-downs. These drop-downs often use <div>, <button>, and other non-<select> tags, making them slightly more complex to handle.

HTML Structure Example:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
        Select Country
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">India</a>
        <a class="dropdown-item" href="#">United States</a>
        <a class="dropdown-item" href="#">United Kingdom</a>
        <!-- More options -->
    </div>
</div>

1.3. Hidden (Auto-Suggest) Drop-Downs

Hidden Drop-Downs, often referred to as Auto-Suggest or Autocomplete drop-downs, display options dynamically based on user input. These drop-downs may not be immediately visible in the HTML and often require specific strategies to interact with.

HTML Structure Example:

<input type="text" id="searchBox" name="searchBox" autocomplete="off">
<ul id="suggestionsList" class="suggestions">
    <!-- Options are dynamically loaded here -->
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <!-- More options -->
</ul>

2. Handling Select Drop-Downs

Select Drop-Downs are the easiest to handle in Selenium due to the Select class, which provides methods like selectByVisibleText, selectByValue, and selectByIndex.

2.1. Using the Select Class

The Select class in Selenium is specifically designed to handle <select> HTML elements. It provides methods to interact with the drop-down options seamlessly.

Steps to Use the Select Class:

Identify the Drop-Down Element: Locate the <select> element using locators like id, name, or XPath.
Create a Select Object: Pass the located WebElement to the Select class.
Interact with Options: Use methods like selectByVisibleText, selectByValue, or selectByIndex to choose options.

Example: Selecting Options from a Select Drop-Down

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

public class SelectDropDownExample {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the page containing the select drop-down
        driver.get("https://example.com/testAutomationPractice.html");

        // Locate the select drop-down element by ID
        WebElement countryDropDown = driver.findElement(By.id("country"));

        // Create a Select object
        Select selectCountry = new Select(countryDropDown);

        // 1. Select by Visible Text
        selectCountry.selectByVisibleText("France");
        Thread.sleep(2000); // Pause to observe

        // 2. Select by Value
        selectCountry.selectByValue("jp"); // Assuming 'jp' is the value for Japan
        Thread.sleep(2000); // Pause to observe

        // 3. Select by Index
        selectCountry.selectByIndex(2); // Selecting the third option (0-based index)
        Thread.sleep(2000); // Pause to observe

        // Close the browser
        driver.quit();
    }
}

Explanation:

Frame Identification: The frame is identified using its name or ID attribute, which are unique identifiers within the HTML document.
Switching Context: The switchTo().frame() method changes the WebDriver’s context to the specified frame, allowing interactions with its elements.
Interacting with Elements: Once inside the frame, elements can be located and interacted with using standard Selenium methods.
Switching Back: After completing interactions within the frame, it’s essential to switch back to the main content using switchTo().defaultContent().

2.2. Selecting Options

The Select class provides three primary methods to select options:

selectByVisibleText(String text): Selects the option with the visible text matching the provided string.
selectByValue(String value): Selects the option with the value attribute matching the provided string.
selectByIndex(int index): Selects the option at the specified index (0-based).

Important Considerations:

Visible Text vs. Value: While selectByVisibleText relies on the text displayed to the user, selectByValue depends on the value attribute of the <option> tag.
Indexing: Indexing starts at 0. Ensure accurate counting to prevent selecting unintended options.
Mutual Exclusivity: Selecting a new option deselects the previous one unless the drop-down allows multiple selections.

2.3. Counting and Printing Options

You might need to verify the number of options available in a drop-down or print them for logging purposes. The Select class provides the getOptions() method, which returns a list of all available options.

Example: Counting and Printing Options

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;

public class CountAndPrintDropDownOptions {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the page containing the select drop-down
        driver.get("https://example.com/testAutomationPractice.html");

        // Locate the select drop-down element by ID
        WebElement countryDropDown = driver.findElement(By.id("country"));

        // Create a Select object
        Select selectCountry = new Select(countryDropDown);

        // Get all options
        List allOptions = selectCountry.getOptions();

        // Print the total number of options
        System.out.println("Total number of options: " + allOptions.size());

        // Print each option's text using a traditional for-loop
        System.out.println("Options using for-loop:");
        for (int i = 0; i < allOptions.size(); i++) {
            System.out.println(allOptions.get(i).getText());
        }

        // Print each option's text using an enhanced for-loop
        System.out.println("\nOptions using enhanced for-loop:");
        for (WebElement option : allOptions) {
            System.out.println(option.getText());
        }

        // Close the browser
        driver.quit();
    }
}

Key Points:

getOptions(): Returns a List<WebElement> containing all <option> elements within the <select>.
Looping Through Options: You can use either a traditional for loop with indexing or an enhanced for-each loop to iterate through the options.

3. Handling Bootstrap Drop-Downs

Bootstrap Drop-Downs enhance the user interface but do not use the traditional <select> tag, making them slightly more complex to handle in Selenium. These drop-downs often involve clicking a button to reveal a list of options, which are typically <a> or <div> elements.

3.1. Identifying Bootstrap Drop-Downs

Characteristics of Bootstrap Drop-Downs:

Use non-<select> tags like <div>, <button>, or <a>.
Options are typically nested within <div> or <ul> elements.
May include additional elements like checkboxes for multi-select functionality.

HTML Structure Example:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
        Select Country
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">India</a>
        <a class="dropdown-item" href="#">United States</a>
        <a class="dropdown-item" href="#">United Kingdom</a>
        <!-- More options -->
    </div>
</div>

3.2. Selecting Single and Multiple Options

Since Bootstrap Drop-Downs do not use the <select> tag, the Select class cannot be used. Instead, interactions are performed by clicking the drop-down to reveal options and then clicking the desired option.

Example: Selecting Single and Multiple Options from a Bootstrap Drop-Down

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

public class BootstrapDropDownExample {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the page containing the Bootstrap drop-down
        driver.get("https://example.com/bootstrapDropDown.html");

        // Locate the drop-down toggle button using XPath with a partial match on the class attribute
        WebElement dropDownToggle = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle')]"));

        // Click to open the drop-down
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to allow drop-down to open

        // Select a single option (e.g., "Java")
        WebElement javaOption = driver.findElement(By.xpath("//a[text()='Java']"));
        javaOption.click();
        Thread.sleep(2000); // Pause to observe selection

        // Re-open the drop-down to select multiple options
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to allow drop-down to open

        // Select multiple options (e.g., "Python" and "MySQL")
        WebElement pythonOption = driver.findElement(By.xpath("//a[text()='Python']"));
        WebElement mySQLOption = driver.findElement(By.xpath("//a[text()='MySQL']"));
        pythonOption.click();
        mySQLOption.click();
        Thread.sleep(2000); // Pause to observe selections

        // Close the drop-down by clicking outside or using a specific method if available
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to observe

        // Close the browser
        driver.quit();
    }
}

Handling Multi-Select Drop-Downs: Bootstrap can implement multi-select drop-downs by including checkboxes within the options. To select multiple options, you can iterate through the desired options and perform click actions on each.

Example: Selecting Multiple Options Using a Loop

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;

public class BootstrapMultiSelectExample {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the page containing the Bootstrap multi-select drop-down
        driver.get("https://example.com/bootstrapMultiSelect.html");

        // Locate the multi-select drop-down toggle button
        WebElement dropDownToggle = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle')]"));

        // Click to open the drop-down
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to allow drop-down to open

        // Locate all options within the drop-down
        List allOptions = driver.findElements(By.xpath("//div[@class='dropdown-menu']//a"));

        // Desired options to select
        String[] optionsToSelect = {"Java", "Python", "MySQL"};

        // Iterate through all options and select desired ones
        for (WebElement option : allOptions) {
            String optionText = option.getText();
            for (String desiredOption : optionsToSelect) {
                if (optionText.equals(desiredOption)) {
                    option.click();
                    Thread.sleep(1000); // Pause between selections
                }
            }
        }

        // Close the drop-down
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to observe selections

        // Close the browser
        driver.quit();
    }
}

Key Points:

Locating Elements: Use XPath with partial matches (contains) to make locators more dynamic and resilient to changes.
Click Actions: First, click the drop-down toggle to reveal options, then click the desired option(s).
Synchronization: Incorporate Thread.sleep() judiciously or, preferably, use explicit waits to handle dynamic content loading.

4. Handling Hidden (Auto-Suggest) Drop-Downs

Hidden Drop-Downs, commonly seen as Auto-Suggest or Autocomplete features, present options based on user input. These options are dynamically loaded and may not be immediately present in the DOM, posing challenges for Selenium automation.

4.1. Identifying Hidden Drop-Downs

Characteristics of Hidden Drop-Downs:

Options are not visible in the HTML until a specific action is performed (e.g., typing into a search box).
Often implemented using <input> fields with accompanying <ul> or <div> elements that populate suggestions.
Require user interaction to trigger the display of options.

HTML Structure Example:

<input type="text" id="searchBox" name="searchBox" autocomplete="off">
<ul id="suggestionsList" class="suggestions">
    <!-- Options are dynamically loaded here -->
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <!-- More options -->
</ul>

4.2. Making Options Visible Using Debugger

Sometimes, options in hidden drop-downs disappear immediately after interaction, making them challenging to inspect and interact with. To overcome this, you can use browser developer tools’ debugger features to freeze the DOM state and interact with the options.

Steps to Make Hidden Options Visible:

Open Developer Tools: Press F12 or right-click and select Inspect.
Enable Debugging: Use features like “Turn on Debugger” or equivalent in your browser’s developer tools.
Perform Actions Quickly: Click on the drop-down and interact with it within the limited time frame (e.g., 5 seconds) before the DOM changes.
Inspect Elements: Once the debugger freezes the state, you can inspect and interact with the hidden elements.

Note: The exact steps and availability of debugger features may vary based on the browser. This method is primarily demonstrated using Chrome’s Developer Tools.

4.3. Selecting Options from Hidden Drop-Downs

After making the hidden options visible, you can interact with them using Selenium as you would with standard elements. This typically involves clicking on the drop-down to reveal options, then selecting the desired option based on its visible text or other attributes.

Example: Selecting an Option from a Hidden Drop-Down (Using Debugger)

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

public class HiddenDropDownExample {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the application (e.g., Orange HRM)
        driver.get("https://example.com/orangeHRM/login");

        // Perform login steps
        driver.findElement(By.id("username")).sendKeys("admin");
        driver.findElement(By.id("password")).sendKeys("admin123");
        driver.findElement(By.id("loginButton")).click();
        Thread.sleep(3000); // Wait for login to complete

        // Navigate to the "P" tab
        driver.findElement(By.id("pTab")).click();
        Thread.sleep(2000); // Wait for the page to load

        // Locate and click the hidden drop-down (e.g., Job Title)
        WebElement jobTitleDropDown = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle')]"));
        jobTitleDropDown.click();
        Thread.sleep(2000); // Wait for drop-down to open

        // Make options visible using Debugger manually:
        // Note: Automating the debugger feature isn't straightforward. It's recommended to use proper synchronization.

        // Select "Finance Manager" from the drop-down
        WebElement financeManagerOption = driver.findElement(By.xpath("//span[text()='Finance Manager']"));
        financeManagerOption.click();
        Thread.sleep(2000); // Pause to observe selection

        // Close the browser
        driver.quit();
    }
}

Alternative Approach Without Using Debugger:

Instead of relying on manual debugger interactions, you can automate the interaction by:

Clicking the Drop-Down: Reveal the hidden options.
Using Explicit Waits: Wait until the desired option becomes visible.
Selecting the Option: Click on the desired option once it’s available.

Example: Automating Hidden Drop-Down Selection

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

public class HiddenDropDownAutoExample {
    public static void main(String[] args) {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Initialize Explicit Wait
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the application (e.g., Orange HRM)
        driver.get("https://example.com/orangeHRM/login");

        // Perform login steps
        driver.findElement(By.id("username")).sendKeys("admin");
        driver.findElement(By.id("password")).sendKeys("admin123");
        driver.findElement(By.id("loginButton")).click();

        // Wait for login to complete and navigate to the "P" tab
        wait.until(ExpectedConditions.elementToBeClickable(By.id("pTab"))).click();

        // Locate and click the hidden drop-down (e.g., Job Title)
        WebElement jobTitleDropDown = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//button[contains(@class, 'dropdown-toggle')]")));
        jobTitleDropDown.click();

        // Wait for the desired option to become visible
        WebElement financeManagerOption = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[text()='Finance Manager']")));

        // Click on the desired option
        financeManagerOption.click();

        // Additional actions...

        // Close the browser
        driver.quit();
    }
}

Key Points:

Explicit Waits: Utilize WebDriverWait in combination with ExpectedConditions to handle dynamic content loading without manual intervention.
Dynamic XPaths: Craft XPaths that are resilient to changes in the DOM structure, avoiding reliance on attributes that may change at runtime.
Automation Over Manual Debugging: Whenever possible, automate interactions without relying on manual steps like using the debugger to freeze the DOM.

5. Best Practices

Use Explicit Waits Over Thread.sleep():

- Why?: Enhances synchronization and reduces test execution time.
- How?:

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.elementToBeClickable(By.id("elementID")));

Prefer Reliable Locators:
- Why?: Ensures consistency and reduces maintenance.
- How?:
  - Use By.id or By.name when available.
  - Use descriptive XPath or CSS selectors.
  - Avoid brittle locators that depend on dynamic attributes.

Handle Exceptions Gracefully:

- Why?: Prevents abrupt test failures and allows for better debugging.
- How?:

try {
    // Interaction code
} catch (NoSuchElementException e) {
    System.out.println("Element not found: " + e.getMessage());
}

Avoid Hardcoding Values:
- Why?: Enhances flexibility and reusability.
- How?:
  - Use variables or external data sources for input values.
  - Parameterize test scripts.
Maintain Clean and Readable Code:
- Why?: Facilitates easier maintenance and collaboration.
- How?:
  - Use descriptive variable and method names.
  - Comment complex logic or XPath expressions.
  - Organize code into reusable methods or Page Object Model (POM) structures.
Use Page Object Model (POM):
- Why?: Promotes reusability and separation of concerns.
- How?:
  - Create separate classes for each page.
  - Encapsulate element locators and interaction methods within page classes.
Regularly Update WebDriver and Browsers:
- Why?: Ensures compatibility and leverages the latest features and fixes.
Securely Handle Credentials:
- Why?: Prevents exposure of sensitive information.
- How?: Use environment variables or encrypted storage solutions.
Validate Actions:
- - Why?: Ensures that the intended actions (like selecting a checkbox) have been performed successfully.
  - How?:
```
assert checkbox.isSelected() : "Checkbox was not selected.";
```
Avoid Overcomplicating Locators:
- Why?: Simplifies maintenance and reduces errors.
- How?: Use the simplest locator that uniquely identifies an element.

6. Assignments

• Assignment 1: Handling Select Drop-Downs

Objective: Write Selenium scripts to interact with traditional select drop-downs by counting options, printing them, and selecting specific options.

Navigate to the Drop-Down Page:
- URL: https://example.com/testAutomationPractice.html
- Elements:
  - Country Drop-Down: <select id="country">
Count the Total Number of Options:
- Locate the country drop-down.
- Use the getOptions() method to retrieve all options.
- Print the total count to the console.
Print All Available Options:
- Iterate through the list of options.
- Print each option’s visible text to the console.
Select Specific Options:
- Select “France” by visible text.
- Select “Japan” by value.
- Select “United Kingdom” by index.

Submission: Provide the complete Selenium script with comments explaining each step.

Sample Skeleton:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;

public class Assignment1_SelectDropDown {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the drop-down page
        driver.get("https://example.com/testAutomationPractice.html");

        // Locate the country drop-down by ID
        WebElement countryDropDown = driver.findElement(By.id("country"));

        // Create a Select object
        Select selectCountry = new Select(countryDropDown);

        // 1. Count the total number of options
        List allOptions = selectCountry.getOptions();
        System.out.println("Total number of options: " + allOptions.size());

        // 2. Print all available options
        System.out.println("Available Countries:");
        for (WebElement option : allOptions) {
            System.out.println(option.getText());
        }

        // 3. Select specific options
        // Select by visible text
        selectCountry.selectByVisibleText("France");
        Thread.sleep(2000); // Pause to observe

        // Select by value
        selectCountry.selectByValue("jp"); // Assuming 'jp' is the value for Japan
        Thread.sleep(2000); // Pause to observe

        // Select by index
        selectCountry.selectByIndex(2); // Selecting the third option (0-based index)
        Thread.sleep(2000); // Pause to observe

        // Close the browser
        driver.quit();
    }
}

Notes:

Frame Identification: Replace “frame1”, “frame2”, and “frame3” with the actual name or id attributes of the frames.
Nested iFrame Switching: After switching to frame3, switch to the inner iFrame using its index (0 in this case).
Synchronization: Replace Thread.sleep() with explicit waits for better synchronization.

• Assignment 2: Handling Bootstrap Drop-Downs

Objective: Develop Selenium scripts to interact with Bootstrap-styled drop-downs by selecting single and multiple options.

Navigate to the Bootstrap Drop-Down Page:
- URL: https://example.com/bootstrapDropDown.html
- Elements:
  - Country Drop-Down: <button class="btn btn-secondary dropdown-toggle" ...>
  - Options: <a class="dropdown-item" href="#">Country Name</a>
Select a Single Option:
- Click the drop-down toggle to reveal options.
- Select “Java” by locating its option and clicking it.
Select Multiple Options:
- Re-open the drop-down.
- Select “Python” and “MySQL” by iterating through options and clicking desired ones.

Submission: Provide the complete Selenium script with detailed comments.

Sample Skeleton:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;

public class Assignment2_BootstrapDropDown {
    public static void main(String[] args) throws InterruptedException {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the Bootstrap drop-down page
        driver.get("https://example.com/bootstrapDropDown.html");

        // Locate the drop-down toggle button using XPath with partial class match
        WebElement dropDownToggle = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle')]"));

        // Click to open the drop-down
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to allow drop-down to open

        // Select a single option (e.g., "Java")
        WebElement javaOption = driver.findElement(By.xpath("//a[text()='Java']"));
        javaOption.click();
        Thread.sleep(2000); // Pause to observe selection

        // Re-open the drop-down to select multiple options
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to allow drop-down to open

        // Locate all options within the drop-down
        List allOptions = driver.findElements(By.xpath("//div[@class='dropdown-menu']//a"));

        // Desired options to select
        String[] optionsToSelect = {"Python", "MySQL"};

        // Iterate through all options and select desired ones
        for (WebElement option : allOptions) {
            String optionText = option.getText();
            for (String desiredOption : optionsToSelect) {
                if (optionText.equals(desiredOption)) {
                    option.click();
                    Thread.sleep(1000); // Pause between selections
                }
            }
        }

        // Close the drop-down
        dropDownToggle.click();
        Thread.sleep(2000); // Pause to observe selections

        // Close the browser
        driver.quit();
    }
}

Notes:

Locating Elements: Use XPath with partial matches (contains) to make locators more dynamic and resilient to changes.
Click Actions: First, click the drop-down toggle to reveal options, then click the desired option(s).
Synchronization: Incorporate Thread.sleep() judiciously or, preferably, use explicit waits to handle dynamic content loading.

• Assignment 3: Handling Hidden (Auto-Suggest) Drop-Downs

Objective: Create Selenium scripts to interact with hidden drop-downs by making options visible and selecting desired options.

Navigate to the Application (e.g., Orange HRM):
- URL: https://example.com/orangeHRM/login
Perform Login:
- Enter username and password.
- Click the login button.
Navigate to the “P” Tab:
- Click on the “P” tab to access forms containing hidden drop-downs.
Interact with Hidden Drop-Downs:
- Job Title Drop-Down:
  - Click to open the drop-down.
  - Wait for options to load.
  - Select “Finance Manager” by locating its option and clicking it.
Select Employment Status:
- Locate the employment status drop-down.
- Click to open and select desired options like “Freelance” or “Full-Time”.
Handle Multi-Select Drop-Down (e.g., Colors):
- Locate the multi-select drop-down.
- Click to open and select multiple options like “Red”, “Blue”, and “Green”.

Submission: Provide the complete Selenium script with detailed comments.

Sample Skeleton:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import java.time.Duration;
import java.util.List;

public class Assignment3_HiddenDropDowns {
    public static void main(String[] args) {
        // Set the path for ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");

        // Initialize WebDriver
        WebDriver driver = new ChromeDriver();

        // Initialize Explicit Wait
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

        // Maximize Browser Window
        driver.manage().window().maximize();

        // Navigate to the Orange HRM login page
        driver.get("https://example.com/orangeHRM/login");

        // Perform login
        driver.findElement(By.id("username")).sendKeys("admin");
        driver.findElement(By.id("password")).sendKeys("admin123");
        driver.findElement(By.id("loginButton")).click();

        // Wait for login to complete and navigate to the "P" tab
        wait.until(ExpectedConditions.elementToBeClickable(By.id("pTab"))).click();

        // ---- Interact with Job Title Hidden Drop-Down ----
        // Locate and click the Job Title drop-down
        WebElement jobTitleDropDown = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle') and @id='jobTitleDropdown']"));
        jobTitleDropDown.click();

        // Wait for options to become visible
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[text()='Finance Manager']")));

        // Select "Finance Manager"
        WebElement financeManagerOption = driver.findElement(By.xpath("//span[text()='Finance Manager']"));
        financeManagerOption.click();

        // ---- Interact with Employment Status Hidden Drop-Down ----
        // Locate and click the Employment Status drop-down
        WebElement employmentStatusDropDown = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle') and @id='employmentStatusDropdown']"));
        employmentStatusDropDown.click();

        // Wait for options to become visible
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[text()='Freelance']")));

        // Select "Freelance" and "Full-Time"
        WebElement freelanceOption = driver.findElement(By.xpath("//span[text()='Freelance']"));
        WebElement fullTimeOption = driver.findElement(By.xpath("//span[text()='Full-Time']"));
        freelanceOption.click();
        fullTimeOption.click();

        // ---- Interact with Multi-Select Drop-Down (Colors) ----
        // Locate and click the Colors multi-select drop-down
        WebElement colorsDropDown = driver.findElement(By.xpath("//button[contains(@class, 'dropdown-toggle') and @id='colorsDropdown']"));
        colorsDropDown.click();

        // Wait for options to become visible
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[text()='Red']")));

        // Select "Red", "Blue", and "Green"
        List colorOptions = driver.findElements(By.xpath("//div[@id='colorsDropdownMenu']//span"));

        for (WebElement color : colorOptions) {
            String colorText = color.getText();
            if (colorText.equals("Red") || colorText.equals("Blue") || colorText.equals("Green")) {
                color.click();
                // Optional: Add a short pause between selections
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }

        // Close the browser
        driver.quit();
    }
}

Key Points:

Explicit Waits: Utilize WebDriverWait to wait for elements to become interactable.
Dynamic XPaths: Craft XPaths that accurately target desired elements without relying on dynamic attributes.
Iterative Selection: Use loops to select multiple options efficiently.
Synchronization: Ensure proper synchronization between actions to handle dynamic content loading.

7. Conclusion

Handling drop-downs is a fundamental aspect of Selenium WebDriver automation. Mastery of these interactions ensures that your automation scripts can effectively manage user selections, leading to more reliable and efficient test executions.

Key Takeaways:

Understanding Drop-Down Types: Recognize the differences between select, Bootstrap, and hidden drop-downs to choose the appropriate handling method.
Select Class for Traditional Drop-Downs: Utilize the Select class for easy interaction with <select> elements, leveraging methods like selectByVisibleText, selectByValue, and selectByIndex.
Custom Handling for Bootstrap Drop-Downs: Employ clicking actions and dynamic locators (like XPath) to interact with Bootstrap-styled drop-downs.
Automating Hidden Drop-Downs: Use explicit waits and dynamic locators to interact with auto-suggest or hidden drop-downs without relying on manual debugger interventions.
Best Practices: Implement robust locator strategies, synchronization mechanisms, and clean coding practices to enhance script reliability and maintainability.

Next Steps:

Practice Assignments: Implement the provided assignments to reinforce your understanding of drop-down handling.
Explore Advanced Topics: Delve into handling dynamic elements, integrating Selenium with testing frameworks like TestNG or JUnit, and leveraging the Page Object Model (POM) for better code organization.
Continuous Learning: Stay updated with Selenium WebDriver’s latest features and best practices to build efficient and robust automation scripts.

Happy Automating!

Understanding the Software Defect/Bug Lifecycle and Status Workflow

Mastering the Software Testing Life Cycle (STLC) – Expert Tips and Tricks Revealed!

V-Model: A Development Process for Smarter Software

Software Development: Uncover the Benefits of Scrum Methodology

Spiral Model in Software Development Lifecycle

What is Waterfall Model in Software Development Lifecycle?

Levels of Software Testing in Software Engineering?

Manual Testing Tools in 2023 To Save Time and Increase Accuracy

39-Comprehensive-Guide: Maven Execution, Automation Scripts, Git Integration, and Jenkins Setup

38-Comprehensive-Guide: Maven Execution, Automation Scripts, and Git Integration

37-Setting-Up-Selenium-Grid-with-Docker

36-Integrating Selenium Grid

35-TestNG Grouping, ExtentReports Integration, and Handling Failed Test Executions

34-Data Driven Tests | Apache POI

33-Enhancing the Automation Framework with Logging and Cross-Browser Testing

32-Practical Implementation of the Automation Framework

14-Handling Drop-Downs in Selenium with Java

Table of Contents

1. Types of Drop-Downs

1.1. Select Drop-Down

1.2. Bootstrap Drop-Down

1.3. Hidden (Auto-Suggest) Drop-Downs

2. Handling Select Drop-Downs

2.1. Using the Select Class

2.2. Selecting Options

2.3. Counting and Printing Options

3. Handling Bootstrap Drop-Downs

3.1. Identifying Bootstrap Drop-Downs

3.2. Selecting Single and Multiple Options

4. Handling Hidden (Auto-Suggest) Drop-Downs

4.1. Identifying Hidden Drop-Downs

4.2. Making Options Visible Using Debugger

4.3. Selecting Options from Hidden Drop-Downs

5. Best Practices

6. Assignments

• Assignment 1: Handling Select Drop-Downs

• Assignment 2: Handling Bootstrap Drop-Downs

• Assignment 3: Handling Hidden (Auto-Suggest) Drop-Downs

7. Conclusion

Leave Comment

or cancel reply

Share Post

Similar Posts

25-TestNG Integration with Selenium WebDriver in Java

36-Integrating Selenium Grid

What is Automation Testing in Software Testing

30-Page Object Model (POM) in Selenium with TestNG

08-Selenium WebDriver Navigational and Window Handle Commands