Czy istnieje sposób na uzyskanie XPath w Google Chrome?

346

Mam stronę internetową, której chcę używać z YQL. Ale potrzebuję XPath określonego przedmiotu. Widzę to w obszarze narzędzi do debugowania dla Google Chrome, ale nie widzę sposobu na skopiowanie tego XPath.

Czy istnieje sposób na skopiowanie pełnego XPath?

GeoffreyF67
źródło
2
Jeśli chcesz zainstalować Firefoksa oprócz Chrome, możesz użyć rozszerzenia xpather .
Adrian Grigore,
4
Jeśli chce zainstalować Firefoksa, jest on już wbudowany w Firebug.
Verhogen
2
@verhogen: Nie wiedziałem o tym, mimo że używam Firebug prawie codziennie. Jeśli ktoś jest zainteresowany więcej informacji, oto: blog.browsermob.com/2009/04/…
Adrian Grigore
Popieram również to ... Pomocnik Xpath w Google Chrome nie działa dobrze, zarówno po naciśnięciu klawisza skrótu [Ctrl + Shift + X] lub kliknięciu czarnego przycisku „X Ścieżka” (przyciskiem klucza) w Konsola JS, gdy na stronie występują błędy JS. Nie mogłem znaleźć innych dobrych dodatków do Chrome. Nie pobieraj dodatku „XPath Checker” dla Mozilli. Znalazłem również problemy z tym dodatkiem. Pamiętaj, aby pobrać „XPather” i pobrać go, gdy Firefox jest otwarty (a nie jakakolwiek inna przeglądarka). Aby użyć elementu „XPather” kliknij prawym przyciskiem myszy i wybierz „Pokaż w XPather”
MacGyver
Teraz Chrome ma również rozszerzenie „XPather”. Czuję, że to bardzo dobrze. Alt-'x ', aby aktywować okno. Możesz wprowadzić xpath i zobaczyć dopasowane wyniki. Wyświetlanie dopasowanego wyniku jest dość porządne.
gm2008

Odpowiedzi:

555

Możesz używać $xw konsoli javascript Chrome. Nie są potrzebne rozszerzenia.

dawny: $x("//img")

Również pole wyszukiwania w inspektorze internetowym zaakceptuje xpath

Matt Polito
źródło
2
Fajnie - chociaż nie jestem pewien, czy to odpowiada na pierwotne pytanie. Jak się o tym dowiedziałeś? Zastanawiam się, czy w konsoli dostępne są inne podobne funkcje.
huyz
4
Chyba Chrome skopiował większość poleceń wiersza polecenia Firebug: getfirebug.com/wiki/index.php/Command_Line_API
huyz
99
Pytał „jak uzyskać ciąg xpath dla elementu?”, A nie „jak wybrać przez xpath?” czyż nie był?
Max Williams,
3
Ciekawe, jak Ctrl+Spacesię nie ujawnia $x. Jeśli po prostu wpiszesz $x, zobaczysz, jak to zostało osiągnięte, dlatego PO powinien być w stanie określić, jak osiągnąć to, czego chcą. Na przykład; document.evaluate('//h1', document, null, XPathResult.STRING_TYPE, null).stringValue
Alasdair,
5
@huyz - dostępne są podobne funkcje. Zobacz developers.google.com/chrome-developer-tools/docs/console . Szczególnie przydatne jest 0 USD: ostatni element wybrany w narzędziu DOM. $ (0 $) sprawia, że ​​jest to obiekt jQuery (jeśli jQuery jest dostępny). Ponadto artykuł nie wspomina o kopiowaniu (0 USD), które kopiuje do schowka. (Nawiasem mówiąc, ja właśnie odkrył $ x, i znalazłem ten wątek, bo starałem się wykorzystać tę zmienną na coś innego w konsoli.)
Nathan Długa
244

Kliknij prawym przyciskiem myszy węzeł => „Kopiuj XPath”

zavidovych
źródło
19
Jest to najbardziej kruchy sposób na uzyskanie ścieżki xpath, bardzo prawdopodobne jest, że się zepsuje, gdy zawartość się zmieni
Juan Mendes,
8
@JuanMendes jaka jest alternatywa?
Nate
9
@Nate Nie ma łatwej alternatywy, jeśli chcesz, aby XPath nadal działał w miarę zmian w dokumencie. Musisz tylko o tym pomyśleć i starać się nie dodawać zbędnych informacji do swojej XPath. Ogólna zasada jest taka, że ​​im dłuższy jest twój XPath, tym mniejsze jest prawdopodobieństwo, że będzie działał w innych kontekstach.
Juan Mendes
To nie daje rzeczywistej XPath dla unikalnego elementu na stronie. To byłoby dość trudne.
CJ7
1
W nowej wersji Google Chrome musisz kliknąć prawym przyciskiem myszy węzeł i wybrać opcję Kopiuj XPath, która została przeniesiona do opcji Kopiuj.
Omid Nasri
92

Wszystkie powyższe odpowiedzi są prawidłowe tutaj jest też inny sposób ze zrzutem ekranu.

Z Chrome:

  1. Kliknij prawym przyciskiem „sprawdź” na elemencie, który próbujesz znaleźć xpath
  2. Kliknij prawym przyciskiem myszy podświetlony obszar na konsoli.
  3. Idź do Kopiuj xpath

wprowadź opis zdjęcia tutaj

grepit
źródło
24

Rozszerzenie XPath Helper robi to, czego potrzebujesz: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

asadovsky
źródło
Czy ktoś zna polecenia klawiaturowe do tego na Ubuntu? Ctrl-Shift-x i Command-Shift-x nie pojawia się nic zrobić
xiatica
1
@xiatica, czy próbowałeś w nowej / odświeżonej karcie? Pamiętaj, że rozszerzenie nie będzie działać na kartach otwartych przed instalacją; takie karty muszą zostać odświeżone.
asadovsky
13

W Chrome nie jest potrzebne żadne rozszerzenie. Kliknij prawym przyciskiem myszy dowolny element, dla którego chcesz xpath, i kliknij „Inspect Element”, a następnie ponownie wewnątrz Inspektora, kliknij prawym przyciskiem myszy element i kliknij „Copy Xpath”.

głębokie nurkowanie
źródło
11
Ta metoda jest już wspomniana w poprzedniej odpowiedzi, opublikowanej w zeszłym roku: stackoverflow.com/a/11087358/938089
Rob W
12

Google Chrome zapewnia wbudowane narzędzie do debugowania o nazwie „ Chrome DevTools ”, które zawiera przydatną funkcję, która może oceniać lub sprawdzać poprawność selektorów XPath / CSS bez rozszerzeń stron trzecich.

Można to zrobić na dwa sposoby:

Użyj funkcji wyszukiwania w panelu Elementy, aby ocenić selektory XPath / CSS i podświetlić pasujące węzły w DOM. Uruchom tokeny $ x („some_xpath”) lub $$ („css-selektory”) w panelu konsoli, które zarówno ocenią, jak i sprawdzą poprawność.

Z panelu Elementy

  1. Naciśnij klawisz F12, aby otworzyć Chrome DevTools.

  2. Panel Elementy powinien być domyślnie otwarty.

  3. Naciśnij Ctrl + F, aby włączyć wyszukiwanie DOM w panelu.

  4. Wpisz selektory XPath lub CSS do oceny.

  5. Jeśli są dopasowane elementy, zostaną podświetlone w DOM. Jeśli jednak wewnątrz DOM znajdują się pasujące ciągi, zostaną one również uznane za prawidłowe wyniki. Na przykład nagłówek selektora CSS powinien pasować do wszystkiego (wbudowany CSS, skrypty itp.), Który zawiera nagłówek słowa, zamiast dopasowywać tylko elementy.

wprowadź opis zdjęcia tutaj

Z panelu konsoli

  1. Naciśnij klawisz F12, aby otworzyć Chrome DevTools.

  2. Przejdź do panelu konsoli.

  3. Wpisz XPath, $x(".//header")aby ocenić i zweryfikować.

  4. Wpisz selektory CSS, takie jak $$("header")ocena i weryfikacja.

  5. Sprawdź wyniki zwrócone z wykonania konsoli.

Jeśli elementy zostaną dopasowane, zostaną zwrócone na liście. W przeciwnym razie wyświetlana jest pusta lista [].

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

Jeśli selektor XPath lub CSS jest nieprawidłowy, wyjątek zostanie wyświetlony na czerwono. Na przykład:

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.
Shubham Jain
źródło
10

Powiedzmy prostą formułę, aby znaleźć xpath dowolnego elementu:

1- Otwórz stronę w przeglądarce

2- Wybierz element i kliknij go prawym przyciskiem myszy

3- Kliknij opcję sprawdzenia elementu

4- Kliknij prawym przyciskiem myszy wybrany HTML

5- wybierz opcję skopiowania xpath Użyj go tam, gdzie jest to potrzebne

Ten link wideo będzie dla Ciebie pomocny. http://screencast.com/t/afXsaQXru

Uwaga: Aby uzyskać zaawansowane opcje xpath, musisz znać wyrażenie regularne lub wzorzec html.

Abdul Majeed
źródło
3
Użyłem konsoli Chrome, aby to przetestować, i zrobiłem to, aby głosować: $x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();
Cagatay Ulubay
8

xpathOnClick ma to, czego szukasz: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Przeczytaj komentarze, w rzeczywistości potrzeba trzech kliknięć, aby uzyskać xpath.

Burt
źródło
Wygląda na to, że nie działa na Ubuntu 10.04 z chromem 12.0.742.124, instaluje się, ale po kliknięciu ikony xpath, następnie kliknij na stronie (po raz pierwszy, aby zamknąć wyskakujące okienko xpath), a następnie kliknij element strony (aby wyświetlić xpath w konsoli js ) .... nic nie pojawia się w konsoli. testowany na stronie wtyczek
xiatica,
8

Od najnowszej aktualizacji dla Chrome możesz teraz kliknąć dowolny element w inspektorze elementów i skopiować XPath do schowka.

Zdradliwy
źródło
5

Na przykład w przypadku Chrome:

  1. Kliknij prawym przyciskiem myszy „sprawdź” na elemencie, który próbujesz znaleźć XPath.
  2. Kliknij prawym przyciskiem myszy podświetlony obszar w HTML DOM.
  3. Przejdź do Kopiuj> wybierz „Kopiuj XPath”.
  4. Po powyższym kroku otrzymasz absolutną XPath elementu z DOM.
  5. Możesz wprowadzić zmiany, aby uczynić go względnym XPath (ponieważ jeśli DOM się zmieni, nadal twój XPath będzie w stanie znaleźć element).

za. Aby to zrobić, otwierając panel „Elementy” przeglądarki, naciśnij CTRL + F, wklej XPath.

b. Wprowadź zmiany zgodnie z opisem w poniższym przykładzie.

Absolute xpath = // * [@ id = "app"] / div [1] / header / nav / div [2] / ul / li [2] / div / button

Powiązana xpath = // div // nav / div [2] / ul / li [2] / div / button

Po wprowadzeniu zmian:

  1. upewnij się, że XPath jest unikalny w DOM.
  2. element web jest nadal wybrany w DOM i na stronie internetowej.
Hossain Mahmood Tuhin
źródło
3

Po prostu kliknij prawym przyciskiem myszy element, dla którego chcesz xpath, a zobaczysz pozycję menu, aby go skopiować. Być może nie istniało to, kiedy OP opublikował swoje stanowisko, ale na pewno już istnieje.

RAAAAAAAANDY
źródło
2

W Firebug w Firefoksie możesz kliknąć element prawym przyciskiem myszy po sprawdzeniu i wybrać Kopiuj XPath. Nie mogłem sprawić, by ChromYQLip działał sprawnie.

Ivan
źródło
1

Możesz wypróbować rozszerzenie TruePath przeglądarki Chrome, które dynamicznie generuje względną ścieżkę XPath po kliknięciu prawym przyciskiem myszy strony internetowej i wyświetlenie całej ścieżki XPath jako pozycji menu.

dasunse
źródło
0

Nieco OT, ale być może przydatne: w Mac Chrome, chociaż nie możesz skopiować xpath z pola wyszukiwania w panelu narzędzi deweloperskich (zamiast tego kopiuje chwyta węzeł jako HTML), możesz przeciągnąć i upuścić tekst do zewnętrznego edytora.

Ben Weiner
źródło
0

Wypróbowałem prawie wszystkie dostępne rozszerzenia i znalazłem poniżej jedno z najlepszych.

Link do rozszerzenia ChroPath

Podobnie jak FirePath, to rozszerzenie bezpośrednio daje ci Xpath po kliknięciu Inspect.

wprowadź opis zdjęcia tutaj

Harish Kannan
źródło
0

naciśnij Cntl + Shift + C
wybierz element, który chcesz uzyskać XPath, klikając go
right clickna podświetloną część konsoli
copy->copy XPath

wprowadź opis zdjęcia tutaj

Hossein Hayati
źródło
-1

Użyj tego rozszerzenia, generuje xpaths na podstawie identyfikatora lub klasy, co prawdopodobnie jest tym, czego chcesz użyć.

Kliknij ikonę przeglądarki, panel zostanie wyświetlony w prawym rogu strony, a następnie kliknij przycisk Rozpocznij inspekcję, a następnie kliknij dowolny element, aby uzyskać ścieżkę xpath.

Generator XPath

ospider
źródło
@robbyoconnor, jeśli wykonałeś jakieś testy lub indeksowanie w blackboksie, wiesz, że xpath wygenerowany przez przeglądarkę nie jest tak stabilny.
ospider