wake-up-neo.com

So überprüfen Sie einen XPath-Ausdruck in Chrome Developers Tool oder Firefox's Firebug

Wie kann ich meinen XPath verifizieren?

Ich verwende das Tool "Chrome Developers", um die Elemente zu überprüfen und meinen XPath zu formen. Ich überprüfe es mit dem Chrome Plugin XPath Checker, aber es gibt mir nicht immer das Ergebnis. Wie kann ich meinen XPath besser überprüfen?.

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

Meine letzte Option wäre die Verwendung des Selenium WebDriver, um meinen XPath zu bestätigen. 

google-chromefirefoxseleniumxpathselenium-webdriver
146
user3448242

Chrom

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

  • Suchen Sie in Elementswie unten
  • Führen Sie $x() und $$() im Bereich Consoleaus, wie in Lawrence's answer gezeigt
  • Erweiterungen von Drittanbietern (in den meisten Fällen nicht wirklich erforderlich, könnte ein Overkill sein)

So durchsuchen Sie XPath in Elementspanel:

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

enter image description here

Feuerfuchs

  1. Wählen Sie entweder "Web Console" im Untermenü "Web Developer" im Menü "Firefox" (oder "Extras", wenn Sie die Menüleiste anzeigen oder Mac OS X verwenden).
    oder drücken Sie die Ctrl+Shift+K (Command+Option+K auf OS X) Tastaturkürzel.

  2. Verwenden Sie in der Befehlszeile unten Folgendes:

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

    • $$(): Gibt ein Array von übereinstimmenden DOM-Knoten zurück. Dies ist wie bei document.querySelectorAll(), gibt jedoch ein Array anstelle eines NodeListnamens__ zurück.

    • $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 zum Bereich FirePathname__
  5. Wählen Sie in der Dropdown-Liste XPathor CSS aus
  6. Geben Sie ein, um zu suchen

enter image description here

326
Yi Zeng

Sie können eine Konsole in Chrome und Firefox öffnen und XPath überprüfen, indem Sie $x("your_xpath_here") eingeben. Dies gibt ein Array von übereinstimmenden Werten zurück. Wenn es leer ist, wissen Sie, dass es keine Übereinstimmung auf der Seite gibt.

Zum Beispiel:

enter image description here

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

*  enter image description here

37
bosnjak

Durch die Verwendung von 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 wählen Sie "inspect" aus.
  2. klicken Sie mit der rechten Maustaste auf das hervorgehobene Element-Tag.

;)

 enter image description here

14
Eng. Samer T

Hier ist die ChroPath-Erweiterung für Chrome, die viele erweiterte Funktionen im Vergleich zu FirePath -.__ aufweist. 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 Inspect . 4) Klicken Sie auf der rechten Seite der Registerkarte Elemente auf die Registerkarte ChroPath ..__ Hier erhalten Sie den XPath/CSS-Code, den Sie auch bearbeiten und auswerten können.

Addon herunterladen

3
sanjay kumar

Eine weitere Option zum Überprüfen Ihres xpath 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 X-Pfad zum Ziel ein und klicken Sie auf Suchen. Das entsprechende Element wird in Ihrer -Anwendung hervorgehoben

 Selenium IDE

1
AJC

Ich überprüfe die XPath- und Css-Selektoren mithilfe der Natu WebSync-Erweiterung für Chrome .

Es kann:

  • wählschalter auf Teile aufteilen und separat prüfen
  • mit Farbe zeigen, wie viele Elemente für jeden Auswahlbereich gefunden werden. 0 - Rot, 1 - Grün, mehrere - Gelb
  • heben Sie Elemente auf der Seite hervor, wenn Sie den Auswahlbereich anheben
  • navigiere zum Auswahlelement auf der Registerkarte Elemente, wenn ich auf den Auswahlbereich klicke

Dies kann sehr nützlich für diejenigen sein, die komplexe Selektoren schreiben und überprüfen müssen.

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

 enter image description here

0
wsbaser