javascript – 按属性值查找元素

我正在使用
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>

我需要找到包含值为second的输入的div.item.

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

有没有办法通过Nightwatch(或Selenium WebDriver API)按属性值查找元素?

我查看了WebDriver documentation,我看到的唯一方法是executing自定义JavaScript代码,它有一些严重的缺点(例如需要自己实现等待元素出现而不与Nightwatch页面对象交互).据我所知,所有其他方法都只关注HTML(最好是属性,而不是属性).

为了完全清楚,使用输入[value = …](CSS)或//输入[@value = …](XPath)之类的选择器不是解决方案,因为它按属性值执行查找,而不是属性值.

最佳答案 您可以使用.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));
}
点赞