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

Question

我正在尝试将脚本与PHP facebook / webdriver 1.4.1和selenium 3.5放在一起，该脚本将自动化向我们选择的运输公司（TNT）发出在线订单的任务，因为它们不提供任何其他api来实现此功能，并且每次手动操作都非常乏味。

我的脚本工作正常，但“选择框”除外，这些选择框是用一堆<ul>和<li>生成的jscript，我无法选择所需的值。

这是选择的一个例子

 <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> 

<li> id是自动生成的，并且在页面的其他选择框中重复，因此我无法$driver->findElement(WebDriverBy::id('6'))->click(); 。

我无法选择正常方式。

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

因为选择是隐藏的style="display: none;且xpath都没有。

我希望能够直接选择一个值，例如data-val="2330"但要考虑到其他3个具有相同<li> id和data-val值，但具有不同<span>和<ul> ID。

谁能帮我这个？ 提前致谢。

编辑：

我像这样完成使用它：

 //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(); 

再次感谢@DAN在下面的答案中使用xPath sintax指向正确的方向。

Answer 1

首先，具有重复ID的元素不是有效的HTML，并且由每个浏览器决定如何处理非法页面元素。 据我所知，大多数浏览器将允许多个具有重复ID的DOM元素，但是将来可能会改变。

其次，您可以通过XPath选择您感兴趣的元素。 例如，XPath (//*[@id = 'someID'])[1]选择ID为someID的第一个元素。

但是，正如您提到的<ul>元素具有不同的ID一样，您可以使用XPath（例如//ul[@id = 'latestCollectionTimeSelectBoxItOptions']/li[@data-val = '2230']来选择元素。

最后，您提到列表项不可单击，因为它们是隐藏的，大概是因为它们是下拉菜单的一部分。

在这种情况下，您需要首先单击下拉列表以将其打开，然后查找并单击相应的列表项。

希望这可以帮助。

Answer 2

您只需单击要选择的选项。

我之所以使用xpath，是因为我想从给定的选择框中访问该选项。

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

$optionFromSelectBox->click();