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.
</div>