Elemente lokalisieren

Ein Element lokalisieren

Eine der grundlegendsten Techniken, die man bei der Verwendung von WebDriver erlernen muss, ist das Finden von Elementen auf der Seite. WebDriver bietet eine Reihe von eingebauten Selektortypen, darunter das Auffinden eines Elements anhand seines ID-Attributs:

Wie im Beispiel zu sehen ist, erfolgt das Auffinden von Elementen in WebDriver über dasWebDriver-Instanzobjekt. Die Methode findElement(By) liefert einen weiteren grundlegenden Objekttyp, das WebElement.

  • WebDriver repräsentiert den Browser
  • WebElement repräsentiert einen bestimmten DOM-Knoten (ein Steuerelement, z.B. einen Link oder ein Eingabefeld, etc.)

Sobald Sie einen Verweis auf ein „gefundenes“ Web-Element haben, können Sie den Bereich Ihrer Suche eingrenzen, indem Sie denselben Aufruf auf diese Objektinstanz anwenden:

Sie können dies tun, weil sowohl die WebDriver- als auch die WebElement-Typen das SearchContext-Interface implementieren. In WebDriver wird dies als rollenbasiertes Interface bezeichnet.

Über rollenbasierte Interfaces können Sie bestimmen, ob eine bestimmte WebDriver-Implementierung ein bestimmtes Feature unterstützt. Diese Interfaces sind klar definiert und versuchen, sich nur an eine einzige Rolle zu halten, für die sie zuständig sind. Mehr über das Design von WebDriver und welche Rollen in welchen Treibern unterstützt werden, können Sie im Abschnitt Some Other WhichMust Be Named nachlesen.

Das oben verwendete By-Interface unterstützt folglich auch eine Reihe von zusätzlichen Locator-Strategien. Ein verschachtelter Lookup ist möglicherweise nicht die effektivste Strategie zum Auffinden von Käse, da dazu zwei getrennte Befehle an den Browser ausgegeben werden müssen; zuerst die Suche im DOM nach einem Element mit der ID „cheese“, dann eine Suche nach „cheddar“ in einem engeren Kontext.

Um die Performance etwas zu verbessern, sollten wir versuchen, einen spezifischeren Locator zu verwenden: WebDriver unterstützt das Aufsuchen von Elementen über CSS-Locators, so dass wir die beiden vorherigen Locators zu einer Suche kombinieren können:

Mehrere Elemente lokalisieren

Es ist möglich, dass das Dokument, mit dem wir arbeiten, eine geordnete Liste des Käses enthält, der uns am besten gefällt:

<ol id=cheese> <li id=cheddar>… <li id=brie>… <li id=rochefort>… <li id=camembert>…</ol>

Da mehr Käse unbestreitbar besser ist, und es umständlich wäre, jedes der Elemente einzeln abzurufen, ist eine bessere Technik zum Abrufen von Käse die Verwendung der Pluralversion findElements(By). Diese Methode gibt eine Sammlung von Webelementen zurück. Wenn nur ein Element gefunden wird, gibt sie trotzdem eine Sammlung (von einem Element) zurück. Wenn kein Element mit dem Locator übereinstimmt, wird eine leere Liste zurückgegeben.

Elementauswahlstrategien

Es gibt acht verschiedene eingebaute Elementlokalisierungsstrategien in WebDriver:

Locator Description
Klassenname Lokalisiert Elemente, deren Klassenname den Suchwert enthält (zusammengesetzte Klassennamen sind nicht erlaubt)
css selector Findet Elemente, die einem CSS-Selektor entsprechen
id Findet Elemente, deren ID-Attribut mit dem Suchwert übereinstimmt
name Findet Elemente, deren NAME-Attribut mit dem Suchwert übereinstimmt
link text Findet Ankerelemente, deren sichtbarer Text mit dem Suchwert übereinstimmt
partieller Linktext Findet Ankerelemente, deren sichtbarer Text den Suchwert enthält. Wenn mehrere Elemente übereinstimmen, wird nur das erste ausgewählt.
Tagname Findet Elemente, deren Tagname mit dem Suchwert übereinstimmt
xpath Findet Elemente die einem XPath-Ausdruck entsprechen

Tipps zur Verwendung von Selektoren

Im Allgemeinen, wenn HTML-IDs verfügbar, eindeutig und konsistent vorhersagbar sind, sind sie die bevorzugte Methode, um ein Element auf einer Seite zu finden. Sie neigen dazu, sehr schnell zu arbeiten, und verzichten auf viel Verarbeitung, die mit komplizierten DOM-Traversalen einhergeht.

Wenn eindeutige IDs nicht verfügbar sind, ist ein gut geschriebener CSS-Selektor die bevorzugte Methode, um ein Element zu finden. XPath funktioniert genauso gut wie CSS-Selektoren, aber die Syntax ist kompliziert und oft schwer zu debuggen. Obwohl XPath-Selektoren sehr flexibel sind, werden sie in der Regel von den Browserherstellern nicht auf ihre Leistung getestet und sind in der Regel recht langsam.

Auswahlstrategien, die auf linkText und partialLinkText basieren, haben den Nachteil, dass sie nur auf Link-Elementen funktionieren. Außerdem greifen sie intern in WebDriver auf XPath-Selektoren zurück.

Tag-Namen können ein gefährlicher Weg sein, um Elemente zu lokalisieren. Häufig sind mehrere Elemente desselben Tags auf der Seite vorhanden.

Dies ist vor allem beim Aufruf der findElements(By)-Methode nützlich, die eine Sammlung von Elementen zurückgibt.

Die Empfehlung ist, Ihre Locatoren so kompakt und lesbar wie möglich zu halten. WebDriver zu bitten, die DOM-Struktur zu durchqueren, ist eine teure Operation, und je mehr Sie den Umfang Ihrer Suche eingrenzen können, desto besser.

Relative Locators

Selenium 4 bringt Relative Locators, die vorher als Friendly Locators bezeichnet wurden. Diese Funktionalität wurde hinzugefügt, um Ihnen zu helfen, Elemente zu finden, die sich in der Nähe anderer Elemente befinden.Die verfügbaren Relative Locators sind:

  • oben
  • unten
  • nach links
  • nach rechts
  • nahe

Die Methode findElement akzeptiert nun eine neue Methode withTagName(), die einen RelativeLocator zurückgibt.

Wie funktioniert das?

Selenium verwendet die JavaScript-FunktiongetBoundingClientRect()um die relativen Elemente zu finden. Diese Funktion gibt Eigenschaften eines Elements wieright, left, bottom und top zurück.

Lassen Sie uns das folgende Beispiel betrachten, um die relativen Locatoren zu verstehen.

above()

Retourniert das WebElement, das oberhalb des angegebenen Elements erscheint

below()

Retourniert das WebElement, das unterhalb des angegebenen Elements erscheint

toLeftOf()

Returns the WebElement, das links vom angegebenen Element erscheint

toRightOf()

Returnt das WebElement, das rechts vom angegebenen Element erscheint

near()

Returnt das WebElement, das maximal 50px vom angegebenen Element entfernt ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.