Wednesday 25 April 2018

How to Handle Bootstrap Dropdown in Selenium WebDriver

In our previous post we have already seen How to Handle Dropdowns in Selenium WebDriver . In this post we will see how to handle Bootsrap Dropdown.
Bootstrap dropdowns and interactive dropdowns which are dynamically positioned and formed using list of <ul> and <li> html tags.

Below is the simple example of Bootstrap Dropdown-

https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Video Tutorial - 
 

Let us see sample selenium code -

package test;

import java.util.List;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class BootstrapDropDown {
 
 ChromeDriver driver;
 
 @Before
 public  void setup(){
   
  System.setProperty("webdriver.chrome.driver", "C:\\Softwares\\chromedriver_win32\\chromedriver.exe");
  
      driver=new ChromeDriver();

       driver.manage().window().maximize();
  
        // start the application
  
       driver.get("https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp");
  
 }
 
 @Test
 public void testBootStrap() throws Exception
 {
        // 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 test']//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
  
    }
 
@After
public void tearDown()
{ 
 driver.quit();
}

}

4 comments:

  1. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    HTML5 courses in chennai

    ReplyDelete
  2. You have explained it very well on your blog and this is how I can create awesome dropdown with bootstrap, thanks. https://www.technologist360.com/

    ReplyDelete
  3. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    Bootstrap Training in Chennai

    ReplyDelete
  4. Hi Anuja! Thanks for sharing useful post. Your help is much appreciated. I am trying to automate my Instagram. I have a problem while storing links of post in list using find elements but the size is varying when the page is scrolled it increases when page is scrolled. How to handle this scenario? This will be helpful if you would suggest. Thanks in advance!

    ReplyDelete