按属性值查找元素答案

【问题标题】：Find element by property value按属性值查找元素
【发布时间】：2017-08-14 15:15:14
【问题描述】：

我正在使用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，其中包含一个值为second 的输入。

请注意，<input> 的值由其value 的值确定属性，这可能与其value 的值不同属性。在我的例子中，DOM 由React 操作，因此输入可能根本没有value 属性。

有没有办法使用 Nightwatch（或 Selenium WebDriver API）按属性值查找元素？

我查看了 WebDriver documentation，我看到的唯一方法是 executing 自定义 JavaScript 代码，它有一些严重的缺点（例如，需要自己实现等待元素出现并且不与 Nightwatch 页面对象交互）。据我所知，所有其他方法都只关注查看 HTML（所以充其量是 attributes，而不是 properties）。

为了完全清楚，使用 input[value=...] (CSS) 或 //input[@value=...] (XPath) 之类的选择器不是解决方案，因为它通过属性值而不是属性执行查找价值。

【问题讨论】：

仅供参考，不是nightwatch.js 特定的，而是protractor 特定的解决方案可能是使用新引入的by.js locator。
@alecxe 这是有趣的信息，但它似乎与 Nightwatch/WebDriver execute 具有相同的可用性。（注意 WebElement 在参数和返回值中与 DOMElement 之间的双向转换。）
是啊，除了执行自定义JS，恐怕没有别的办法了。
你能提供一个示例网站吗？然后我可以测试它。
@BaoTran 抱歉，我的用例是专有应用程序。不过，问题本身很容易模拟。

标签： javascript selenium dom selenium-webdriver nightwatch.js

【解决方案1】：

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

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));
}

【讨论】：

很好，你明白了。我的问题太笼统，无法接受它作为答案，因为它仅适用于value。我至少会清理一下。
感谢您的改进:)