Wie überprüfe ich einen XPath-Ausdruck im Chrome Developers Tool oder in Firefoxs Firebug?

179

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 überprüfe es mit dem Chrome-Plugin XPath Checker, aber es gibt mir nicht immer das Ergebnis. Was ist ein besserer Weg, um meinen XPath zu überprüfen.

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

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

google-chrome firefox selenium xpath selenium-webdriver user3448242
quelle

Antworten:

367

Chrom

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

  • Suchen Sie im ElementsPanel wie unten
  • Ausführen $x()und $$()im ConsolePanel, wie in Lawrences Antwort gezeigt
  • Erweiterungen von Drittanbietern (in den meisten Fällen nicht wirklich erforderlich, können ein Overkill sein)

So suchen Sie XPath im ElementsPanel:

  1. Drücken Sie F12, um das Chrome Developer Tool zu öffnen
  2. Drücken Sie im Bereich "Elemente" Ctrl+F
  3. Geben Sie im Suchfeld XPath oder CSS Selector ein. Wenn Elemente gefunden werden, werden sie gelb hervorgehoben.

Geben Sie hier die Bildbeschreibung ein

Firefox (seit Version 75)

Seit FF 75 ist es möglich, eine rohe xpath-Abfrage ohne Auswertung von xpath-Ausdrücken zu verwenden. Weitere Informationen finden Sie in der Dokumentation .

Firefox (frühere Version 75)

  1. Wählen Sie entweder "Webkonsole" aus dem Untermenü "Webentwickler" im Firefox-Menü (oder im Menü "Extras", wenn Sie die Menüleiste anzeigen oder Mac OS X verwenden)
    oder drücken Sie die Tastenkombination Ctrl+ Shift+ K( Command+ Option+ Kunter OS X).

  2. Verwenden Sie in der Befehlszeile unten Folgendes:

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

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

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

Firefox (frühere Version 49)

  1. Installieren Sie Firebug
  2. Installieren Sie Firepath
  3. Drücken Sie F12, um Firebug zu öffnen
  4. Wechseln Sie zu FirePathPanel
  5. Wählen Sie in der Dropdown-Liste XPathor CSS aus
  6. Geben Sie ein, um zu suchen

Geben Sie hier die Bildbeschreibung ein

Yi Zeng
quelle
2
Nur eine Warnung auf XPath und Browsern, da dies zu viel Verwirrung führt: stackoverflow.com/questions/18241029/…
Jens Erat
@JensErat: Wirklich guter Punkt. Für andere, die diesen Kommentar lesen, ist Selenium, wie bereits in dieser Frage erwähnt, nicht betroffen, da es Browser antreibt und dieselbe zugrunde liegende JavaScript-Bewertungstechnologie mit Entwicklertools verwendet.
Yi Zeng
1
@ user1177636: Mit welcher Software haben Sie diese GIFs generiert?
JacekM
Wenn Sie auch einen lokalen Parser für XQuery benötigen, habe ich BaseX gefunden: basex.org/products
tuxErrante
4
Die Antwort benötigt ein Update für Firefox. Leider ist Firebug veraltet und wurde in Developer Tools zusammengeführt. Derzeit können Sie xpath Ausdruck in der Konsole testen, zB$("//div")
derloopkat
53

Sie können die DevTools in Chrome mit CTRL+Iunter Windows (oder CMD+IMac) und Firefox mit öffnen und F12dann die ConsoleRegisterkarte auswählen und den XPath durch Eingabe überprüfen $x("your_xpath_here").
Dies gibt ein Array übereinstimmender Werte zurück. Wenn es leer ist, wissen Sie, dass die Seite nicht übereinstimmt.

Firefox v66 (April 2019):

Firefox v66-Konsole xpath

Chrome v69 (April 2019):

Xpath der Chrome v69-Konsole

Bosnjak
quelle
1
Diese Methode ist nicht ideal, aber es ist gut zu wissen, dass jeder xpath-Ausdruck, den Sie in diese Konsole schreiben, von einem JavascriptExecutor in Selenium ausgeführt werden kann. Manchmal können Sie dies als Problemumgehung verwenden, möglicherweise wenn native Firefox-Ereignisse deaktiviert sind.
Djangofan
1
@ Djangofan, wie meinst du das? Nach dieser Logik sind diese beiden Antworten, obwohl sie richtig sind, nach Ihrer Logik nicht erforderlich.
Arran
1
@ Bosnjak als $x("//input[@name='q']")ich dies in der Konsole versuchte, bekam ichVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
YasserKhalil
@YasserKhalil welchen Browser benutzt du, welche Version? Auf welcher Seite machst du das?
Bosnjak
16

Mit Chrome oder Opera

ohne Plugins, ohne ein einzelnes XPath-Syntaxzeichen zu schreiben

  1. Klicken Sie mit der rechten Maustaste auf das gewünschte Element und klicken Sie dann auf "Inspizieren".
  2. Klicken Sie mit der rechten Maustaste auf das markierte Element-Tag und wählen Sie "Kopieren"> "Xpath kopieren".

;)

Geben Sie hier die Bildbeschreibung ein

Eng. Samer T.
quelle
2
Für Chrome ist dies die BESTE Lösung, die ich bisher gesehen habe. Danke für das Teilen. Erleichtert die Bestätigung in Chrome, wenn ich Firefox nicht verwenden möchte.
Automatisierungstest
Ich habe dies zu großem Vorteil genutzt. Das einzige große Problem ist jedoch, dass das Kontextmenü manchmal deaktiviert oder überschrieben wird. Dann müssen Sie sich auf die anderen Ansätze verlassen.
Ouflak
1
Dies beantwortet die Frage nicht wirklich. Es überprüft keinen vorhandenen xpath, sondern generiert einen. Die von Chrome generierte ist oft hässlich und sehr zerbrechlich, wenn es eine viel bessere Lösung gibt.
Major Major
6

Hier ist die ChroPath-Erweiterung für Chrome, die im Vergleich zu FirePath viele erweiterte Funktionen bietet. Führen Sie die folgenden Schritte aus:

  1. Öffnen Sie das devtools-Bedienfeld.
  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite.
  3. Klicken Sie auf Inspizieren.
  4. Klicken Sie auf der rechten Seite der Registerkarte Elemente auf die Registerkarte ChroPath.

Hier erhalten Sie XPath / CSS und können es auch bearbeiten und auswerten.

Addon herunterladen

SanjayKumar I ChroPath Schöpfer
quelle
1
Die ChroPath-Erweiterung funktioniert auch 2020 noch. Danke. Große Hilfe.
Bubbles
1

Eine weitere Möglichkeit, Ihren xpath zu überprüfen, ist die Verwendung der Selen-IDE.

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

Selen IDE

AJC
quelle