selecting value from "bootstrap dropdown" in selenium webdriver?

Question

Tool: Selenium Webdriver

I am trying to click on a specific value from a drop-down list. I can do the same via following:

HTML snippet: via "Select" attribute

<select class="regionpicker-state span3 ng-valid ng-dirty" ng-change="updateSelection()" ng-options="a.code as a.name for a in state" ng-model="selectedState">
  <option class="" value="">Select</option>
  <option value="0">Karnataka</option>
  <option value="1">Tamil Nadu</option>
</select>

Option 1 for automation: via "Select" attribute

 @FindBy(xpath = ".//*[@id='organization_chosen']/a/span")
   public static WebElement organizationExpand;
 new Select(organizationExpand).selectByVisibleText("abc");

But, the above "option 1" code works if the code has "Select" attribute.

What if the devs have coded dropdowns by using "bootstrap dropdown" approach?

HTML snippet: via "bootstrap dropdown" approach:

<select id="organization" class="focused" data-placeholder="Choose a organization..." name="organization" style="display: none;">
   <div id="organization_chosen" class="chosen-container chosen-container-single chosen-container-active" style="width: 220px;" title="">
      <a class="chosen-single chosen-default" tabindex="-1">
      <div class="chosen-drop">
         <div class="chosen-search">
         <ul class="chosen-results">
           <li class="active-result" data-option-array-index="1" style="">Demo</li>
           <li class="active-result" data-option-array-index="2" style="">abc</li>
           <li class="active-result" data-option-array-index="3" style="">def</li>
           <li class="active-result" data-option-array-index="4" style="">xyz</li>
         </ul>

From what i see from the html snippet, you can directly open the underlying drop down list by clicking on the inverted triangle. then identify the li element by directly hitting the xpath. — Mrunal Gosar
– Mrunal Gosar, Commented Jun 3, 2014 at 15:13

Yagnesh Shah · Accepted Answer · 2014-06-05 06:08:23Z

Here is the solution I found for bootstrap dropdown menu:

@FindBy(xpath =".//*[@id='organizationType_chosen']/a/span") //this xpath is referring the path where we can click on expanding the drop-down
    public static WebElement orgTypeExpand;
@FindBy(xpath =".//*[@id='organizationType_chosen']/div/ul") //this xpath is referring to exact location to the <ul> attribute which will be visible in HTML DOM structure only after you expand the drop-down
    public static WebElement orgTypeDropDown;

public static void organizationTypeBootStrapDropDownValueSelection(String organizationTypeValue)//consider parameter passed for 'organizationTypeValue' is 'abc' value from drop-down
{
    int flag=0;
    orgTypeExpand.click();
    //Do a implicit wait here until the dropdown menu expands as the HTML Dom structure dynamically gets updated with each dropdown values once the drop-down expands. 

    List<WebElement> organizationType = orgTypeDropDown.findElements(By.className("active-result")); //retrieve all values from the drop-down. Note: This pageobject 'orgTypeDropDown' has slight different xpath than 'orgTypeExpand'
    flag=0;
    for (WebElement orgType : organizationType) //For each value retrieved check if it matches with our expected value to be clicked 'organizationTypeValue'
    {   
        if (orgType.getText().equals(organizationTypeValue)) 
        {
            orgType.click();
            flag=1;
            break;
        }
    }
    Assert.assertTrue(flag==1, "OrganizationType '" + organizationTypeValue + "' passed as parameter is a mismatch with values available in organization Type drop-down...");//This will assist you in making sure if the drop-down value was clicked or not. It fails if the value is not selected & stops the script execution
}

Mike Laren · Accepted Answer · 2015-06-17 03:37:05Z

1

Well you can evaluate JavaScript on the page which means you can run jQuery the the page as well.

I have implemented similar solution within test complete. Sure it can be done for you. Try something like below.

selenium.getEval("var window = this.browserbot.getUserWindow();window.jQuery('#organizationType_chosen').selectpicker('val', '1')");

Refer to http://silviomoreto.github.io/bootstrap-select/ for useful select picker api

edited Jun 17, 2015 at 3:37

Mike Laren

8,23618 gold badges53 silver badges72 bronze badges

answered Jun 17, 2015 at 3:31

Ranjit Kancharla

111 bronze badge

Comments

Altair7852 · Accepted Answer · 2015-08-17 01:51:11Z

0

The following works as well (based on @Ranjit Kancharla 's idea, using PhantomJS web driver):

org.openqa.selenium.support.events.EventFiringWebDriver driver = ...
driver.executeScript("$('#" + id +"').selectpicker('val', '" + value + "');");

id - id of the "select" element;value - selected value from the "option" element

answered Aug 17, 2015 at 1:51

Altair7852

1,4981 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

selecting value from "bootstrap dropdown" in selenium webdriver?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related