how locate elements chrome
Dies ist Tutorial Nr. 7 in unserer Selenium Online-Schulungsreihe. Wenn Sie alle Selenium-Tutorials in dieser Reihe überprüfen möchten, überprüfen Sie bitte diese Seite .
Im vorherigen Tutorial haben wir versucht, verschiedene Arten von Locatoren in Selen und ihre Lokalisierungsmechanismen zum Erstellen von Testskripten zu beleuchten. Das Tutorial bestand in erster Linie aus der kurzen Einführung verschiedener Locator-Typen wie ID, Klassen, Xpfade, Linktexte , CSS-Selektoren usw. und deren Identifizierung.
Wenn Sie mit unserem nächsten Tutorial fortfahren, möchten wir Ihnen die Gelegenheit nutzen, Ihnen eine Erweiterung der Ortungsstrategien vorzustellen. So in der nächstes Tutorial, Wir würden den Mechanismus zum Auffinden von Webelementen in Google Chrome und Internet Explorer untersuchen.
Da wir uns alle der Tatsache bewusst sind, dass die Internetnutzerbasis schnell wächst, erstellen Stakeholder und Programmierer Webanwendungen, die wahrscheinlich auf den meisten Browsern funktionieren.
Stellen Sie sich daher eine Situation vor, in der Ihre Webanwendung Firefox nicht unterstützt, aber für Chrome und Internet Explorer gut funktioniert.
Wie können Sie eine solche Anwendung mit Selen automatisieren? Oder um genau zu sein, wie Sie Webelemente in Chrome und Internet Explorer finden. Die Antwort liegt also in diesem Tutorial vor uns.
Was ist der beste Video-Downloader?
Was du lernen wirst:
Suchen von Webelementen in Google Chrome
Beginnen wir mit dem Verständnis der Suchstrategien in Google Chrome.
Wie Firebug in Firefox hat auch Google Chrome seine eigenes Entwicklertool Dies kann verwendet werden, um Webelemente auf der Webseite zu identifizieren und zu lokalisieren. Im Gegensatz zu Firebug muss ein Benutzer kein separates Plugin herunterladen oder installieren. Das Entwicklertool wird problemlos mit Google Chrome geliefert.
Führen Sie die folgenden Schritte aus, um Webelemente mit dem Chrome-Entwicklertool zu suchen:
Schritt 1: Der Hauptschritt besteht darin, das Entwicklertool von Google Chrome zu starten. Drücken Sie F12, um das Tool zu starten. Der Benutzer könnte so etwas wie den folgenden Bildschirm sehen.
Beachten Sie, dass die Registerkarte „Element“ im obigen Screenshot hervorgehoben ist. Auf der Registerkarte 'Element' werden daher alle HTML-Eigenschaften angezeigt, die zur aktuellen Webseite gehören. Navigieren Sie zur Registerkarte 'Element', wenn diese beim Start nicht standardmäßig geöffnet ist.
Sie können das Entwicklertool auch starten, indem Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite klicken und 'Element überprüfen' auswählen, das dem der Firebug-Inspektion sehr ähnlich ist.
Schritt 2: Der nächste Schritt besteht darin, das gewünschte Objekt auf der Webseite zu finden. Eine Möglichkeit, dasselbe zu tun, besteht darin, mit der rechten Maustaste auf das gewünschte Webelement zu klicken und es zu überprüfen. Die zu diesem Webelement gehörende HTML-Eigenschaft wird im Entwicklertool hervorgehoben. Eine andere Möglichkeit besteht darin, mit der Maus über die HTML-Eigenschaften zu fahren und das passende Webelement hervorzuheben. Auf diese Weise kann der Benutzer IDs, Klassen, Links usw. finden.
Erstellen eines Xpath im Developer Tool
Wir haben Xpaths bereits im letzten Tutorial besprochen. Wir haben auch die Erstellungsstrategie besprochen. Hier würden wir unsere Diskussion stützen, um die Gültigkeit des erstellten XPath im Chrome-Entwicklertool zu überprüfen.
Schritt 1: Öffnen Sie zum Erstellen von XPath im Developer Tool die Registerkarte Konsole.
Schritt 2: Geben Sie den erstellten Xpath ein und fügen Sie ihn in $ x ein ('// input (@ id =’ Email ’)')
Schritt 3: Drücken Sie die Eingabetaste, um alle übereinstimmenden HTML-Elemente mit dem angegebenen Xpath anzuzeigen. In unserem Fall gibt es nur ein passendes HTML-Element. Bewegen Sie den Mauszeiger über dieses HTML-Element und das entsprechende Webelement wird auf der Webseite hervorgehoben.
Auf diese Weise können alle Xpaths erstellt und in der Konsole auf ihre Gültigkeit überprüft werden.
Informationen zu CSS, die dem Webelement entsprechen, finden Sie im Chrome-Entwicklertool. Siehe den Screenshot unten:
Suchen von Webelementen in Internet Explorer
Wie Google Chrome, Internet Explorer verfügt auch über ein eigenes Entwicklertool Dies kann verwendet werden, um Webelemente anhand ihrer Eigenschaften innerhalb der Webseite zu identifizieren. Der Benutzer muss kein separates Plugin herunterladen oder installieren. Das Entwicklertool wird problemlos mit Internet Explorer geliefert.
Führen Sie die folgenden Schritte aus, um Webelemente mit dem IE Developer Tool zu suchen:
Schritt 1: Der Hauptschritt besteht darin, das IE Developer Tool zu starten. Drücken Sie F12, um das Tool zu starten. Der Benutzer könnte so etwas wie den folgenden Bildschirm sehen.
Beachten Sie, dass die Registerkarte „HTML“ im obigen Screenshot hervorgehoben ist. Auf der Registerkarte 'HTML' werden daher alle zur aktuellen Webseite gehörenden HTML-Eigenschaften angezeigt. Erweitern Sie die Registerkarte HTML, um die Eigenschaften aller zur aktuellen Webseite gehörenden Webelemente anzuzeigen.
Schritt 2: Der nächste Schritt besteht darin, das gewünschte Objekt auf der Webseite zu finden. Eine Möglichkeit besteht darin, das HTML-Element auszuwählen und das passende Webelement hervorzuheben. Auf diese Weise kann der Benutzer IDs, Klassen, Links usw. finden. Sehen Sie sich den folgenden Screenshot an, in dem das E-Mail-Textfeld hervorgehoben wird, sobald wir die entsprechende HTML-Eigenschaft auswählen.
Eine andere Möglichkeit, das Webelement zu finden, besteht darin, auf die Schaltfläche „Suchen“ im oberen Menü zu klicken und auf das gewünschte Webelement auf der Webseite zu klicken. Infolgedessen werden die entsprechenden HTML-Eigenschaften hervorgehoben.
Mithilfe des Entwicklertools kann ein Benutzer IDs, Klassen und Tag-Namen finden und Xpaths zum Auffinden von Webelementen erstellen.
Wie das Entwicklertool von Chrome verfügt auch das IE-Entwicklertool über einen separaten Abschnitt, in dem CSS-bezogene Informationen angezeigt werden. Schauen Sie sich den folgenden Screenshot an.
Fazit
In diesem Tutorial werden die grundlegenden Strategien zum Auffinden von Elementen mithilfe des Entwicklertools für Google Chrome und Internet Explorer erläutert.
Nächstes Tutorial # 8 :: Wenn Sie mit unserem nächsten Tutorial fortfahren, möchten wir Ihnen gerne ein erweitertes Tool namens WebDriver vorstellen. WebDriver ist eines der überzeugendsten Tools für Automatisierungstests. Ab unserem nächsten Tutorial würden wir unsere Diskussionen um WebDriver und all seine Kleinigkeiten herum leiten.
Literatur-Empfehlungen
- Überprüfen Sie die Sichtbarkeit von Webelementen mithilfe verschiedener Arten von WebDriver-Befehlen - Selenium Tutorial # 14
- Einführung in Selenium WebDriver - Selenium Tutorial # 8
- Verwendung von CSS Selector zum Identifizieren von Webelementen für Selenium-Skripte - Selenium Tutorial # 6
- Effizientes Selenium-Scripting und Fehlerbehebungsszenarien - Selenium-Lernprogramm Nr. 27
- Debuggen von Selenium-Skripten mit Protokollen (Log4j Tutorial) - Selenium Tutorial # 26
- 30+ beste Selen-Tutorials: Lernen Sie Selen anhand realer Beispiele
- Cucumber Selenium Tutorial: Integration von Cucumber Java Selenium WebDriver
- Verwendung der Selenium Select-Klasse zur Behandlung von Dropdown-Elementen auf einer Webseite - Selenium Tutorial # 13