Selektoren
Das WebDriver Protocol bietet mehrere Selektorstrategien, um ein Element abzufragen. WebdriverIO vereinfacht diese, um die Auswahl von Elementen einfach zu halten. Bitte beachten Sie, dass obwohl der Befehl zum Abfragen von Elementen $ und $$ heißt, sie nichts mit jQuery oder der Sizzle Selector Engine zu tun haben.
Obwohl es so viele verschiedene Selektoren gibt, bieten nur wenige von ihnen eine robuste Möglichkeit, das richtige Element zu finden. Zum Beispiel, gegeben den folgenden Button:
<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-testid="submit"
>
Submit
</button>
Wir empfehlen und empfehlen nicht die folgenden Selektoren:
| Selektor | Empfohlen | Hinweise |
|---|---|---|
$('button') | 🚨 Niemals | Am schlechtesten - zu generisch, kein Kontext. |
$('.btn.btn-large') | 🚨 Niemals | Schlecht. An Styling gekoppelt. Stark änderungsanfällig. |
$('#main') | ⚠️ Sparsam | Besser. Aber immer noch an Styling oder JS-Event-Listener gekoppelt. |
$(() => document.queryElement('button')) | ⚠️ Sparsam | Effektive Abfrage, komplex zu schreiben. |
$('button[name="submission"]') | ⚠️ Sparsam | An das name-Attribut gekoppelt, das HTML-Semantik hat. |
$('button[data-testid="submit"]') | ✅ Gut | Erfordert zusätzliches Attribut, nicht mit a11y verbunden. |
$('aria/Submit') oder $('button=Submit') | ✅ Immer | Am besten. Entspricht der Art und Weise, wie der Benutzer mit der Seite interagiert. Es wird empfohlen, die Übersetzungsdateien Ihres Frontends zu verwenden, damit Ihre Tests nie fehlschlagen, wenn die Übersetzungen aktualisiert werden |
CSS Query Selector
Wenn nicht anders angegeben, wird WebdriverIO Elemente mit dem CSS-Selektor-Muster abfragen, z.B.:
loading...
Link Text
Um ein Ankerelement mit einem bestimmten Text zu erhalten, fragen Sie den Text ab, der mit einem Gleichheitszeichen (=) beginnt.
Zum Beispiel:
loading...
Sie können dieses Element abfragen, indem Sie aufrufen:
loading...
Partieller Link Text
Um ein Ankerelement zu finden, dessen sichtbarer Text teilweise mit Ihrem Suchwert übereinstimmt,
fragen Sie es ab, indem Sie *= vor die Abfragezeichenfolge setzen (z.B. *=driver).
Sie können das Element aus dem obigen Beispiel auch abfragen, indem Sie aufrufen:
loading...
Hinweis: Sie können nicht mehrere Selektorstrategien in einem Selektor mischen. Verwenden Sie mehrere verkettete Elementabfragen, um das gleiche Ziel zu erreichen, z.B.:
const elem = await $('header h1*=Welcome') // funktioniert nicht!!!
// verwenden Sie stattdessen
const elem = await $('header').$('*=driver')
Element mit bestimmtem Text
Die gleiche Technik kann auch auf Elemente angewendet werden. Zusätzlich ist es auch möglich, eine Abfrage ohne Berücksichtigung der Groß- und Kleinschreibung mit .= oder .*= durchzuführen.
Hier ist zum Beispiel eine Abfrage für eine Überschrift der Ebene 1 mit dem Text "Welcome to my Page":
loading...
Sie können dieses Element abfragen, indem Sie aufrufen:
loading...
Oder mit partieller Textabfrage:
loading...
Das Gleiche funktioniert für id und class Namen:
loading...
Sie können dieses Element abfragen, indem Sie aufrufen:
loading...
Hinweis: Sie können nicht mehrere Selektorstrategien in einem Selektor mischen. Verwenden Sie mehrere verkettete Elementabfragen, um das gleiche Ziel zu erreichen, z.B.:
const elem = await $('header h1*=Welcome') // funktioniert nicht!!!
// verwenden Sie stattdessen
const elem = await $('header').$('h1*=Welcome')
Tag Name
Um ein Element mit einem bestimmten Tag-Namen abzufragen, verwenden Sie <tag> oder <tag />.
loading...
Sie können dieses Element abfragen, indem Sie aufrufen:
loading...
Name-Attribut
Zum Abfragen von Elementen mit einem bestimmten Name-Attribut können Sie entweder einen normalen CSS3-Selektor oder die bereitgestellte Name-Strategie aus dem JSONWireProtocol verwenden, indem Sie etwas wie [name="some-name"] als Selektorparameter übergeben:
loading...
loading...
Hinweis: Diese Selektorstrategie ist veraltet und funktioniert nur in alten Browsern, die mit dem JSONWireProtocol-Protokoll ausgeführt werden, oder bei Verwendung von Appium.
xPath
Es ist auch möglich, Elemente über einen bestimmten xPath abzufragen.
Ein xPath-Selektor hat ein Format wie //body/div[6]/div[1]/span[1].
loading...
Sie können den zweiten Absatz abfragen, indem Sie aufrufen:
loading...
Sie können xPath auch verwenden, um im DOM-Baum auf- und abzusteigen:
loading...
Accessibility Name Selector
Abfrage von Elementen nach ihrem zugänglichen Namen. Der zugängliche Name ist das, was von einem Screenreader angekündigt wird, wenn dieses Element den Fokus erhält. Der Wert des zugänglichen Namens kann sowohl visueller Inhalt als auch versteckte Textalternativen sein.
Mehr über diesen Selektor können Sie in unserem Release-Blogbeitrag lesen
Abrufen über aria-label
loading...
loading...
Abrufen über aria-labelledby
loading...
loading...
Abrufen über Inhalt
loading...
loading...
Abrufen über Titel
loading...
loading...
Abrufen über alt-Eigenschaft
loading...
loading...
ARIA - Role-Attribut
Zum Abfragen von Elementen basierend auf ARIA-Rollen können Sie direkt die Rolle des Elements wie [role=button] als Selektorparameter angeben:
loading...
loading...
ID-Attribut
Die Lokalisierungsstrategie "id" wird im WebDriver-Protokoll nicht unterstützt. Man sollte stattdessen entweder CSS- oder xPath-Selektorstrategien verwenden, um Elemente anhand der ID zu finden.
Allerdings könnten einige Treiber (z.B. Appium You.i Engine Driver) diesen Selektor immer noch unterstützen.
Aktuell unterstützte Selektorsyntaxen für ID sind:
//css locator
const button = await $('#someid')
//xpath locator
const button = await $('//*[@id="someid"]')
//id strategy
// Hinweis: funktioniert nur in Appium oder ähnlichen Frameworks, die die Lokalisierungsstrategie "ID" unterstützen
const button = await $('id=resource-id/iosname')
JS-Funktion
Sie können auch JavaScript-Funktionen verwenden, um Elemente mit nativen Web-APIs abzurufen. Natürlich können Sie dies nur innerhalb eines Web-Kontexts tun (z.B. browser oder Web-Kontext in Mobile).
Gegeben die folgende HTML-Struktur:
loading...
