Поиск родительского элемента в webdriver.io

Question

Я видел пару решений в оригинальном webdriver, которые используют getAttribute ('xpath') и добавляют к этому '/ ..', но webdriver.io не имеет xpath поэтому я не смог использовать это. Любые идеи о том, как захватить родительский элемент?

Случай, который я пытаюсь проверить, находится внутри макета начальной загрузки, и элемент, который фактически получает класс, который я пытаюсь проверить, является одним из них. Это выглядит следующим образом:

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

Я выбор по driver.element («вход [имя =„имя пользователя“]», но класс ошибок на самом деле попадает в Див

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

Так что нужно проверить если сам DIV имеет класс ошибок, а не вход я могу найти (нет уников на DIV)

Любая помощь будет высоко ценится.

Answer 1

Только что искали же и нашел это путем проверки Webdriver.IO source code - вы можете использовать el.$('..') получить родительский элемент, например:

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

вуаля! Это часть поддержки селекторов XPath.

Answer 2

WebdriverIO фактически позволяет вам use XPath in your selectors, поэтому любой действительный селектор Xpath должен работать, чтобы найти нужный элемент.

В качестве альтернативы, вы можете просто использовать isExisting, чтобы проверить, если элемент существует на странице с помощью класса ошибки родителей:

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

Если элемент не существует, то не добавляются ваш класс ошибки ,

Answer 3

Я решил решить эту проблему с помощью 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 (How to calculate the XPath position of an element using Javascript?)