javascript - 按属性值查找元素

Question

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

文档结构的 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(因此最多是属性，而不是属性)。

<小时/>

为了完全清楚，使用像 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));
}