Suchen eines übergeordneten Elements in webdriver.io

Question

Ich habe in dem ursprünglichen Webdriver einige Lösungen gesehen, die getAttribute ('xpath') verwenden und an diese '/ ..' anhängen, aber webdriver.io hat keinen xpath Attribut, so dass ich das nicht verwenden konnte. Irgendwelche Ideen, wie man das Elternelement ergreift?

Der Fall, den ich versuche zu testen, ist innerhalb eines Bootstrap-Layouts und das Element, das tatsächlich die Klasse erhält, die ich zu überprüfen versuche, ist eine oben. Es sieht wie folgt aus:

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

ich von driver.element bin der Auswahl ("input [name = 'username'"], aber die Fehlerklasse trifft eigentlich die div

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

Also muss ich überprüfen wenn die div selbst eine Fehlerklasse, nicht der Eingang ich finden kann (es gibt keine Unikate auf dem div)

Jede Hilfe wäre sehr geschätzt.

Answer 1

Gerade gesucht gleich und fanden diese durch Webdriver.IO Inspektion source code - können Sie verwenden el.$('..') das übergeordnete Element zu erhalten, wie folgt aus:

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

Voila! Es ist ein Teil ihrer XPath Selectors Unterstützung.

Answer 2

WebdriverIO Sie tatsächlich können use XPath in your selectors, also sollte jeder gültige Xpath-Selektor funktionieren, um das gewünschte Element zu finden.

Alternativ können Sie nur isExisting verwenden, um zu überprüfen, ob das Element auf der Seite existiert die Fehlerklasse Eltern mit:

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

Wenn das Element nicht existiert, dann Fehlerklasse nicht hinzugefügt bekommen .

Answer 3

Ich löste dies mit execute, um den xpath von jQuery zu bekommen, hier ist der Code, den ich verwendet habe (wenn auch für einen anderen Test ich schrieb - wenn jedes Etikett, das ein * hat, ein Pflichtfeld ist). Hoffentlich ist das hilfreich, jemanden in die Zukunft:

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

ich die XPath-Funktion von einer anderen Seite bekam Stackoverflow (How to calculate the XPath position of an element using Javascript?)