在 webdriver.io 中查找父元素答案

【问题标题】：Finding a parent element in webdriver.io在 webdriver.io 中查找父元素
【发布时间】：2016-12-24 11:13:24
【问题描述】：

我在原始 webdriver 中看到了几个使用 getAttribute('xpath') 并附加到该 '/..' 的解决方案，但 webdriver.io 没有 xpath 属性，所以我无法使用它。关于如何获取父元素的任何想法？

我要测试的情况是在引导布局内部，而实际获取我要检查的类的元素是上面的一个。它看起来像这样：

<div class="form-group">
  <input class="form-control" type="text" name="username">
  <other stuff>
</div>

我通过 driver.element("input[name='username'"] 选择但错误类实际上命中了 div

<div class="form-group error">
  <input class="form-control" type="text" name="username">
  <other stuff>
</div>

所以我需要检查 div 本身是否有错误类，而不是我能找到的输入（div 上没有唯一性）

任何帮助将不胜感激。

【问题讨论】：

标签： webdriver-io

【解决方案1】：

WebdriverIO 实际上让您use XPath in your selectors，因此任何有效的 Xpath 选择器都应该能够找到您想要的元素。

或者，您可以使用isExisting 来检查页面上是否存在使用错误类父元素的元素：

driver.isExisting('.error input[name="username"]');

如果元素不存在，那么您的错误类没有被添加。

【讨论】：

谢谢，但我不想硬编码元素的 xpath，因为它会使测试变得脆弱。

【解决方案2】：

我最终通过使用执行从 jQuery 获取 xpath 解决了这个问题，这是我使用的代码（尽管我正在编写不同的测试 - 如果每个带有 * 的标签都是必填字段）。希望这对将来的某人有所帮助：

var requiredXPaths = browser.execute(function () {
var returner = [];
var $elements = $('.modal.fade.in').find("label:contains('*')");
  _.each($elements, el => {
    var xpath = '';
    var element = el.parentElement;
    for (; element && element.nodeType == 1; element = element.parentNode) {
      var id = $(element.parentNode).children(element.tagName).index(element) + 1;
      id > 1 ? (id = '[' + id + ']') : (id = '');
      xpath = '/' + element.tagName.toLowerCase() + id + xpath;
    }

    returner.push(xpath);
  });
  return returner;
});

我从另一个 stackoverflow 页面 (How to calculate the XPath position of an element using Javascript?) 获得了 xPath 函数

【讨论】：

【解决方案3】：

刚刚搜索了相同的内容，并通过检查 Webdriver.IO source code 找到了这个 - 您可以使用 el.$('..') 获取父元素，如下所示：

$('input[name="username"]').$('..') // returns the parent element

瞧！这是他们 XPath 选择器支持的一部分。

【讨论】：

【解决方案4】：

我在gitter里一直在讲这个，什么时候可以选择父级input[name="username"]

这个元素的父元素可以选择为//div[input[name="username"]]

【讨论】：