CODEWITHSUNDEEP
javascripthtmlseleniumselenium-webdriver
oe a
oe a

Reputation: 2280

select elements in dropdown marked as a list

I am trying to loop through all elements inside of a dropdown box...however unlike a typical html box with values, these are all UL/LI's. Here is what the html looks like:

<ul class="ui-selectmenu-menu ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom jfpw-select ui-selectmenu-open" aria-hidden="false" role="listbox" aria-labelledby="currentStatementsDate-button" id="currentStatementsDate-menu" aria-activedescendant="currentStatementDateOptions" tabindex="0" style="width: 328px; height: 160px; float: left; overflow: hidden; outline: none; z-index: 0; top: 0px; left: 0px; position: relative; border-style: none;">
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">Unbilled</span></li>
   <li role="option" tabindex="-1" aria-selected="true" id="currentStatementDateOptions" class="ui-selectmenu-item-selected"><span class="ui-selectmenu-item-header">September 10, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">August 12, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">July 10, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class=""><span class="ui-selectmenu-item-header">June 10, 2015</span></li>
   <li role="option" tabindex="-1" aria-selected="false" id="currentStatementDateOptions" class="ui-corner-bottom"><span class="ui-selectmenu-item-header">May 12, 2015</span></li>
</ul>

I need to somehow select each of the list items...but since these are different from a typical dropdown I am not sure.

I'm guessing I need to change the attributes (aria-selected) and class (the selected) for each interation but am not sure how to proceed since they all have the same id.

Upvotes: 2

Views: 474

Answers (3)

JeffC
JeffC

Reputation: 25597

What you want to do is to get the collection of LIs and loop through the collection executing .click() (and whatever else) on each. This can be easily accomplished using the code below.

driver.findElement(By.id("currentStatementsDate-menu")).click();
List<WebElement> options = driver.findElements(By.cssSelector("#currentStatementsDate-menu > li"));
for (WebElement option : options)
{
    option.click();
    // do something here? validations, etc.
}

The CSS selector #currentStatementsDate-menu > li reads find an element with an ID (#) currentStatementsDate-menu that has children (>) that are LIs.

Read more about CSS selectors.

EDIT 1: I bet you have to click the "dropdown" first before you can click the elements inside. Added the initial click.

Upvotes: 1

Saifur
Saifur

Reputation: 16201

I would find the List of the WebElements and use nt-child with increasing the nth-child() function

#currentStatementsDate-menu>li:nth-child(1)

Something like this:

By css = By.cssSelector("#currentStatementsDate-menu>li");
List<WebElement> elements = driver.findElements(css);

for (int i = 0; i < elements.size(); i++) {
    By by = By.cssSelector(String.format("#currentStatementsDate-menu>li:nth-child(%s)", i+1));
    driver.findElement(by).click();
}

Upvotes: 1

Hieu Le
Hieu Le

Reputation: 728

Perhaps you can use jquery to loop through the elements:

var test = $("#currentStatementsDate-menu").children().each(function() {
    var li_element = $(this);
    console.log(li_element);
});

Also, I am not sure if having the li elements with all the same ids is correct.

Upvotes: 0

Related Questions