从Facebook的硒和PHP WebDriver的下拉菜单中选择选项

Question

I'm trying to put together a script with PHP facebook/webdriver 1.4.1 and selenium 3.5 that will automate the task of giving online orders to our selected transport company (TNT) because they do not provide any rest api to fulfill this function and it is really tedious do it every singel time by hand.

My script works fine except for the Selectboxes, that are jscript generated with a bunch of <ul> and <li> , and I can not select the desired values.

This is an example of the select

 <td> <select id="latestCollectionTime" name="latestCollectionTime" style="display: none;"> <option value="" selected="selected"> selecteer... </option> <option value="2230"> 22:30 </option> <option value="2245"> 22:45 </option> <option value="2300"> 23:00 </option> <option value="2315"> 23:15 </option> <option value="2330"> 23:30 </option> <option value="2345"> 23:45 </option> </select> <span id="latestCollectionTime-dropdown" class="selectboxit-container"> <span id="latestCollectionTimeSelectBoxIt" class="selectboxit dropdown-menu" style="" name="latestCollectionTime" tabindex="0" unselectable="on" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="latestCollectionTimeSelectBoxItOptions" aria-activedescendant="0" aria-label="" aria-live="assertive"> <i id="latestCollectionTimeSelectBoxItDefaultIcon" class="selectboxit-default-icon selectboxit-option-icon" unselectable="on" style="margin-top: 5.5px;"> </i> <span id="latestCollectionTimeSelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" style="line-height: 22px; max-width: 88px;"> selecteer... </span> <span id="latestCollectionTimeSelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on" style="height: 22px;"> <i id="latestCollectionTimeSelectBoxItArrow" class="selectboxit-arrow caret" unselectable="on" style="margin-top: 7px;"> </i> </span> </span> <ul id="latestCollectionTimeSelectBoxItOptions" class="selectboxit-options" tabindex="-1" role="listbox" aria-hidden="true" style="max-height: 198px; top: auto; display: none;"> <li id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>selecteer...</a> </li> <li id="1" data-val="2230" data-disabled="false" class="selectboxit-option" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>22:30</a> </li> <li id="2" data-val="2245" data-disabled="false" class="selectboxit-option" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>22:45</a> </li> <li id="3" data-val="2300" data-disabled="false" class="selectboxit-option" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:00</a> </li> <li id="4" data-val="2315" data-disabled="false" class="selectboxit-option" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:15</a> </li> <li id="5" data-val="2330" data-disabled="false" class="selectboxit-option" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:30</a> </li> <li id="6" data-val="2345" data-disabled="false" class="selectboxit-option selectboxit-option-last" style="" role="option"> <a class="selectboxit-option-anchor"><i class="selectboxit-option-icon " style="margin-top: 3.5px;"></i>23:45</a> </li> </ul> </span> </td> 

The <li> id is automatic generated, and duplicated in other selectboxes in the page, so i can't $driver->findElement(WebDriverBy::id('6'))->click(); .

I can't select the normal way.

 $driver->findElement( WebDriverBy::id('latestCollectionTime') ) ->findElement( WebDriverBy::cssSelector("option[value='11']") ) ->click(); 

because the select is hidden style="display: none; and neither with the xpath.

I would like to be able to directly select a value like data-val="2330" but taking in consideration that are other 3 selectboxes with the same <li> ids and data-val values, but with diferent <span> and <ul> ids .

Can anyone help me with this? Thanks in advance.

EDIT:

I finish using it like this:

 //make the dropdow list visible. $driver->findElement(WebDriverBy::id('latestCollectionTimeSelectBoxIt'))->click(); // to click in the desired option. $driver->findElement(WebDriverBy::xPath('//*[@id = "latestCollectionTimeSelectBoxItOptions"]/li[@data-val = "'.$desired_value.'"]'))->click(); 

Thanks again to @DAN in the answer below for pointing me in the right direction with the xPath sintax.

Answer 1

Firstly, elements with duplicate ids are not valid HTML, and it is up to each browser to determine what they will do with the illegal page elements. As far as I know, most browsers will allow multiple DOM elements with duplicate IDs, but this may change in the future.

Secondly, you can select the element you're interested in via XPath. For example, the XPath (//*[@id = 'someID'])[1] selects the first element with an id of someID .

However, as you mentioned that the <ul> elements have different IDs, you can use XPath such as //ul[@id = 'latestCollectionTimeSelectBoxItOptions']/li[@data-val = '2230'] to select the element.

Finally, you mention that the list items are not clickable because they are hidden, presumably because they're part of a dropdown menu.

In this case, you need to firstly click on the dropdown to open it, then find and click on the appropriate list item.

Hope this helps.

Answer 2

You only have to click on the option you want to choose.

I am using xpath for that because i want to access the option from the given select box.

$optionFromSelectBox = $driver->findElement(
    WebDriverBy::xpath(
      '//select[@id=\'latestCollectionTimeSe‌​lectBoxIt\']//option[2]'
    )
);

$optionFromSelectBox->click();