google-chrome - Wie kann ich einen XPath-Ausdruck im Chrome Developers Tool oder Firefox Firebug verifizieren?




selenium selenium-webdriver (6)

Ich verifiziere XPath- und Css-Selektoren mit der Natu WebSync-Erweiterung für Chrome .

Es kann:

  • Teilen Sie den Selektor in Teile und überprüfen Sie sie separat
  • Zeigen Sie mit Farbe an, wie viele Elemente für jeden Auswahlbereich gefunden wurden. 0 - Rot, 1 - Grün, mehrere - Gelb
  • Markieren Sie Elemente auf der Seite, wenn ich den Auswahlbereich schwebe
  • Navigieren Sie zum Selector-Element auf der Registerkarte "Elemente", wenn ich auf Selektor-Teil klicke

Es kann sehr nützlich für diejenigen sein, die komplexe Selektoren schreiben und verifizieren müssen.

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnllihiianac

Wie kann ich meinen XPath überprüfen?

Ich verwende das Chrome Developers-Tool, um die Elemente zu überprüfen und meinen XPath zu erstellen. Ich verifiziere es mit dem Chrome-Plugin XPath Checker, aber es gibt mir nicht immer das Ergebnis. Was ist eine bessere Möglichkeit, meinen XPath zu verifizieren?

Ich habe auch versucht, Firebug zu verwenden, um den Fehler zu untersuchen und den FirePath zu verwenden, um zu überprüfen. Aber überprüft Firepath auch den XPath.

Meine letzte Option wäre, den Selenium WebDriver zu benutzen, um meinen XPath zu bestätigen.


Chrom

Dies kann durch drei verschiedene Ansätze erreicht werden (siehe meinen Blog-Artikel here für weitere Details):

  • Suchen Sie im Bereich Elements wie unten
  • Führen Sie $x() und $$() im Console , wie in Lawrences answer
  • Erweiterungen von Drittanbietern (in den meisten Fällen nicht wirklich notwendig, könnte ein Overkill sein)

So durchsuchen Sie XPath im Bedienfeld " Elements :

  1. Drücken Sie F12 , um das Chrome Developer Tool zu öffnen
  2. Drücken Sie im Bedienfeld "Elemente" die Tastenkombination Strg + F
  3. Geben Sie in das Suchfeld XPath oder CSS Selector ein. Wenn Elemente gefunden werden, werden sie gelb markiert.

Feuerfuchs

  1. Wählen Sie entweder "Web Console" im Untermenü "Web Developer" im Firefox-Menü (oder im Menü "Extras", wenn Sie die Menüleiste anzeigen oder unter Mac OS X sind).
    oder drücken Sie die Tastenkombination Strg + Umschalt + K ( Befehl + Wahl + K auf OS X).
  2. In der Befehlszeile unten verwenden Sie Folgendes:

    • $() : Gibt das erste übereinstimmende Element zurück. Entspricht document.querySelector() oder ruft die $ -Funktion auf der Seite auf, falls sie existiert.

    • $$() : Gibt ein Array von übereinstimmenden DOM-Knoten zurück. Dies ist wie für document.querySelectorAll() , gibt aber ein Array anstelle einer NodeList .

    • $x() : Evaluiert einen XPath-Ausdruck und gibt ein Array übereinstimmender Knoten zurück.

Firefox (frühere Version 49)

  1. Installieren Sie Firebug
  2. Installiere Firepath
  3. Drücken Sie F12 , um Firebug zu öffnen
  4. FirePath zum FirePath Panel
  5. Wählen Sie im Dropdown-Menü XPathor CSS
  6. Geben Sie ein, um zu suchen


Hier ist die ChroPath-Erweiterung für Chrome, die viele erweiterte Funktionen im Vergleich zu FirePath hat. Bitte folgen Sie den unten stehenden Schritten: 1) Öffnen Sie das Devtools-Panel. 2) Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite. 3) Klicken Sie auf Überprüfen. 4) Klicken Sie auf der rechten Seite der Registerkarte Elemente auf ChroPath Registerkarte. Hier erhalten Sie den XPath / CSS und können diesen editieren und auswerten.

Download-Link des Addons

https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo


Sie können eine Konsole in Chrome und Firefox öffnen und den XPath durch Eingabe von $x("your_xpath_here") . Dies wird ein Array von übereinstimmenden Werten zurückgeben. Wenn es leer ist, wissen Sie, dass auf der Seite keine Übereinstimmung vorhanden ist.

Beispielsweise:

Update (März 2016):
Ein neuer Screenshot von Chromium v48:

*


Eine weitere Möglichkeit, Ihren xpath zu überprüfen, ist die Verwendung von Selenium IDE.

  1. Installieren Sie Firefox Selenium IDE
  2. Öffnen Sie Ihre Anwendung in FireFox und öffnen Sie die IDE
  3. Fügen Sie in der IDE in einer neuen Zeile Ihren xpath zum Ziel ein und klicken Sie auf Suchen. Das entsprechende Element würde in Ihrer Bewerbung hervorgehoben werden


Nachdem ich mein Dock nach rechts gelegt habe (siehe ältere Antworten), habe ich immer noch festgestellt, dass die Paneele vertikal geteilt sind.

Um die Panels horizontal zu teilen - und sogar mehr von Ihrer Bildschirmbreite zu bekommen - gehen Sie zu Einstellungen (untere rechte Ecke) und entfernen Sie das Häkchen bei "Paneele vertikal teilen, wenn Sie nach rechts docken".

Jetzt haben Sie alle Felder von links nach rechts: p







google-chrome firefox selenium xpath selenium-webdriver