Finding a parent element in webdriver.io

Question

I've seen a couple of solutions in the original webdriver that use getAttribute('xpath') and append to that '/..' but webdriver.io doesn't have an xpath attribute so I haven't been able to use that. Any ideas on how to grab the parent element?

The case I am trying to test is inside of a bootstrap layout and the element that is actually getting the class I am trying to check is one above. It looks like this:

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

I am selecting by driver.element("input[name='username'"] but the error class actually hits 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 itself has an error class, not the input I can find (there are no uniques on the div)

Any help would be greatly appreciated.

Answer 1

Just searched the same and found this by inspecting Webdriver.IO source code - you can use el.$('..') to get the parent element, like this:

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

Voila! It's a part of their XPath selectors support.