按属性值查找元素

Question

我正在使用Nightwatch.js测试一个Web应用程序，该应用程序使用Selenium WebDriver与浏览器进行交互。在我的应用程序中，我有一个动态创建的项目列表，这些项目仅通过名称进行区分，并且名称显示为<input>值。我需要按名称查找项目。

文档结构的示例HTML表示形式：

<div class="item">
  <input>  <!-- current value: "first" -->
</div>
<div class="item">
  <input>  <!-- current value: "second" -->
</div>
<div class="item">
  <input>  <!-- current value: "first" -->
</div>

我需要找到div.item包含带有value的输入second。

请注意，an <input>的值由其value 属性的值确定，该属性的值可能与其value 属性的值不同。就我而言，DOM是由React操纵的，因此输入可能根本没有value属性。

是否可以使用Nightwatch（或Selenium WebDriver API）按属性值查找元素？

我查看了WebDriver 文档，并且看到的唯一方法是执行自定义JavaScript代码，这有一些严重的缺点（例如，需要自己实现等待元素出现并且不与Nightwatch页面对象交互）。据我所知，所有其他方法都只关注HTML（因此属性最多，而不是properties）。

---

只是要完全清楚，使用input[value=...]（CSS）或//input[@value=...]（XPath）之类的选择器并不是解决方案，因为它按属性值而不是属性值执行查找。

Answer 1

您可以使用.elements()获取元素列表class="item"，然后使用 迭代所有元素.getValue()以获取每个输入的 value 属性。如果它与您想要的名称匹配，则返回该元素。

function getElementsByValue(xpathSelector, expectedValue, callback) {
  const foundElements = [];
  browser.elements('xpath', xpathSelector, ({ value }) => value.forEach(inputEl => {
    browser.elementIdValue(inputEl.ELEMENT, result => {
      if (result.value === expectedValue) {
        foundElements.push(inputEl);
      }
    });
  });
  browser.perform(() => callback(foundElements));
}