Das Element-Objekt

Ein Elementobjekt ist ein Objekt, das ein Element auf dem Remote-User-Agent, z.B. eine DOM-Node darstellt, wenn im Browser ausgeführt oder eines mobiles Element wenn die Session ein mobiles Endgerät steuert. Es kann über einen der vielen Elementabfragebefehle empfangen werden, z. $, custom$, react$ oder shadow$.

Eigenschaften

Ein Element-Objekt hat folgende Eigenschaften:

Namen	Typ	Details
sessionId	String	Session-Id vom Remote-Server zugewiesen.
elementId	String	Verknüpfte Web-Element-Referenz die verwendet werden kann, um mit dem Element auf der Protokollebene zu interagieren
selector	String	Selector wird verwendet, um das Element abzufragen.
parent	Object	Entweder ein Browser Object wenn das Element direct vom Browser aus gefunden wurde (z.B. const elem = browser.$('selector')) oder ein Element-Objekt wenn es von ein Element aus (z.B. elem.$('selector')) gesucht wurde.
options	Object	WebdriverIO Optionen je nachdem, wie das Browserobjekt erstellt wurde. Weitere Setup-Typen.

Methoden

Ein Element-Objekt liefert alle Methoden aus dem verfügbaren Automatisierungsprotokollen, z.B. WebDriver Protokoll sowie Befehle, die im Elementbereich aufgelistet sind. Verfügbare Protokollbefehle hängen vom Sitzungstyp ab. Wenn Sie eine automatisierte Browsersitzung ausführen, wird keines der Appium Befehle verfügbar sein und umgekehrt.

Zusätzlich stehen folgende Befehle zur Verfügung:

Namen	Parameter	Details
addCommand	- commandName (Type: String) - fn (Type: Function)	Ermöglicht die Definition benutzerdefinierter Befehle, die aus dem Browser-Objekt für Kompositionszwecke aufgerufen werden können. Lesen Sie mehr in der Benutzerdefinierte Anleitung
overwriteCommand	- commandName (Type: String) - fn (Type: Function)	Ermöglicht das Überschreiben aller Browserbefehle mit benutzerdefinierten Funktionen. Verwenden Sie diese Funktionalität sorgfältig, da es Framework-Benutzer verwirren kann. Lesen Sie mehr in der Benutzerdefinierte Anleitung

Bemerkungen

Elementketten

Bei der Arbeit mit Elementen bietet WebdriverIO eine spezielle Syntax, die das Abfragen vereinfacht und das Suchen komplexer verschachtelter Elemente Variationen kombiniert. Da Elementobjekte es dir erlauben, Elemente in ihrem Zweig mit gemeinsamen Abfragemethoden zu finden, können Benutzer verschachtelte Elemente wie folgt abrufen:

const header = await $('#header')
const headline = await header.$('#headline')
console.log(await headline.getText()) // outputs "I am a headline"

Bei tiefen verschachtelten Strukturen kann die Zuweisung eines verschachtelten Elements an ein Array sehr detailliert sein. Dafür hat WebdriverIO das Konzept der verketteten Element-Abfragen, mit denen verschachtelte Elemente wie folgt abgerufen werden können:

console.log(await $('#header').$('#headline').getText())

Dies funktioniert auch beim Abrufen einer Reihe von Elementen, z. B.:

// get the text of the 3rd headline within the 2nd header
console.log(await $$('#header')[1].$$('#headline')[2].getText())

Bei der Arbeit mit Element Arrays kann dies besonders nützlich sein, wenn versucht wird, mit ihnen zu interagieren. Anstatt folgendes zu tun:

const elems = await $$('div')
const locations = await Promise.all(
    elems.map((el) => el.getLocation())
)

Können Sie Array-Methoden direkt auf der Elementkette aufrufen, z.B.:

const location = await $$('div').map((el) => el.getLocation())

WebdriverIO uses a custom implementation that supports asynchronous iteratiors under the hood so all commands from their API are also supported for these use cases.

Benutzerdefinierte Befehle

Sie können benutzerdefinierte Befehle dem Browser Objekt hinzufügen, um Workflows, die häufig verwendet werden, in einzelne Befehle zu verpacken. Schauen Sie sich unsere Anleitung unter Benutzerdefinierte Befehle für weitere Informationen an.