Finding a parent in webdriver.io

Question

I saw a couple of solutions in the original webdriver that use getAttribute ('xpath') and add '/ ..' to this, but webdriver.io does not have an xpath attribute, so I could not use this. Any ideas on how to capture the parent?

The case I'm trying to test is inside the bootstrap layout, and the element that actually gets the class I'm trying to test is the one above. It looks like this:

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

I select driver.element ("input [name = 'username'"], but the error class actually falls into the div

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

So, I need to check if the div class has an error class and not the input that I can find (there are no uniques in the div)

Any help would be greatly appreciated.

Answer 1

, Webdriver.IO - el.$('..') , :

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

Voila! XPath.

Answer 2

, execute xpath jQuery, , ( , , - * ). , - :

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;
});

xPath stackoverflow ( XPath Javascript?)

Answer 3

WebdriverIO XPath , Xpath , .

Alternatively, you can simply use isExisting , to check whether the item exists on the page, using the parent error class:

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

If the item does not exist, then your error class is not added.