Jak zweryfikować wyrażenie XPath w narzędziu Chrome Developers lub Firefox Firebug?

179

Jak mogę zweryfikować moją XPath?

Używam narzędzia Chrome Developers do sprawdzania elementów i tworzenia mojej XPath. Weryfikuję to za pomocą wtyczki Chrome XPath Checker, jednak nie zawsze daje mi to wynik. Jaki jest lepszy sposób na zweryfikowanie mojej XPath.

Próbowałem również użyć Firebug do sprawdzenia błędu, a także użyć FirePath do weryfikacji. Ale czy Firepath weryfikuje również XPath.

Moją ostatnią opcją byłoby użycie Selenium WebDriver do potwierdzenia mojej XPath.

google-chrome firefox selenium xpath selenium-webdriver user3448242
źródło

Odpowiedzi:

367

Chrom

Można to osiągnąć trzema różnymi podejściami (zobacz mój artykuł na blogu , aby uzyskać więcej informacji):

  • Szukaj w Elementspanelu jak poniżej
  • Wykonaj $x()i $$()w Consolepanelu, jak pokazano w odpowiedzi Lawrence'a
  • Rozszerzenia innych firm (w większości przypadków niekonieczne, mogą być przesadą)

Oto jak przeszukiwać XPath w Elementspanelu:

  1. Naciśnij, F12aby otworzyć narzędzie Chrome Developer Tool
  2. W panelu „Elementy” naciśnij Ctrl+F
  3. W polu wyszukiwania wpisz XPath lub CSS Selector, jeśli elementy zostaną znalezione, zostaną podświetlone na żółto.

wprowadź opis obrazu tutaj

Firefox (od wersji 75)

Od FF 75 można używać surowego zapytania xpath bez wyrażeń oceny xpath. Więcej informacji można znaleźć w dokumentacji .

Firefox (wcześniejsza wersja 75)

  1. Wybierz opcję „Konsola internetowa” z podmenu Web Developer w menu przeglądarki Firefox (lub menu Narzędzia, jeśli wyświetlasz pasek menu lub korzystasz z systemu Mac OS X)
    lub naciśnij skrót klawiaturowy Ctrl+ Shift+ K( Command+ Option+ Kw systemie OS X).

  2. W wierszu poleceń na dole użyj:

    • $(): Zwraca pierwszy pasujący element. Odpowiednik document.querySelector()lub wywołuje $funkcję na stronie, jeśli istnieje.

    • $$(): Zwraca tablicę pasujących węzłów DOM. To jest jak for document.querySelectorAll(), ale zwraca tablicę zamiast a NodeList.

    • $x(): Oblicza wyrażenie XPath i zwraca tablicę pasujących węzłów.

Firefox (wcześniejsza wersja 49)

  1. Zainstaluj Firebug
  2. Zainstaluj Firepath
  3. Naciśnij, F12aby otworzyć Firebug
  4. Przełącz na FirePathpanel
  5. W menu wybierz XPathor CSS
  6. Wpisz, aby zlokalizować

wprowadź opis obrazu tutaj

Yi Zeng
źródło
2
Tylko jedno ostrzeżenie o XPath i przeglądarkach, ponieważ prowadzi to do wielu nieporozumień: stackoverflow.com/questions/18241029/…
Jens Erat
@JensErat: Naprawdę słuszna uwaga. Inni czytający ten komentarz, jak już wspomniano w tym pytaniu, nie mają wpływu na Selenium, ponieważ steruje on przeglądarkami i używa tej samej podstawowej technologii oceny JavaScript, co narzędzia programistyczne.
Yi Zeng,
1
@ user1177636: Jakiego oprogramowania użyłeś do generowania tych GIF-ów?
JacekM
Jeśli potrzebujesz lokalnego parsera dla XQuery, znalazłem BaseX: basex.org/products
tuxErrante
4
Odpowiedź wymaga aktualizacji przeglądarki Firefox. Niestety Firebug jest przestarzały i został włączony do narzędzi programistycznych. Obecnie możesz przetestować wyrażenie xpath w konsoli, np.$("//div")
derloopkat
53

Możesz otworzyć DevTools w Chrome CTRL+Iw systemie Windows (lub CMD+IMac) i Firefox za pomocą F12, a następnie wybrać Consolekartę) i sprawdzić XPath, wpisując $x("your_xpath_here").
To zwróci tablicę dopasowanych wartości. Jeśli jest pusty, wiesz, że na stronie nie ma dopasowania.

Firefox v66 (kwiecień 2019 r.):

Konsola Firefox v66 xpath

Chrome v69 (kwiecień 2019 r.):

Konsola Chrome v69 xpath

bosnjak
źródło
1
Ta metoda nie jest idealna, ale warto wiedzieć, ponieważ dowolne wyrażenie xpath, które napiszesz w tej konsoli, może zostać wykonane przez JavascriptExecutor w Selenium. Czasami możesz użyć tego jako obejścia, być może gdy natywne zdarzenia Firefoksa są wyłączone?
djangofan
1
@djangofan, co masz na myśli? Zgodnie z tą logiką obie te odpowiedzi, chociaż poprawne, są niepotrzebne według twojej logiki.
Arran
1
@bosnjak, próbując tego na konsoli $x("//input[@name='q']"), dostałemVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
YasserKhalil
@YasserKhalil jakiej przeglądarki używasz, jakiej wersji? W jakiej witrynie to robisz?
bosnjak
16

Używając Chrome lub Opera

bez żadnych wtyczek, bez pisania pojedynczego znaku składni XPath

  1. kliknij prawym przyciskiem wymagany element, a następnie „sprawdź”
  2. kliknij prawym przyciskiem myszy zaznaczony znacznik elementu, wybierz kopiuj> Kopiuj ścieżkę Xpath.

;)

wprowadź opis obrazu tutaj

Inż. Samer T
źródło
2
W przypadku Chrome jest to NAJLEPSZE rozwiązanie, jakie widziałem. Dzięki za udostępnienie. Ułatwia sprawdzenie w przeglądarce Chrome, kiedy nie chcę używać przeglądarki Firefox.
automatyzacji
Użyłem tego z wielką korzyścią. Ale jednym dużym problemem jest to, że czasami menu kontekstowe jest wyłączone lub nadpisane. Następnie musisz polegać na innych podejściach.
ouflak
1
To naprawdę nie odpowiada na pytanie. Nie weryfikuje istniejącej ścieżki xpath, ale ją generuje. Ten, który generuje Chrome, jest często brzydki i bardzo delikatny, gdy istnieje znacznie lepsze rozwiązanie.
Major Major
6

Oto rozszerzenie ChroPath dla Chrome, które ma wiele zaawansowanych funkcji w porównaniu do FirePath - wykonaj poniższe czynności:

  1. Otwórz panel devtools.
  2. Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie internetowej.
  3. Kliknij Sprawdź.
  4. Po prawej stronie zakładki Elementy kliknij zakładkę ChroPath.

Tutaj otrzymasz XPath / CSS, a także możesz go edytować i oceniać.

Pobierz dodatek

SanjayKumar I ChroPath Creator
źródło
1
Rozszerzenie ChroPath nadal działa w 2020 roku. Dzięki. Wielka pomoc.
Bubbles
1

Inną opcją sprawdzenia xpath jest użycie selenu IDE.

  1. Zainstaluj Firefox Selenium IDE
  2. Otwórz aplikację w FireFox i otwórz IDE
  3. W środowisku IDE w nowym wierszu wklej ścieżkę xpath do celu i kliknij przycisk Znajdź. Odpowiedni element zostanie podświetlony w Twojej aplikacji

Selenium IDE

AJC
źródło