使用 Selenium Webdriver 从 <span> 类型的下拉框中选择一个值答案

【问题标题】：Selecting a value from a <span> type dropdown box with Selenium Webdriver使用 Selenium Webdriver 从 <span> 类型的下拉框中选择一个值
【发布时间】：2014-07-05 01:49:58
【问题描述】：

我需要从以下代码中选择不同测试用例中的三个值（1 列单元、2 列单元或 3 列单元）之一：

  <div class="addUnits">
   <span id="addDropdown" class="addDropdown">Add unit to layout</span>
   <ul id="addUnitCombo" style="display: none;">
      <li>
         <a class="addColumnUnit addOneCol" href="">1 column unit</a>
      </li>
      <li>
         <a class="addColumnUnit addTwoCol" href="">2 columns unit</a>
      </li>
      <li>
         <a class="addColumnUnit addThreeCol" href="">3 columns unit</a>
      </li>
   </ul>
</div>

我了解如何检索值并从 Select 中单击它们，但这是一个 Span，因此不允许这样做。它不是传统的下拉框，只有在

<span id="addDropdown" class="addDropdown">Add unit to layout</span>

...悬停在上面。

知道如何选择并单击其他值之一吗？

【问题讨论】：

您使用的是哪种 Selenium 绑定 - 例如 Ruby、Python 等？
您可以通过 XPath 使用 find element 选择任何元素（语法取决于您的绑定）。例如，使用 XPath，您可以使用 //div[@class='addUnits']//span 选择 span 元素，并使用 //div[@class='addUnits']//a[contains(@class, 'addTwoCol')] 选择包含 addTwoCol 的后代 a 元素。

标签： html xpath selenium-webdriver css-selectors

【解决方案1】：

仅从 HTML 中，您可以看到它不是一个普通的下拉元素，它通常是一个 <input> 标记。如果您看到在浏览器中呈现下拉菜单，可能是 JavaScript 中的自定义下拉菜单实现（注意 display: none;，其中的值可能只是 JavaScript 可以在其他地方访问的“持有者”。）

我建议仔细检查用于绘制和实现下拉菜单的 HTML 元素，选择所需的元素，然后单击它。

【讨论】：