Locators in Selenium

Was sind Locatoren in Selenium?

Ein Locator ist ein Befehl, der steuert Selenium IDE oder Selenium WebDriver steuert das richtige GUI-Element an, beispielsweise ein Textfeld, eine Schaltfläche, einen Link oder eine Checkbox, auf dem eine Aktion ausgeführt werden soll. Die Identifizierung des richtigen GUI-Elements ist eine Grundvoraussetzung für jedes zuverlässige Automatisierungsskript. Die korrekte Identifizierung ist jedoch schwieriger als gedacht. Manchmal interagiert man versehentlich mit dem falschen Element oder gar keinem. Um dies zu vermeiden, Selenium bietet eine Vielzahl von Lokalisierungsstrategien, die eine präzise Ansteuerung von GUI-Elementen ermöglichen.

Während einige Befehle, wie beispielsweise der Befehl „open“, keinen Locator benötigen, ist die Mehrheit der Befehle ohne Locator erforderlich. Selenium Befehle hängen von Element-Locators ab. Die Wahl des Locators hängt maßgeblich von Ihrer zu testenden Anwendung (AUT) ab. In diesem Tutorial werden wir abwechselnd auf Facebook und dem Mercury Die Demo-Website für Touren (newtours.demoaut) basiert darauf, welche Ortungsfunktionen die einzelnen Anwendungen unterstützen. Ebenso in Ihrer eigenen testing Im Projekt wählen Sie einen Element-Locator aus in Selenium WebDriver basiert auf der Struktur Ihrer Anwendung.

Lokalisierung anhand der ID

Dies ist die gängigste Methode, um Elemente zu lokalisieren, da IDs für jedes Element auf einer Seite eindeutig sein sollen. Wenn ein ID-Attribut vorhanden ist, sollte es Ihre erste Wahl für schnelle, stabile und gut lesbare Testskripte sein.

Target Format: id=id des Elements

In diesem Beispiel verwenden wir eine Facebook-Demoseite, weil Mercury Tours verwendet keine ID-Attribute für seine Hauptformularfelder.

Schritt 1) Nutzen Sie diese Demoseite https://demo.guru99.com/test/facebook.html Zum Testen. Untersuchen Sie das Textfeld „E-Mail oder Telefon“ mit den integrierten Entwicklertools Ihres Browsers (drücken Sie F12 in Chrome, Edge oder Windows Explorer). Firefox) und notieren Sie sich die zugehörige ID. In diesem Fall lautet die ID „E-Mail“.

Schritt 2) Start Selenium IDE und geben Sie „id=email“ in das Target Klicken Sie auf die Schaltfläche „Suchen“ und beachten Sie, dass das Textfeld „E-Mail oder Telefon“ gelb mit grünem Rand hervorgehoben ist, was darauf hinweist, dass Selenium Die IDE hat das Element korrekt lokalisiert.

Nach Namen suchen

Das Auffinden von Elementen anhand ihres Namens ähnelt dem Auffinden anhand ihrer ID, mit dem Unterschied, dass wir die „name=“ Stattdessen ein Präfix verwenden. Dieser Ansatz ist nützlich, wenn Elemente keine ID, aber ein definiertes Namensattribut besitzen.

Target Format: name=Name des Elements

Für die folgende Demonstration werden wir verwenden Mercury Touren, weil alle wichtigen Formularelemente der Website ein Namensattribut tragen.

Schritt 1) Navigieren https://demo.guru99.com/test/newtours/ Untersuchen Sie mithilfe der Entwicklertools Ihres Browsers das Textfeld „Benutzername“. Notieren Sie sich dessen Namensattribut.

Hier lautet der Name des Elements „userName“.

Schritt 2) In Selenium IDE, geben Sie “name=userName” in das Target und klicken Sie auf die Schaltfläche Suchen. Selenium Die IDE sollte das Textfeld für den Benutzernamen durch Hervorheben finden.

So finden Sie Elemente anhand des Namens mithilfe von Filtern

Filter sind dann nützlich, wenn mehrere Elemente das gleiche Namensattribut gemeinsam haben. Filter sind zusätzliche Attribute, die dazu dienen, Elemente mit identischem Namen zu unterscheiden. Ohne Filter, Selenium würde standardmäßig nur das erste übereinstimmende Element berücksichtigen.

Target Format: name=name_of_the_element filter=value_of_filter

Lassen Sie uns ein Beispiel durchgehen.

Schritt 1) Einloggen bei Mercury Touren.

Anmelden bei Mercury Bei Touren, die sowohl den Benutzernamen als auch das Passwort „tutorial“ verwenden, sollte die Flugsuche-Seite wie unten dargestellt erscheinen.

Schritt 2) Verwenden Sie die Entwicklertools, um die VALUE-Attribute zu untersuchen.

Beachten Sie, dass die Optionsfelder „Hin- und Rückfahrt“ und „Einfache Fahrt“ denselben Namen „tripType“ tragen. Sie haben jedoch unterschiedliche VALUE-Attribute, sodass wir jeden Wert als Filter verwenden können.

Schritt 3) Klicken Sie im Editor auf die erste Zeile.

• Wir werden zuerst auf die Option „Einbahnstraße“ zugreifen. Klicken Sie auf die erste Zeile im Selenium IDE-Editor.
• Geben Sie im Befehlsfeld den Befehl „click“ ein.
• Im Target Geben Sie im Feld „name=tripType value=oneway“ ein. Der Teil „value=oneway“ dient als Filter.

Schritt 4) Klicken Sie auf die Schaltfläche „Suchen“.

Beachte das Selenium Die IDE hebt den Optionsbutton „Einweg“ grün hervor und bestätigt damit, dass das Element erfolgreich über sein VALUE-Attribut aufgerufen wurde.

Schritt 5) Wählen Sie die Option „Einweg“.

Drücken Sie die Taste „X“ auf Ihrer Tastatur, um den Klickbefehl auszuführen. Die Option „Einweg“ ist nun ausgewählt.

Sie können die gleiche Aktion auch mit dem Optionsfeld „Round Trip“ durchführen, diesmal jedoch mit „name=tripType value=roundtrip“ als Ziel.

Suchen nach Linktext

Diese Locator-Strategie ist nur für Hyperlink-Texte anwendbar. Wir greifen auf den Link zu, indem wir dem Zieltext „link=“ voranstellen, gefolgt vom sichtbaren Hyperlink-Text. Diese Methode ist gut lesbar und eignet sich hervorragend für Navigationstests.

Target Format: link=link_text

Im folgenden Beispiel greifen wir auf den Link „REGISTRIEREN“ zu, der sich auf der Mercury Homepage von Tours.

Schritt 1)

• Stellen Sie zunächst sicher, dass Sie abgemeldet sind. Mercury Touren.
• Navigieren Sie zu der Mercury Homepage von Tours.

Schritt 2)

• Überprüfen Sie mithilfe der Entwicklertools den Link „REGISTRIEREN“. Der Linktext befindet sich zwischen dem öffnenden und dem schließenden Anker-Tag.
• In diesem Fall lautet der Linktext „REGISTRIEREN“. Kopieren Sie den Linktext.

Schritt 3) Kopieren Sie den Linktext und fügen Sie ihn in Folgendes ein: Selenium IDE Target Feld. Stellen Sie ihm „link=“ voran.

Schritt 4) Klicken Sie auf die Schaltfläche „Suchen“. Selenium Die IDE wird den REGISTER-Link korrekt hervorheben.

Schritt 5) Geben Sie zur weiteren Überprüfung „clickAndWait“ in das Befehlsfeld ein und führen Sie es aus. Selenium IDE klickt den Link REGISTRIEREN erfolgreich an und leitet Sie zur unten angezeigten Registrierungsseite weiter.

Suchen nach DOM (Document Object Model)

Das Dokumentobjektmodell (DOM)Vereinfacht ausgedrückt beschreibt es, wie HTML-Elemente als Baum von Knoten strukturiert sind. Selenium Die IDE kann durch diese Baumstruktur navigieren, um auf Seitenelemente zuzugreifen. Bei Verwendung dieser Methode wird die Target Die Box beginnt immer mit „dom=document…“. Das Präfix „dom=“ wird üblicherweise weggelassen, weil Selenium Die IDE interpretiert automatisch jeden Wert, der mit „document“ beginnt, als DOM-Pfad.

Es gibt vier grundlegende Möglichkeiten, ein Element im DOM zu finden. Selenium:

• getElementById
• getElementsByName
• dom:name (gilt nur für Elemente innerhalb einer benannten Form)
• dom:index

Lokalisieren nach DOM – getElementById

Lassen Sie uns zunächst die getElementById-Methode des DOM untersuchen. SeleniumDiese Methode gibt ein einzelnes Element zurück, indem sie dessen ID-Attribut abgleicht.

Syntax

document.getElementById("id of the element")

• Die ID des Elements entspricht dem Wert des ID-Attributs des Elements, auf das zugegriffen werden soll. Dieser Wert muss immer in Anführungszeichen gesetzt werden.

Schritt 1) Nutzen Sie diese Demoseite https://demo.guru99.com/test/facebook.htmlNavigieren Sie dorthin und überprüfen Sie mithilfe der Entwicklertools das Kontrollkästchen „Angemeldet bleiben“. Notieren Sie sich dessen ID.

Die zu verwendende ID lautet „persist_box“.

Schritt 2) Öffne Selenium IDE und in der Target Geben Sie im Feld document.getElementById(“persist_box”) ein und klicken Sie dann auf Suchen. Selenium Die IDE findet das Kontrollkästchen „Angemeldet bleiben“. Obwohl sie den Inhalt des Kontrollkästchens nicht hervorheben kann, umgibt sie das Element mit einem hellgrünen Rahmen, wie unten dargestellt.

Lokalisieren nach DOM – getElementsByName

Die Methode `getElementById` greift jeweils nur auf ein Element zu, nämlich das Element mit der angegebenen ID. Die Methode `getElementsByName` verhält sich anders. Sie gibt ein Array von Elementen mit demselben Namen zurück. Der Zugriff auf die einzelnen Elemente erfolgt über einen numerischen Index, der bei 0 beginnt.

	getElementById Es wird nur ein Element zurückgegeben. Dieses Element trägt die in den Klammern von getElementById() angegebene ID.
	getElementsByName Die Funktion gibt eine Sammlung von Elementen mit identischen Namen zurück. Jedes Element ist wie in einem Array durch eine Zahl ab 0 indiziert. Sie wählen ein bestimmtes Element aus, indem Sie dessen Index in die eckigen Klammern der unten stehenden Syntax setzen.

Syntax

document.getElementsByName("name")[index]

• name = Name des Elements, wie durch sein Attribut „name“ definiert
• index = eine Ganzzahl, die angibt, welches Element im Array von getElementsByName verwendet wird.

Schritt 1) Navigieren Sie zu der Mercury Melden Sie sich auf der Startseite von Tours mit dem Benutzernamen und Passwort „tutorial“ an. Der Browser lädt dann die Flugsuche.

Schritt 2) Untersuchen Sie mithilfe der Entwicklertools die drei Optionsfelder am unteren Rand der Seite (Economy-Klasse, Business-Klasse und First-Class). Sie werden feststellen, dass sie alle denselben Namen tragen: „servClass“.

Schritt 3) Zuerst greifen wir auf den Optionsbutton „Economy Class“ zu. Von den drei Optionsbuttons erscheint dieser als erster, sein Index ist also 0. Selenium In der IDE geben Sie document.getElementsByName(“servClass”)[0] ein und klicken auf die Schaltfläche „Suchen“. Selenium IDE wird die Optionsschaltfläche „Economy-Klasse“ korrekt erkennen.

Schritt 4) Ändern Sie die Indexnummer auf 1, damit Ihr Target wird zu document.getElementsByName(“servClass”)[1]. Klicken Sie auf die Schaltfläche „Suchen“ und Selenium Die IDE hebt die Optionsschaltfläche „Business Class“ wie unten dargestellt hervor.

Lokalisieren nach DOM – dom:name

Wie bereits erwähnt, ist diese Methode nur anwendbar, wenn sich das Element, auf das Sie zugreifen, in einem benannten Formular befindet. Der Locatorpfad beginnt beim Formular und führt dann anhand des Namens zum Zielelement.

Syntax

document.forms["name of the form"].elements["name of the element"]

• Name des Formulars = der Wert des Namensattributs des Formular-Tags, das das Element enthält, auf das Sie zugreifen möchten.
• Name des Elements = der Wert des Namensattributs des Elements, auf das Sie zugreifen möchten

Schritt 1) Navigieren Mercury Touren Homepage https://demo.guru99.com/test/newtours/ Untersuchen Sie mithilfe der Entwicklertools das Textfeld „Benutzername“. Beachten Sie, dass es sich in einem Formular mit dem Namen „Startseite“ befindet.

Schritt 2) In Selenium Geben Sie in der IDE document.forms[“home”].elements[“userName”] ein und klicken Sie auf die Schaltfläche „Suchen“. Selenium Die IDE wird erfolgreich auf das Element zugreifen.

Lokalisieren nach DOM – dom:index

Diese Methode ist auch dann anwendbar, wenn sich das Element nicht in einem benannten Formular befindet, da sie den Index des Formulars anstelle seines Namens verwendet. Dies ist nützlich für ältere Seiten oder automatisch generierte Formulare, bei denen keine Benennung möglich ist.

Syntax

document.forms[index of the form].elements[index of the element]

• Index des Formulars = die Indexnummer (beginnend bei 0) des Formulars in Bezug auf die gesamte Seite
• Index des Elements = die Indexnummer (beginnend bei 0) des Elements in Bezug auf die Form, die es enthält.

Wir werden auf das Textfeld „Telefon“ auf dem Mercury Seite zur Anmeldung für Touren. Das Formular auf dieser Seite hat weder einen Namen noch eine ID und eignet sich daher gut als Beispiel.

Schritt 1) Navigieren Sie zu der Mercury Prüfen Sie auf der Seite „Tourenregistrierung“ das Textfeld „Telefon“. Beachten Sie, dass das umgebende Formular weder ID- noch Namensattribute aufweist.

Schritt 2) Geben Sie document.forms[0].elements[3] in der Selenium IDE Target und klicken Sie auf die Schaltfläche Suchen. Selenium Die IDE greift korrekt auf das Textfeld „Telefon“ zu.

Schritt 3) Alternativ können Sie anstelle des Index den Namen des Elements verwenden, um dasselbe Ergebnis zu erzielen. Geben Sie dazu document.forms[0].elements[“phone”] ein. Target Das Textfeld „Telefon“ bleibt weiterhin hervorgehoben.

Lokalisieren mit XPath

XPath ist die Abfragesprache, die zur Navigation in XML-Knoten (Extensible Markup Language) verwendet wird. Da HTML als eine Implementierung von XML betrachtet werden kann, XPath Kann auch HTML-Elemente finden. Es ist eine der leistungsstärksten Suchstrategien in Selenium.

• Vorteil: Es kann auf nahezu jedes Element zugreifen, auch auf solche ohne Klassen-, Namens- oder ID-Attribute.
• Nachteil: Aufgrund ihrer vielen Regeln und Syntaxvarianten ist sie die komplexeste Locator-Strategie.

Die Entwicklertools moderner Browser können XPath-Ausdrücke automatisch generieren. In Chrome, Edge oder FirefoxKlicken Sie mit der rechten Maustaste auf ein Element im Elementbereich und wählen Sie „Kopieren“ > „XPath kopieren“. Im folgenden Beispiel greifen wir auf ein Bild zu, das mit den zuvor beschriebenen Methoden nicht gefunden werden kann.

Schritt 1) Navigieren Sie zu der Mercury Gehen Sie zur Startseite von Tours und verwenden Sie die Entwicklertools, um das orangefarbene Rechteck rechts neben dem gelben Feld „Links“ zu untersuchen, wie unten dargestellt.

Schritt 2) Klicken Sie mit der rechten Maustaste auf den HTML-Code des Elements und wählen Sie dann die Option „XPath kopieren“.

Schritt 3) In Selenium IDEGeben Sie einen einzelnen Schrägstrich „/“ ein in Target Fügen Sie dann den im vorherigen Schritt kopierten XPath in das Feld ein. Der Eintrag in der Target Das Feld sollte jetzt mit zwei Schrägstrichen „//“ beginnen.

Schritt 4) Klicken Sie auf die Schaltfläche „Suchen“. Selenium Die IDE hebt das orangefarbene Feld hervor, wie unten dargestellt.

Warum die Wahl des richtigen Standortfinders wichtig ist

Die Wahl der richtigen Ortungsstrategie ist eine der einflussreichsten Entscheidungen in Selenium Automatisierung ist wichtig, da sie direkten Einfluss auf die Skriptstabilität, die Ausführungsgeschwindigkeit und die langfristigen Wartungskosten hat. Ein ungeeigneter Selektor kann zu fehlerhaften Tests, Fehlalarmen und häufigen Nacharbeiten bei Änderungen der Benutzeroberfläche führen. Erfahrene Automatisierungsingenieure empfehlen folgende Reihenfolge: zuerst ID, dann Name, gefolgt von CSS-Selektor, Linktext und schließlich XPath.

ID-basierte Selektoren sind am schnellsten, da die Browsersuche für eindeutige Kennungen optimiert ist. Namensbasierte Selektoren sind fast genauso effizient, sofern die Namen eindeutig sind. CSS-Selektoren und XPath bieten Flexibilität, sind aber tendenziell langsamer und anfälliger für Änderungen am DOM. Linktext eignet sich hervorragend für Navigationslinks, bietet aber nur begrenzte Wiederverwendbarkeit.

Eine stabile Automatisierung hängt auch von der Zusammenarbeit mit Entwicklern ab. Wenn Tester bei Code-Reviews konsistente und aussagekräftige IDs oder data-* Attribute anfordern, verbessert sich die Zuverlässigkeit der Locators deutlich. Vermeiden Sie automatisch generierte IDs (z. B. von Frameworks), da diese sich zwischen Builds ändern können. Durch die Priorisierung lesbarer, absichtsorientierter Locators können Teams die Wartbarkeit ihrer Test-Suites gewährleisten und technische Schulden im Zuge der Anwendungsentwicklung reduzieren.

Best Practices für das Schreiben zuverlässiger Standortangaben

Zuverlässige Ortungssysteme sind die Grundlage für eine wartungsfähige Selenium Testsuite. Die folgenden Vorgehensweisen tragen dazu bei, Skriptfehler zu reduzieren, die Lesbarkeit zu verbessern und die Tests widerstandsfähiger gegen Änderungen der Benutzeroberfläche zu machen.

1. Bevorzugen Sie eindeutige IDs: Prüfen Sie immer zuerst, ob ein ID-Attribut vorhanden ist. IDs sollen innerhalb einer Seite eindeutig sein und sind die performanteste Wahl.
2. Verwenden Sie semantische Namen und data-* Attribute: Ermutigen Sie Entwickler, stabile Testattribute wie data-testid oder data-qa hinzuzufügen. Diese bleiben auch bei Änderungen an CSS-Klassen konsistent.
3. Vermeiden Sie absolute XPath-Ausdrücke: Absolute Pfade wie /html/body/div[2]/div[3]/span funktionieren nicht immer. Verwenden Sie relative XPath-Ausdrücke mit Attributen wie z. B. //input[@name='userName'].
4. Attribute für mehr Präzision kombinieren: Wenn ein einzelnes Attribut nicht eindeutig ist, kombinieren Sie mehrere Attribute (zum Beispiel //button[@type='submit' und @name='login']), um das richtige Element anzusprechen.
5. Setzen Sie Texte mit Bedacht ein: Locators, die auf sichtbarem Text basieren, können bei unterschiedlichen Sprachlokalisierungen zu Problemen führen. Verwenden Sie textbasierte Locators nur, wenn die Inhalte stabil und einsprachig sind.
6. Zentralisierung der Standortdaten: Speichern Sie Locators in einer Page Object Model (POM)-Klasse, damit Aktualisierungen an einer zentralen Stelle und nicht in vielen Testskripten vorgenommen werden können.
7. In den Entwicklertools überprüfen: Bevor Sie einen Locator zu einem Skript hinzufügen, testen Sie ihn in der Browserkonsole mit $x(“//xpath”) für XPath oder document.querySelector für CSS, um sicherzustellen, dass er genau ein Element zurückgibt.
8. Vermeiden Sie nach Möglichkeit indexbasierte Locators: Indexpositionen wie [3] hängen von der Elementreihenfolge ab. Schon geringfügige Layoutänderungen können den Index verschieben und das Skript zum Absturz bringen.

Durch die konsequente Anwendung dieser Vorgehensweisen erstellen Automatisierungsingenieure Testsuiten, die teamübergreifend skalierbar sind und häufige UI-Updates mit minimalem Wartungsaufwand überstehen.

Häufig gestellte Fragen