December 16, 2019February 12, 2021 vibssingh

How to automate BootStrap DropDown using Selenium WebDriver

HOME

In the previous post, we have already seen How to Handle Dropdowns in Selenium WebDriver . In this post, we will see how to handle Bootstrap Dropdown using Selenium WebDriver.

What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

What is Responsive Web Design?

Responsive web design is about creating web sites, which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Bootstrap dropdowns and interactive dropdowns that are dynamically position and formed using list of ul and li html tags. To know more about Bootstrap, please click here

How to get all the options of a Bootstrap dropdown

Below is an example which will explain how to get all the options of a Bootstrap dropdown.

import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
 
import org.openqa.selenium.chrome.ChromeDriver;
public class BootStrapDemo {
        public static void main(String[] args) {
 System.setProperty("webdriver.chrome.driver","C:\\Users\\SingVi04\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");

          WebDriver driver= new ChromeDriver();
          driver.manage().window().maximize();
          driver.get("https://www.seleniumeasy.com/test/");
          driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

                // Clicking on Bootstrap Dropdown
               driver.findElement(By.xpath("//*[@id='navbar-brand-centered']/ul[1]/li[1]/a")).click(); 

                // Get the all WebElements inside the dropdown in List  
               List dropdown_list =  driver.findElements(By.xpath("//ul[contains(@class,'dropdown-menu')]//li//a"));

              // Printing the amount of WebElements inside the list
               System.out.println("The Options in the Dropdown are: " + dropdown_list.size());

              // Condition to get the WebElement for list
              for(int i=0; i<dropdown_list.size(); i++)
              {
                   // Printing All the options from the dropdown
                   System.out.println(dropdown_list.get(i).getText());
            }                                                                                       
      }
}

Output
The Options in the Dropdown are: 29
Simple Form Demo
Checkbox Demo
Radio Buttons Demo
Select Dropdown List
Input Form Submit
Ajax Form Submit
JQuery Select dropdown

Here,

1) Open a web page – https://www.seleniumeasy.com/test/
2) Click on BootStrap DropDown – Input Forms by using (“//*[@id=’navbar-brand-centered’]/ul[1]/li[1]/a”
3) Get the all WebElements inside the dropdown in List by using
(“//ul[contains(@class,’dropdown-menu’)]//li//a”)
4) Print all the options of DropDown using dropdown_list.get(i).getText()

How to select a particular option from Bootstrap dropdown

In the below example, there is a Bootstrap dropdown. I want to
Check if an element – Checkbox Demo is present in the dropdown or not.
If Yes, click on that option.

import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
 
public class BootStrapDemo {
        public static void main(String[] args) {

System.setProperty("webdriver.chrome.driver","C:\\Users\\SingVi04\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");

          WebDriver driver= new ChromeDriver();
          driver.manage().window().maximize();
          driver.get("https://www.seleniumeasy.com/test/");
          driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
 
                // Clicking on Bootstrap Dropdown
               driver.findElement(By.xpath("//*[@id='navbar-brand-centered']/ul[1]/li[1]/a")).click(); 
 
                // Get the all WebElements inside the dropdown in List  
               List dropdown_list =  driver.findElements(By.xpath("//ul[contains(@class,'dropdown-menu')]//li//a"));
 
              // Printing the amount of WebElements inside the list
               System.out.println("The Options in the Dropdown are: " + dropdown_list.size());
 
              // Condition to get the WebElement for list
              for(int i=0; i<dropdown_list.size(); i++)
              {
                   // Printing All the options from the dropdown
                   System.out.println(dropdown_list.get(i).getText());                 
// Checking the condition whether option in text "Checkbox Demo" is coming
 
          if(dropdown_list.get(i).getText().contains("Checkbox Demo"))
            {
                 // Clicking if text "Checkbox Demo" is there
                 dropdown_list.get(i).click();
              // Breaking the condition if the condition get satisfied
                 break;
          }
       }
   driver.quit();            
  }
}

OutPut
The Options in the Dropdown are: 29
Simple Form Demo
Checkbox Demo

This program can be re-written by using Enhanced for loop instead of For loop.

getText() can be replaced by getAttribute(“innerHTML”)

import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
 
public class BootStrapDemo {
        public static void main(String[] args) {
 System.setProperty("webdriver.chrome.driver","C:\\Users\\SingVi04\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");

          WebDriver driver= new ChromeDriver();
          driver.manage().window().maximize();
          driver.get("https://www.seleniumeasy.com/test/");
          driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
 
                // Clicking on Bootstrap Dropdown
               driver.findElement(By.xpath("//*[@id='navbar-brand-centered']/ul[1]/li[1]/a")).click(); 
 
                // Get the all WebElements inside the dropdown in List  
               List dropdown_list =  driver.findElements(By.xpath("//ul[contains(@class,'dropdown-menu')]//li//a"));
 
              // Printing the amount of WebElements inside the list
               System.out.println("The Options in the Dropdown are: " + dropdown_list.size());
 
              // Condition to get the WebElement using Enhanced For loop
 
               for(WebElement element:dropdown_list)
 
              {
                   // Printing All the options from the dropdown
                   System.out.println(element.getAttribute("innerHTML"));             
 
                  // Checking the condition whether option in text "Checkbox Demo" is coming
       if(element.getAttribute("innerHTML").contains("Checkbox Demo")) 
            {
                 // Clicking if text "Checkbox Demo" is there
                 element.click();
              // Breaking the condition if the condition get satisfied
                 break;
          }
       }
   driver.quit();            
  }
}

July 9, 2019March 23, 2023 vibssingh

How to Select value from Drop down list or perform Multiple Selection Operations in Selenium WebDriver

HOME

In the previous tutorial, it is explained how to automate Checkbox in Selenium. In this tutorial, we will learn how to handle Drop Down & Multiple Select Operations. DropDown & Multiple Select Operations work together and almost the same way. The only difference between these two deselecting statements & multiple selections is not allowed on DropDown.

To identify DropDown or multi-select list on a web page, we can use any one of the options like id, name, xpath, css, etc.

To perform any operation on DropDown, we need to do 2 things:-

1) Selenium WebDrivers provides a class called “Select “class that is used to automate dropdown, and it is imported from the package:

org.openqa.selenium.support.ui.Select

2) Create a new Select object of class Select.

Select oSelect = new Select());

We can access all the methods residing inside the SELECT class by typing oSelect + dot.

Different Select Commands

Before we discuss various select commands, we should know how the HTML code of DropDown actually looks

1) selectByVisibleText

selectByVisibleText(String arg0): void – Choose the option given under any dropdowns and multiple selection boxes with selectByVisibleText method. It takes a parameter of String that is one of the Value of Select element and it returns nothing.

To select the text Blue

Select mselect = new Select(driver.findElement(By.id("oldSelectMenu")));
mselect.selectByVisibleText("Blue");

2) selectByIndex

selectByIndex(int arg0): void – It is almost the same as selectByVisibleText but the only difference here is that we provide the index number of the option here rather than the option text. It takes a parameter of int which is the index value of the Select element and it returns nothing.

To select the value 6 using index

Select bselect = new Select(driver.findElement(By.id("oldSelectMenu")));
bselect.selectByIndex(6);

3) selectByValue

selectByValue(String arg0): void – It selects the option of the value. It takes a parameter of String that is of the value of the Select element and it returns nothing.

To select the value of Magenta

Select yselect = new Select(driver.findElement(By.id("oldSelectMenu")));
yselect.selectByValue("9");

Let us explain this with the help of an example.

1) Launch a new Browser and open “https://demoqa.com/select-menu”
2) Print the list of options in the dropdown.
3) Select option ‘Blue’ (Use selectByVisibleText)
4) Select option ‘6’ (Use selectByIndex)
5) Select option ‘9’ (Use selectByValue)
6) Close the browser

The complete program looks like as shown below:

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.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.List;
import java.util.concurrent.TimeUnit;

public class DropDown_Demo {

    public static void main(String[] args)  {

        System.setProperty("webdriver.gecko.driver", "C:\\Users\\Vibha\\Software\\geckodriver-v0.31.0-win64\\geckodriver.exe");

        // Initiate Firefox browser
        WebDriver driver = new FirefoxDriver();

        // Maximize the browser
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

        // Pass application url
        driver.get("https://demoqa.com/select-menu");

        //Get the list of options from dropdown

        Select s = new Select(driver.findElement(By.id("oldSelectMenu")));
        List<WebElement> listElements = s.getOptions();
        System.out.println("List of options in dropdown:" );
        for(WebElement options: listElements)
            System.out.println(options.getText());

        // Select option 'Blue' (Use selectByVisibleText)
        System.out.println("Select the Option by Text - Blue");
        Select mselect = new Select(driver.findElement(By.id("oldSelectMenu")));
        mselect.selectByVisibleText("Blue");

        // Select option '6' (Use selectByIndex), select White
        System.out.println("Select the Option by Index 6 - White");
        Select bselect = new Select(driver.findElement(By.id("oldSelectMenu")));
        bselect.selectByIndex(6);

        // Select option 'Magenta' (Use selectByValue)
        System.out.println("Select the Option by selectByValue 6 - Magenta");
        Select yselect = new Select(driver.findElement(By.id("oldSelectMenu")));
        yselect.selectByValue("9");

        // close the browser
        driver.close();
    }

}

The output of the above program is

DeSelect Methods

The way we select different values of DropDown and Multi Select, we can deselect the options similarly.

1) deselectAll

deselectAll( ): void – Clear all selected entries. This is only valid when the SELECT supports multiple selections.

Syntax:

oSelect.deselectAll;

2) deselectByIndex

deselectByIndex(int arg0): void –Deselect the option at the given index.

Syntax:

oSelect.deselectByIndex;

3) deselectByValue

deselectByValue(String arg0): void –Deselect all options that have a value matching the argument.

Syntax:

 oSelect.deselectByValue;

4) deselectByVisibleText

deselectByVisibleText(String arg0): void – Deselect all options that display text matching the argument.

Syntax:

oSelect.deselectByVisibleText

Below is an example of how to operate on multi-selection options.

1) Launch a new Browser and open “https://demoqa.com/select-menu”
2) Print the list of options in the dropdown.
3) Select options ‘Volvo’, ‘Opel’ and ‘audi’.
4) Print and select all the options for the selected Multiple selection list.
5) Deselect option audi.
6) Deselect all options
7) Close the browser

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;

import java.util.List;
import java.util.concurrent.TimeUnit;

public class MultiSelect_Demo {
    public static void main(String[] args)  {

        System.setProperty("webdriver.gecko.driver", "C:\\Users\\Vibha\\Software\\geckodriver-v0.31.0-win64\\geckodriver.exe");

        // Initiate Firefox browser
        WebDriver driver = new FirefoxDriver();

        // Maximize the browser
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

        // Pass application url
        driver.get("https://demoqa.com/select-menu");

        //Get the list of options from dropdown
        Select select = new Select(driver.findElement(By.id("cars")));
        List<WebElement> listElements = select.getOptions();
        System.out.println("List of options in dropdown:" );
        for(WebElement options: listElements)
            System.out.println(options.getText());

        System.out.println("Select the Option by Text - Volvo");
        Select mselect = new Select(driver.findElement(By.id("cars")));
        mselect.selectByVisibleText("Volvo");

        System.out.println("Select the Option by Index 2 - Opel");
        Select bselect = new Select(driver.findElement(By.id("cars")));
        bselect.selectByIndex(2);

        // Select option 'audi' (Use selectByValue)
        System.out.println("Select the Option by selectByValue - audi");
        Select yselect = new Select(driver.findElement(By.id("cars")));
        yselect.selectByValue("audi");

        //Get the list of selected options
        System.out.println("The selected values in the dropdown options are -");

        List<WebElement> selectedOptions = select.getAllSelectedOptions();

        for(WebElement selectedOption: selectedOptions)
            System.out.println(selectedOption.getText());

        // Deselect the value "Audi" by Value
        System.out.println("DeSelect option Audi by Value");
        select.deselectByValue("audi");

        // Deselect all
        select.deselectAll();

        // close the browser
         driver.close();
    }

}

The output of the above program is

That’s it! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!