How to Handle Bootstrap Dropdown in Selenium WebDriver
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.
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.
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.
HI, I am still not able to handle the accordion in selenium.
So could you please help me.
Hi Rahul,
Can you please elaborate on the issue which you are facing?
Hi,
Thanks for this article! I was stuck in Bootstrap drop-down now I am able to select my value.
Hi Parul,
Glad to know that my finding helped you. Please feel free to ask your doubts at my blog…:)
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.
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
Hi Can you help me with google drop down. In google there is a menu where you can select google drive, google calender, gmai and etc.. How do I select google calender from the menu?
Hi Ismail,
These apps on google page are lying on a frame and you need to switch to the corresponding frame then go ahead. Please refer this link for more info https://vistasadprojects.com/mukeshotwani-blogs-v2/handle-frames-in-selenium/
Hi Mukesh, it says no such frame. I don’t think it is frame…
// Below is where I am stuck at
driver.SwitchTo().Frame(elment);
driver.FindElement(By.XPath(“//span[text()=’$0′]”)).Click();
Thread.Sleep(3000);
Hi Ismail,
Switch frame using frame index instead of element and soon after frame switch, provide static wait of 2 sec and then proceed.
Nice article about handling the Bootstrap dropdown using Selenium Webdriver.
Hi Savithaa,
Very very thanks for you comments….:)
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
Hi Sudha,
In this case, you must refer this link https://vistasadprojects.com/mukeshotwani-blogs-v2/how-to-solve-stale-element-reference-exception-in-selenium-webdriver/
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?
Hi Vineet,
Using which web browser you have tried this?
I was doing it on Chrome
Hi Vinnet,
Try same with FF and check whether you are able to see those suggestions inside DOM
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.
Hi Aniket,
Could you please mention what exception you are getting?
Hi Mukesh,
What is InnerHTML?
Hi Raghu,
Please check this post https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Hi Mukesh, Thanks for this useful video on Bootstrap Drop Down List.
Hi Debanjan,
Happy to read from you.
Hi Mukesh, is it possible to save chrome browser console output to file?
Hi Vishwanath,
Not specifically chrome browser console but whole console.
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);
}
}
}
Hi Santosh,
This code is working fine for me. It is clicking correctly of JavaScript option from drop down menu
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.
Hi Priya,
It looks like browser related issue.
is their any way to solve it??
Hi Priya,
Please tell me Selenium and Web Browser details…
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
Thanks Shasshi 🙂 Keep in touch