Automation

Selenium WebDriver tutorial Step by Step

You are here: Home / Basic Selenium / How to Handle Bootstrap Dropdown in Selenium WebDriver

How to Handle Bootstrap Dropdown in Selenium WebDriver

by 34 Comments

handle BootStrap dropdown in Selenium

Have u ever heard about handle Bootstrap dropdown in Selenium? If no, then today you will learn 2 new things today.

First one – What is bootstrap dropdown

The second one- How to Select values from the bootstrap dropdown.

 

We already have discussed how to work with traditional dropdowns and we have also explored multiple ways to handle the same but today we will see how to work with BootStrap dropdown.

The bootstrap dropdown is an enhanced part of the dropdown where you will deal with UL, LI, DIV, SPAN etc tag of HTML.

 

An example of Bootstrap dropdown is below.

handle BootStrap dropdown in Selenium

 

To handle this kind of drop-down we have to use findElements method and then we can run a for loop to get specific elements.

           Handle BootStrap Login/Popup window in Selenium

YouTube video for Handle Bootstrap Dropdown in Selenium

 

Complete program to handle bootstrap dropdown in Selenium Webdriver

 

import java.util.List;

import org.openqa.selenium.By;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.firefox.FirefoxDriver;



public class BootStrap {


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


       // Start firefox browser

       FirefoxDriver driver = new FirefoxDriver();


       // start the application

      driver.get("http://seleniumpractise.blogspot.in/2016/08/bootstrap-dropdown-example-for-selenium.html");


       // First we have to click on menu item then only dropdown items will display

      driver.findElement(By.xpath(".//*[@id='menu1']")).click();



       // adding 2 seconds wait to avoid Sync issue

       Thread.sleep(2000);



       // Dropdown items are coming in <a> tag so below xpath will get all

       // elements and findElements will return list of WebElements

       List<WebElement> list = driver.findElementsByXPath("//ul[@class='dropdown-menu']//li/a");



       // We are using enhanced for loop to get the elements

       for (WebElement ele : list)

       {

          // for every elements it will print the name using innerHTML

          System.out.println("Values " + ele.getAttribute("innerHTML"));



          // Here we will verify if link (item) is equal to Java Script

          if (ele.getAttribute("innerHTML").contains("JavaScript")) {

             // if yes then click on link (iteam)

             ele.click();



             // break the loop or come out of loop

             break;

          }

       }

       // here you can write rest piece of code

   }

}

 

You can also select the values directly using xpath  and CSS but that approach is not recommended because direct XPath might change.

In the above approach, we can pass a parameter directly so based on test data it will select the values from the list.

Hope you liked the above article if yes then comment below and share it with your friends.

Reader Interactions

Comments

  2. Parul Chaudhary says

    Hi,

    Thanks for this article! I was stuck in Bootstrap drop-down now I am able to select my value.

    Reply

  3. Praveen Kumar Gubendran says

    Hi Mukesh,

    Thanks for valuable post, I have select the dropdown values using index number instead of values, because the dropdown values may get change based on data availbility, could you please help me on this.

    Thanks
    Praveen.

    Reply

    • Mukesh Otwani says

      Hi Praveen,

      In my above post, i’ve used xpath which helps me to get actual text but in your case you can use index of array to select option irrespective of visible text

      Reply

  5. sudha says

    Hi Mukesh,
    I just changed the xpath in ur above code for my project, am getting staleelementreference exception.
    My xpath is //div[@class=’selectize-dropdown-content’]//div”
    I think i’ve no problem with my xpath. could you please help me to sort it out
    Thanks , sudha

    Reply

  6. Vineet says

    Hi Mukesh,

    I am struggling with a bootstrap search box which generates a list of suggestions (typeheads) after I type in the search box. This element is basically a Type-in search box. Type in the box and you get a list of suggestions and then you have to select one of the suggested options. I am not able to handle that suggestion list. How do I select any value from that list?

    Reply

  7. Aniket says

    Hello Mukesh,
    I tried automating a website for sign in (iFrame) including email ,password and login button. I can enter fields for email and password (using script) but not able to click on Log in Button and forget password link.
    Please note that Login button and forget password link are included in iFrame.
    So what would be the reason for not able to perform mentioned operation ?

    Thanks in advance.

    Reply

  11. santosh patange says

    This bellow Code, I am trying to click on a specific value from a bootstrap drop-down list. I can not do, please help me sir

    package practice;

    import java.util.List;

    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.firefox.FirefoxDriver;

    public class Bootstrap {

    public static void main(String[] args) {

    WebDriver driver =new FirefoxDriver();
    driver.manage().window().maximize();

    driver.get(“http://seleniumpractise.blogspot.in/2016/08/bootstrap-dropdown-example-for-selenium.html”);

    driver.findElement(By.xpath(“.//*[@id=’menu1′]”)).click();

    List dd_menu= driver.findElements(By.xpath(“//ul[@class=’dropdown-menu’]//li/a”));

    for(int i=0;i<dd_menu.size();i++)
    {
    WebElement element =dd_menu.get(i);

    String innerhtml=element.getAttribute("innerHTML");

    if(innerhtml.contentEquals("JavaScript"))
    {
    element.click();
    break;
    }

    System.out.println("valur from drop is"+innerhtml);

    }

    }

    }

    Reply

      • priya says

        its not clicking in my code…i wrote exactly the same code:
        List dd_menu= driver.findElements(By.xpath(“//[@class=’dropdown-menu’]/li/a”));
        for(int i=0;i<dd_menu.size();i++)
        {
        WebElement element= dd_menu.get(i);
        String innerhtml=element.getAttribute("innerHTML");
        if(innerhtml.contentEquals("LATUR"))
        {
        element.click();
        break;
        }
        System.out.println("values from dropdown is ——–" +innerhtml);

        }
        but it giving the following error
        Error communicating with the remote browser. It may have died.

        Reply

  12. Shashi says

    Hi Mukesh,
    Good article and I was stuck with finding element in Boostrap list, Later I verified your blog got solution and able to progress my Automation scripting.
    Thanks a lot
    Shashi

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.