I am using Selenium to try and select an element in a bootstrap dropdown menu, but there is no button element present. The website uses all JavaScript to enable the dropdown. The HTML code for the Bootstrap dropdown is shown below.

<div class="dropdown">
    <a class="no-disable dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-list"></span>
        <br>
        <span class="add-item-text text-uppercase">Batch Management</span>
    </a>
    <ul class="dropdown-menu text-uppercase">
        <li>
            <a href="/website/administration/foo" class="full-width text-uppercase" style="padding:4px 0px;">Foo</a>
        </li>
        <li>
            <a href="/website/administration/foo2" class="full-width text-uppercase" style="padding:4px 0px;">Foo 2</a>
        </li>
        <li>
            <a href="/website/administration/foo3" class="full-width text-uppercase" style="padding:4px 0px;">Foo 3</a>
        </li>
     </ul>
  </div>

The exception I am getting is an ElementNotInteractableException for the next element (the item in the list) which leads me to believe that Selenium is clicking on the dropdown menu (because it is clickable), however, it is not ready to actually dropdown the menu, and then when it tries to click the member of the dropdown it fails because the menu never actually opened.

I have tried clicking the anchor element and both the span elements, and none of them reliably open the dropdown. I have tried waiting for the element to be clickable for all of these solutions, as well, and none reliably work. The only way I can get it to open the dropdown is by using Thread.sleep() which I would prefer to avoid. So, if anyone has any ideas for what explicit wait I need to use here, I am all ears.

Note: I can post the JavaScript files, but they are horribly organized (zero line breaks anywhere), so I won't include them right now, but if anyone wants to try and sift through them, I can post them. I am not that familiar with JavaScript, so I don't even know if they are that relevant to the problem

Edit: After some further research, it looks like there are some jQuery events that trigger after certain events. If I could use selenium to trigger these events, I think that would work, but I am even less familiar with jQuery than just Javascript. The relevant events are posted below enter image description here

Edit 2: I also thought it would be useful for you guys to see Bootstrap's documentation. So here it is

Here is the example that interacts with dropdowns on the bootstrap documentation page you refer to.

public static void main(String[] args) throws InterruptedException {
    System.setProperty("webdriver.chrome.driver", "E:/Dev/WebDrivers/chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    driver.get("https://getbootstrap.com/docs/3.3/javascript/#dropdowns");
    WebElement ddLi = driver.findElement(By.xpath("//li[a[@id='drop4']]"));
    ddLi.click();
    Thread.sleep(2000);
    List<WebElement> ddItems = ddLi.findElements(By.xpath(".//a"));
    for(WebElement ddItem: ddItems){
        System.out.println("isVisible: " + ddItem.isDisplayed() +"; Text: " + ddItem.getText());
    }
    // click the last item in the list
    ddItems.get(ddItems.size() - 1).click();
    driver.quit();
}

This code does not produce any errors. The output is:

isVisible: true; Text: Dropdown
isVisible: true; Text: Action
isVisible: true; Text: Another action
isVisible: true; Text: Something else here
isVisible: true; Text: Separated link

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.