Locators in Selenium IDE: CSS Selector - DOM - XPath - ICH WÜRDE

Inhaltsverzeichnis:

Anonim

Was sind Locators?

Locator ist ein Befehl, der Selenium IDE mitteilt, welche GUI-Elemente (z. B. Textfeld, Schaltflächen, Kontrollkästchen usw.) bearbeitet werden müssen. Die Identifizierung korrekter GUI-Elemente ist eine Voraussetzung für die Erstellung eines Automatisierungsskripts. Die genaue Identifizierung von GUI-Elementen ist jedoch schwieriger als es sich anhört. Manchmal arbeiten Sie mit falschen oder gar keinen GUI-Elementen! Daher bietet Selenium eine Reihe von Locators, um ein GUI-Element genau zu lokalisieren

Die verschiedenen Arten von CSS Locator in Selenium IDE

Es gibt Befehle, die keinen Locator benötigen (z. B. den Befehl "Öffnen"). Die meisten von ihnen benötigen jedoch Element-Locators im Selenium-Webdriver.

Die Wahl des Locators hängt weitgehend von Ihrer zu testenden Anwendung ab . In diesem Tutorial wechseln wir zwischen Facebook und neuen Touren.demoaut auf der Grundlage der von diesen Anwendungen unterstützten Locators. Ebenso wählen Sie in Ihrem Testprojekt einen der oben aufgeführten Element-Locators in Selenium Webdriver aus, basierend auf Ihrer Anwendungsunterstützung.

Lokalisierung nach ID

Dies ist die häufigste Methode zum Auffinden von Elementen, da IDs für jedes Element eindeutig sein sollen.

Zielformat: id = id des Elements

In diesem Beispiel verwenden wir Facebook als Test-App, da Mercury Tours keine ID-Attribute verwendet.

Schritt 1. Seit der Erstellung dieses Tutorials hat Facebook das Design der Anmeldeseite geändert. Verwenden Sie diese Demoseite http://demo.guru99.com/test/facebook.html zum Testen. Überprüfen Sie das Textfeld "E-Mail oder Telefon" mit Firebug und notieren Sie sich die ID. In diesem Fall lautet die ID "E-Mail".

Schritt 2. Starten Sie Selenium IDE und geben Sie "id = email" in das Feld Ziel ein. Klicken Sie auf die Schaltfläche Suchen, und beachten Sie, dass das Textfeld "E-Mail oder Telefon" gelb hervorgehoben und grün umrandet wird. Dies bedeutet, dass Selenium IDE dieses Element korrekt lokalisieren konnte.

Suche nach Namen

Das Auffinden von Elementen nach Namen ist dem Auffinden nach ID sehr ähnlich, außer dass wir stattdessen das Präfix "name =" verwenden.

Zielformat: Name = Name des Elements

In der folgenden Demonstration werden wir nun Mercury Tours verwenden, da alle wichtigen Elemente Namen haben.

Schritt 1. Navigieren Sie zu http://demo.guru99.com/test/newtours/ und überprüfen Sie mit Firebug das Textfeld "Benutzername". Beachten Sie das Namensattribut.

Hier sehen wir, dass der Name des Elements "Benutzername" ist.

Schritt 2. Geben Sie in Selenium IDE "name = userName" in das Feld Ziel ein und klicken Sie auf die Schaltfläche Suchen. Selenium IDE sollte in der Lage sein, das Textfeld Benutzername durch Hervorheben zu finden.

Suchen nach Namen mithilfe von Filtern

Filter können verwendet werden, wenn mehrere Elemente denselben Namen haben. Filter sind zusätzliche Attribute, mit denen Elemente mit demselben Namen unterschieden werden.

Zielformat : name = name_of_the_element filter = value_of_filter

Sehen wir uns ein Beispiel an -

Schritt 1 . Melden Sie sich bei Mercury Tours mit "Tutorial" als Benutzername und Passwort an. Sie sollten zur unten gezeigten Flight Finder-Seite gelangen.

Schritt 2. Beachten Sie bei Verwendung von Firebug, dass die Optionsfelder "Round Trip" und "One Way" den gleichen Namen "tripType" haben. Sie haben jedoch unterschiedliche VALUE-Attribute, sodass wir jedes von ihnen als Filter verwenden können.

Schritt 3.

  • Wir werden zuerst auf das Optionsfeld One Way zugreifen. Klicken Sie im Editor auf die erste Zeile.
  • Geben Sie im Befehlsfeld von Selenium IDE den Befehl "click" ein.
  • Geben Sie im Feld Ziel "name = tripType value = oneway" ein. Der Teil "value = oneway" ist unser Filter.

Schritt 4 . Klicken Sie auf die Schaltfläche Suchen und stellen Sie fest, dass Selenium IDE das Optionsfeld Einweg mit Grün markieren kann. Dies bedeutet, dass wir mit seinem Attribut VALUE erfolgreich auf das Element zugreifen können.

Schritt 5. Drücken Sie die Taste "X" auf Ihrer Tastatur, um diesen Klickbefehl auszuführen. Beachten Sie, dass das Optionsfeld Einweg ausgewählt wurde.

Mit dem Optionsfeld "Hin- und Rückfahrt" können Sie diesmal genau dasselbe tun, indem Sie "name = tripType value = roundtrip" als Ziel verwenden.

Suchen nach Link-Text

Diese Art von CSS-Locator in Selenium gilt nur für Hyperlink-Texte. Wir greifen auf den Link zu, indem wir unserem Ziel "link =" voranstellen und dann den Hyperlink-Text folgen.

Zielformat : link = LINK_TEXT

In diesem Beispiel greifen wir auf den Link "REGISTRIEREN" zu, der auf der Mercury Tours-Homepage zu finden ist.

Schritt 1.

  • Stellen Sie zunächst sicher, dass Sie von Mercury Tours abgemeldet sind.
  • Gehen Sie zur Mercury Tours Homepage.

Schritt 2 .

  • Überprüfen Sie mit Firebug den Link "REGISTRIEREN". Der Linktext befindet sich zwischen und Tags.
  • In diesem Fall lautet unser Linktext "REGISTRIEREN". Kopieren Sie den Linktext.

Schritt 3 . Kopieren Sie den Linktext in Firebug und fügen Sie ihn in das Zielfeld von Selenium IDE ein. Stellen Sie "link =" voran.

Schritt 4. Klicken Sie auf die Schaltfläche Suchen und stellen Sie fest, dass Selenium IDE den Link REGISTER korrekt markieren konnte.

Schritt 5. Um dies weiter zu überprüfen, geben Sie "clickAndWait" in das Befehlsfeld ein und führen Sie es aus. Selenium IDE sollte in der Lage sein, erfolgreich auf diesen REGISTER-Link zu klicken und Sie zur unten gezeigten Registrierungsseite zu führen.

Suchen mit CSS Selector

CSS-Selektoren in Selen sind Zeichenfolgenmuster, mit denen ein Element anhand einer Kombination aus HTML-Tag, ID, Klasse und Attributen identifiziert wird. Das Auffinden durch CSS-Selektoren in Selen ist komplizierter als die vorherigen Methoden, aber es ist die häufigste Auffindungsstrategie für fortgeschrittene Selenium-Benutzer, da selbst auf Elemente zugegriffen werden kann, die keine ID oder keinen Namen haben.

CSS-Selektoren in Selen haben viele Formate, aber wir werden uns nur auf die gängigsten konzentrieren.

  • Tag und ID
  • Tag und Klasse
  • Tag und Attribut
  • Tag, Klasse und Attribut
  • Innerer Text

Bei Verwendung dieser Strategie wird dem Feld Ziel immer "css =" vorangestellt, wie in den folgenden Beispielen gezeigt wird.

Lokalisierung nach CSS-Auswahl - Tag und ID

Auch in diesem Beispiel verwenden wir das E-Mail-Textfeld von Facebook. Wie Sie sich erinnern können, hat es die ID "E-Mail", und wir haben bereits im Abschnitt "Suchen nach ID" darauf zugegriffen. Dieses Mal verwenden wir einen Selenium CSS Selector mit ID, um auf dasselbe Element zuzugreifen.

Syntax

Beschreibung

css = tag # id
  • tag = das HTML-Tag des Elements, auf das zugegriffen wird
  • # = das Hash-Zeichen. Dies sollte immer vorhanden sein, wenn Sie einen Selenium CSS Selector mit ID verwenden
  • id = die ID des Elements, auf das zugegriffen wird

Beachten Sie, dass vor der ID immer ein Hash-Zeichen (#) steht.

Schritt 1. Navigieren Sie zu www.facebook.com. Untersuchen Sie mit Firebug das Textfeld "E-Mail oder Telefon".

Beachten Sie an dieser Stelle, dass das HTML-Tag "Eingabe" und die ID "E-Mail" lautet. Unsere Syntax lautet also "css = input # email".

Schritt 2. Geben Sie "css = input # email" in das Feld "Ziel" der Selenium IDE ein und klicken Sie auf die Schaltfläche "Suchen". Selenium IDE sollte dieses Element hervorheben können.

Suchen nach CSS-Selektor - Tag und Klasse

Das Auffinden mit CSS Selector in Selen unter Verwendung eines HTML-Tags und eines Klassennamens ähnelt der Verwendung eines Tags und einer ID. In diesem Fall wird jedoch anstelle eines Hashzeichens ein Punkt (.) Verwendet.

Syntax

Beschreibung

css = tag. Klasse
  • tag = das HTML-Tag des Elements, auf das zugegriffen wird
  • . = das Punktzeichen. Dies sollte immer vorhanden sein, wenn Sie einen CSS-Selektor mit Klasse verwenden
  • class = die Klasse des Elements, auf das zugegriffen wird

Schritt 1. Gehen Sie zur Demoseite http://demo.guru99.com/test/facebook.html und überprüfen Sie mit Firebug das Textfeld "E-Mail oder Telefon". Beachten Sie, dass das HTML-Tag "Eingabe" und die Klasse "Eingabetext" ist.

Schritt 2. Geben Sie in Selenium IDE "css = input.inputtext" in das Feld Ziel ein und klicken Sie auf Suchen. Selenium IDE sollte das Textfeld E-Mail oder Telefon erkennen können.

Beachten Sie, dass nur das erste Element im Quellcode erkannt wird, wenn mehrere Elemente dasselbe HTML-Tag und denselben HTML-Namen haben . Überprüfen Sie mit Firebug das Textfeld "Kennwort" in Facebook und stellen Sie fest, dass es denselben Namen wie das Textfeld "E-Mail" oder "Telefon" hat.

Der Grund, warum in der vorherigen Abbildung nur das Textfeld E-Mail oder Telefon hervorgehoben wurde, ist, dass es in der Seitenquelle von Facebook an erster Stelle steht.

Suchen nach CSS-Selektor - Tag und Attribut

Diese Strategie verwendet das HTML-Tag und ein bestimmtes Attribut des Elements, auf das zugegriffen werden soll.

Syntax

Beschreibung

css = tag [attribute = value]
  • tag = das HTML-Tag des Elements, auf das zugegriffen wird
  • [und] = eckige Klammern, in die ein bestimmtes Attribut und sein entsprechender Wert eingefügt werden
  • attribute = das zu verwendende Attribut. Es wird empfohlen, ein Attribut zu verwenden, das für das Element eindeutig ist, z. B. einen Namen oder eine ID.
  • value = der entsprechende Wert des ausgewählten Attributs.

Schritt 1. Navigieren Sie zur Registrierungsseite von Mercury Tours (http://demo.guru99.com/test/newtours/register.php) und überprüfen Sie das Textfeld "Nachname". Beachten Sie das HTML-Tag (in diesem Fall "Eingabe") und den Namen ("Nachname").

Schritt 2. Geben Sie in Selenium IDE "css = input [name = lastName]" in das Feld "Ziel" ein und klicken Sie auf "Suchen". Selenium IDE sollte erfolgreich auf das Feld Nachname zugreifen können.

Wenn mehrere Elemente dasselbe HTML-Tag und -Attribut haben, wird nur das erste erkannt . Dieses Verhalten ähnelt dem Auffinden von Elementen mithilfe von CSS-Selektoren mit demselben Tag und derselben Klasse.

Suchen nach CSS-Selektor - Tag, Klasse und Attribut

Syntax Beschreibung
css = tag.class [attribute = value]
  • tag = das HTML-Tag des Elements, auf das zugegriffen wird
  • . = das Punktzeichen. Dies sollte immer vorhanden sein, wenn Sie einen CSS-Selektor mit Klasse verwenden
  • class = die Klasse des Elements, auf das zugegriffen wird
  • [und] = eckige Klammern, in die ein bestimmtes Attribut und sein entsprechender Wert eingefügt werden
  • attribute = das zu verwendende Attribut. Es wird empfohlen, ein Attribut zu verwenden, das für das Element eindeutig ist, z. B. einen Namen oder eine ID.
  • value = der entsprechende Wert des ausgewählten Attributs.

Schritt 1. Gehen Sie zur Demoseite http://demo.guru99.com/test/facebook.html und überprüfen Sie mit Firebug die Eingabefelder "E-Mail oder Telefon" und "Passwort". Beachten Sie deren HTML-Tag, Klasse und Attribute. In diesem Beispiel wählen wir ihre 'tabindex'-Attribute aus.

Schritt 2. Wir greifen zuerst auf das Textfeld "E-Mail oder Telefon" zu. Daher verwenden wir einen Tabindex-Wert von 1. Geben Sie "css = input.inputtext [tabindex = 1]" in das Zielfeld von Selenium IDE ein und klicken Sie auf Suchen. Das Eingabefeld "E-Mail oder Telefon" sollte hervorgehoben sein.

Schritt 3. Um auf das Eingabefeld Kennwort zuzugreifen, ersetzen Sie einfach den Wert des Attributs tabindex. Geben Sie "css = input.inputtext [tabindex = 2]" in das Feld Ziel ein und klicken Sie auf die Schaltfläche Suchen. Selenium IDE muss in der Lage sein, das Textfeld Kennwort erfolgreich zu identifizieren.

Lokalisieren mit CSS Selector - innerer Text

Wie Sie vielleicht bemerkt haben, werden HTML-Labels selten ID-, Name- oder Klassenattribute zugewiesen. Wie greifen wir darauf zu? Die Antwort ist durch die Verwendung ihrer inneren Texte. Innere Texte sind die tatsächlichen Zeichenfolgenmuster, die das HTML-Label auf der Seite anzeigt.

Syntax

Beschreibung

css = tag: enthält ("innerer Text")
  • tag = das HTML-Tag des Elements, auf das zugegriffen wird
  • innerer Text = der innere Text des Elements

Schritt 1. Navigieren Sie zur Homepage von Mercury Tours (http://demo.guru99.com/test/newtours/) und verwenden Sie Firebug, um das Etikett "Passwort" zu untersuchen. Beachten Sie das HTML-Tag (in diesem Fall "Schriftart") und beachten Sie, dass es keine Klassen-, ID- oder Namensattribute enthält.

Schritt 2. Typ CSS = font: enthält ( „Password:“) in Selenium IDE Zielfeld und klicken Sie auf Suche. Selenium IDE sollte auf das Kennwortetikett zugreifen können, wie in der Abbildung unten gezeigt.

Schritt 3. Ersetzen Sie dieses Mal den inneren Text durch "Boston", sodass Ihr Ziel nun zu "css = font: enthält (" Boston ")" wird. Klicken Sie auf Suchen. Sie sollten beachten, dass das Label "Boston to San Francisco" hervorgehoben wird. Dies zeigt Ihnen, dass Selenium IDE auf ein langes Etikett zugreifen kann, selbst wenn Sie nur das erste Wort des inneren Textes angegeben haben.

Suchen nach DOM (Document Object Model)

Das Document Object Model (DOM) ist in einfachen Worten die Art und Weise, wie HTML-Elemente strukturiert werden. Selenium IDE kann das DOM für den Zugriff auf Seitenelemente verwenden. Wenn wir diese Methode verwenden, beginnt unser Zielfeld immer mit "dom = document ...". Das Präfix "dom =" wird jedoch normalerweise entfernt, da Selenium IDE alles, was mit dem Schlüsselwort "document" beginnt, automatisch als Pfad innerhalb des DOM in Selenium interpretieren kann.

Es gibt vier grundlegende Möglichkeiten, ein Element über DOM in Selen zu lokalisieren:

  • getElementById
  • getElementsByName
  • dom: name (gilt nur für Elemente in einem benannten Formular)
  • dom: index

Suchen nach DOM - getElementById

Konzentrieren wir uns auf die erste Methode - die Verwendung der getElementById-Methode von DOM in Selen. Die Syntax wäre:

Syntax

Beschreibung

document.getElementById ("ID des Elements")

id des Elements = Dies ist der Wert des ID-Attributs des Elements, auf das zugegriffen werden soll. Dieser Wert sollte immer in Klammern ("") stehen.

Schritt 1. Verwenden Sie diese Demoseite http://demo.guru99.com/test/facebook.html Navigieren Sie zu dieser Seite und überprüfen Sie mit Firebug das Kontrollkästchen "Angemeldet bleiben". Notieren Sie sich die ID.

Wir können sehen, dass die ID, die wir verwenden sollten, "persist_box" ist.

Schritt 2. Öffnen Sie die Selenium-IDE und geben Sie im Feld Ziel "document.getElementById (" persist_box ")" ein und klicken Sie auf "Suchen". Selenium IDE sollte in der Lage sein, das Kontrollkästchen "Angemeldet bleiben" zu finden. Obwohl das Innere des Kontrollkästchens nicht hervorgehoben werden kann, kann Selenium IDE das Element dennoch mit einem hellgrünen Rand umgeben, wie unten gezeigt.

Suchen nach DOM - getElementsByName

Die Methode getElementById kann jeweils nur auf ein Element zugreifen. Dies ist das Element mit der von Ihnen angegebenen ID. Die Methode getElementsByName ist unterschiedlich. Es sammelt ein Array von Elementen mit dem von Ihnen angegebenen Namen. Sie greifen auf die einzelnen Elemente über einen Index zu, der bei 0 beginnt.

getElementById

  • Es wird nur ein Element für Sie bekommen.
  • Dieses Element trägt die ID, die Sie in den Klammern von getElementById () angegeben haben.

getElementsByName

  • Es wird eine Sammlung von Elementen angezeigt, deren Namen alle gleich sind.
  • Jedes Element wird wie ein Array mit einer Zahl ab 0 indiziert
  • Sie geben an, auf welches Element Sie zugreifen möchten, indem Sie seine Indexnummer in die eckigen Klammern in der folgenden Syntax von getElementsByName einfügen.

Syntax

Beschreibung

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 zur Homepage von Mercury Tours und melden Sie sich mit "tutorial" als Benutzername und Passwort an. Firefox sollte Sie zum Flight Finder-Bildschirm führen.

Schritt 2. Überprüfen Sie mit Firebug die drei Optionsfelder im unteren Bereich der Seite (Optionsfelder Economy Class, Business Class und First Class). Beachten Sie, dass sie alle denselben Namen haben, nämlich "servClass".

Schritt 3. Lassen Sie uns zuerst auf das Optionsfeld "Economy Class" zugreifen. Von all diesen drei Optionsfeldern steht dieses Element an erster Stelle, daher hat es einen Index von 0. Geben Sie in Selenium IDE "document.getElementsByName (" servClass ") [0]" ein und klicken Sie auf die Schaltfläche "Suchen". Selenium IDE sollte in der Lage sein, das Optionsfeld der Economy-Klasse korrekt zu identifizieren.

Schritt 4. Ändern Sie die Indexnummer in 1, sodass Ihr Ziel nun zu document.getElementsByName ("servClass") [1] wird. Klicken Sie auf die Schaltfläche Suchen, und Selenium IDE sollte das Optionsfeld "Business Class" wie unten gezeigt markieren können.

Lokalisierung nach DOM - dom: Name

Wie bereits erwähnt, gilt diese Methode nur, wenn das Element, auf das Sie zugreifen, in einem benannten Formular enthalten ist.

Syntax

Beschreibung

document.forms ["Name des Formulars"] .elements ["Name des Elements"]
  • 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 Sie zur Mercury Tours-Homepage (http://demo.guru99.com/test/newtours/) und überprüfen Sie mit Firebug das Textfeld Benutzername. Beachten Sie, dass es in einem Formular mit dem Namen "home" enthalten ist.

Schritt 2. Geben Sie in Selenium IDE "document.forms [" home "]. Elements [" userName "]" ein und klicken Sie auf die Schaltfläche "Suchen". Selenium IDE muss erfolgreich auf das Element zugreifen können.

Lokalisierung nach DOM - dom: index

Diese Methode gilt auch dann, wenn sich das Element nicht in einem benannten Formular befindet, da es den Index des Formulars und nicht seinen Namen verwendet.

Syntax

Beschreibung

document.forms [Index des Formulars] .elements [Index des Elements]
  • 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 gesamte Form, die es enthält

Wir werden auf das Textfeld "Telefon" auf der Registrierungsseite von Mercury Tours zugreifen. Das Formular auf dieser Seite hat keinen Namen und kein ID-Attribut. Dies ist also ein gutes Beispiel.

Schritt 1. Navigieren Sie zur Registrierungsseite von Mercury Tours und überprüfen Sie das Textfeld Telefon. Beachten Sie, dass das Formular, das es enthält, keine ID- und Namensattribute hat.

Schritt 2. Geben Sie "document.forms [0] .elements [3]" in das Zielfeld von Selenium IDE ein und klicken Sie auf die Schaltfläche Suchen. Selenium IDE sollte in der Lage sein, korrekt auf das Textfeld Telefon zuzugreifen.

Schritt 3. Alternativ können Sie den Namen des Elements anstelle seines Index verwenden und das gleiche Ergebnis erhalten. Geben Sie "document.forms [0] .elements [" phone "]" in das Zielfeld von Selenium IDE ein. Das Textfeld Telefon sollte weiterhin hervorgehoben sein.

Auffinden mit XPath

XPath ist die Sprache, die beim Suchen von XML-Knoten (Extensible Markup Language) verwendet wird. Da HTML als Implementierung von XML betrachtet werden kann, können wir XPath auch zum Auffinden von HTML-Elementen verwenden.

Vorteil: Es kann auf fast jedes Element zugreifen, auch auf solche ohne Klassen-, Namens- oder ID-Attribute.

Nachteil: Aufgrund zu vieler unterschiedlicher Regeln und Überlegungen ist dies die komplizierteste Methode zur Identifizierung von Elementen.

Glücklicherweise kann Firebug automatisch XPath Selenium Locators generieren. Im folgenden Beispiel greifen wir auf ein Bild zu, auf das mit den zuvor beschriebenen Methoden möglicherweise nicht zugegriffen werden kann.

Schritt 1. Navigieren Sie zur Mercury Tours-Homepage und überprüfen Sie mit Firebug das orangefarbene Rechteck rechts neben dem gelben Feld "Links". Siehe das Bild unten.

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. Geben Sie in Selenium IDE einen Schrägstrich "/" in das Feld Ziel ein und fügen Sie den XPath ein, den wir im vorherigen Schritt kopiert haben. Der Eintrag in Ihrem Zielfeld sollte jetzt mit zwei Schrägstrichen "//" beginnen.

Schritt 4 . Klicken Sie auf die Schaltfläche Suchen. Selenium IDE sollte in der Lage sein, das orangefarbene Feld wie unten gezeigt hervorzuheben.

Zusammenfassung

Syntax für die Verwendung des Locators

Methode

Zielsyntax

Beispiel
Nach ID id = id_of_the_element id = email
Namentlich name = name_of_the_element name = userName
Nach Namen mit Filtern name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Durch Link-Text link = link_text link = REGISTRIEREN
Tag und ID css = tag # id css = Eingabe # E-Mail
Tag und Klasse css = tag. Klasse css = input.inputtext
Tag und Attribut css = tag [attribute = value] css = input [name = lastName]
Tag, Klasse und Attribut css = tag. Klasse [Attribut = Wert] css = input.inputtext [tabindex = 1]