Question

我正在使用Nightwatch.js测试网络应用程序，该应用程序使用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 <的值不同EM>属性。就我而言，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));
}

按属性值查找元素

1 个答案: