在 webdriver.io 中查找父元素

Question

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

我要测试的案例在 bootstrap 布局内部，而实际获得我要检查的 class 的元素是上面的一个。它看起来像这样：

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

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

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

或者，您可以只使用 isExisting 检查页面上是否存在该元素，使用错误 class parent:

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

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

Answer 2

我最终通过使用 execute 从 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;
});

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

Answer 3

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

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

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

Answer 4

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

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

在 webdriver.io 中查找父元素

Finding a parent element in webdriver.io

webdriver-io