Есть ли способ получить XPath в Google Chrome?

347

У меня есть веб-страница, которую я хочу использовать с YQL. Но мне нужен XPath конкретного предмета. Я вижу это в области инструментов отладки для Google Chrome, но я не вижу способа скопировать этот XPath.

Есть ли способ скопировать полный XPath?

GeoffreyF67
источник
2
Если вы хотите установить Firefox в дополнение к Chrome, вы можете использовать расширение xpather .
Адриан Григоре
4
Если он хочет установить Firefox, он уже встроен в Firebug.
Верхоген
2
@verhogen: я не знал об этом, хотя я использую Firebug почти ежедневно. Если кто-то еще заинтересован в дополнительной информации, вот она: blog.browsermob.com/2009/04/…
Адриан Григоре
Я также проголосую за это ... Помощник Xpath в Google Chrome не работает хорошо, как при нажатии сочетания клавиш [Ctrl + Shift + X], так и при нажатии черной кнопки «X Path» (с помощью гаечного ключа) в Консоль JS при наличии ошибок JS на странице. И я не смог найти других хороших дополнений для Chrome. Не загружайте дополнение «XPath Checker» для Mozilla. Я также нашел проблемы с этим дополнением. Убедитесь, что вы получили «XPather» и загрузили его, пока у вас открыт Firefox (а не какой-либо другой браузер). Чтобы использовать элемент «XPather», щелкните правой кнопкой мыши и выберите «Показать в XPather»
MacGyver,
Теперь Chrome также имеет расширение «XPather». Я чувствую, что это очень хорошо. Alt-'x ', чтобы активировать окно. Вы можете ввести xpath и увидеть соответствующие результаты. Отображение соответствующего результата довольно аккуратно.
gm2008

Ответы:

555

Вы можете использовать $xв консоли Chrome Javascript. Расширения не нужны.

например: $x("//img")

Также окно поиска в веб-инспекторе примет xpath

Мэтт Полито
источник
2
Хорошо - хотя я не уверен, что это отвечает на оригинальный вопрос. Как вы узнали об этом? Мне интересно, есть ли другие похожие функции, доступные в консоли.
августа
4
Я предполагаю, что Chrome скопировал большинство команд командной строки Firebug: getfirebug.com/wiki/index.php/Command_Line_API
huyz
100
Он спрашивал «как получить строку xpath для элемента?», А не «как выбрать xpath?» не так ли?
Макс Уильямс
3
Интересно, как Ctrl+Spaceне раскрывается $x. Если вы просто напечатаете, $xвы увидите, как это достигается, поэтому ФП сможет определить, как добиться того, чего они хотят. Например; document.evaluate('//h1', document, null, XPathResult.STRING_TYPE, null).stringValue
Alasdair
5
@huyz - есть похожие функции. См. Developers.google.com/chrome-developer-tools/docs/console . $ 0 особенно полезен: последний элемент, который вы выбрали в инструменте DOM. $ ($ 0) делает его объектом jQuery (если jQuery доступен). Также в статье не упоминается копия ($ 0), которая копирует в буфер обмена. (Между прочим, я только что обнаружил $ x и нашел этот поток, потому что я пытался использовать эту переменную для чего-то еще в консоли.)
Натан Лонг,
245

Щелкните правой кнопкой мыши узел => «Копировать XPath».

zavidovych
источник
19
Это самый хрупкий способ получить xpath, он может сломаться при изменении контента
Хуан Мендес,
8
@JuanMendes какая альтернатива?
Nate
9
@Nate Нет простой альтернативы, если вы хотите, чтобы ваш XPath продолжал работать при изменении документа. Вам просто нужно подумать об этом и постараться не добавлять лишнюю информацию в ваш XPath. Практическое правило гласит, что чем длиннее ваш XPath, тем меньше вероятность того, что он будет работать в других контекстах.
Хуан Мендес
Это не дает вам фактический XPath для уникального элемента на странице. Это было бы довольно сложно.
CJ7
1
В новой версии Google Chrome необходимо щелкнуть правой кнопкой мыши узел и выбрать пункт «Копировать XPath», который перемещен в «Копировать».
Омид Насри
92

Все приведенные выше ответы верны, вот еще один способ со скриншотом.

Из Chrome:

  1. Щелкните правой кнопкой мыши «осмотреть» на элементе, который вы пытаетесь найти xpath
  2. Щелкните правой кнопкой мыши на выделенной области на консоли.
  3. Перейти к копированию xpath

введите описание изображения здесь

grepit
источник
24

Расширение XPath Helper делает то, что вам нужно: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

asadovsky
источник
Кто-нибудь знает команды клавиатуры для этого на Ubuntu? crtl-shift-x и command-shift-x, похоже, ничего не делают
xiatica
1
@xiatica, вы пробовали в новой / обновленной вкладке? Обратите внимание, что расширение не будет работать во вкладках, которые были открыты до установки; такие вкладки должны быть обновлены.
Асадовский
13

В Chrome расширение не требуется. Щелкните правой кнопкой мыши по любому элементу, для которого вы хотите использовать xpath, и нажмите «Проверить элемент», а затем снова внутри Инспектора, щелкните правой кнопкой мыши по элементу и нажмите «Копировать Xpath».

глубокое погружение
источник
11
Этот метод уже упоминался в предыдущем ответе, опубликованном в прошлом году: stackoverflow.com/a/11087358/938089
Rob W
12

Google Chrome предоставляет встроенный инструмент отладки, называемый Chrome DevTools , который включает удобную функцию, которая может оценивать или проверять селекторы XPath / CSS без каких-либо сторонних расширений.

Это можно сделать двумя способами:

Используйте функцию поиска на панели «Элементы» для оценки селекторов XPath / CSS и выделения соответствующих узлов в DOM. Выполните токены $ x ("some_xpath") или $$ ("css-селекторы") на панели консоли, которые будут как оценивать, так и проверять.

Из панели «Элементы»

  1. Нажмите F12, чтобы открыть Chrome DevTools.

  2. Панель элементов должна быть открыта по умолчанию.

  3. Нажмите Ctrl + F, чтобы включить поиск DOM на панели.

  4. Введите XPath или CSS селекторы для оценки.

  5. Если есть совпадающие элементы, они будут выделены в DOM. Однако, если в DOM есть соответствующие строки, они также будут считаться действительными результатами. Например, заголовок селектора CSS должен соответствовать всему (встроенный CSS, скрипты и т. Д.), Который содержит заголовок слова, а не только элементам соответствия.

введите описание изображения здесь

Из панели консоли

  1. Нажмите F12, чтобы открыть Chrome DevTools.

  2. Переключиться на панель консоли.

  3. Введите XPath, как $x(".//header")для оценки и проверки.

  4. Введите CSS селекторы, как $$("header")для оценки и проверки.

  5. Проверьте результаты, возвращаемые при выполнении консоли.

Если элементы совпадают, они будут возвращены в списке. В противном случае отображается пустой список [].

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

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

Если селектор XPath или CSS недопустим, исключение будет отображаться красным текстом. Например:

$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.
Шубхам Джайн
источник
10

Позвольте рассказать вам простую формулу, чтобы найти xpath любого элемента:

1- Открыть сайт в браузере

2- Выберите элемент и щелкните по нему правой кнопкой мыши.

3- Нажмите опцию проверить элемент

4- Щелкните правой кнопкой мыши по выбранному HTML

5- выберите вариант для копирования xpath Используйте его там, где вам нужно

Эта ссылка на видео будет полезна для вас. http://screencast.com/t/afXsaQXru

Примечание. Для предварительных настроек xpath вы должны знать регулярное выражение или шаблон вашего HTML.

Абдул Маджид
источник
3
Используйте консоль Chrome, чтобы проверить это, и сделали это, чтобы проголосовать: $x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();
Cagatay Ulubay
8

xpathOnClick содержит то, что вы ищете: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Прочитайте комментарии, хотя, чтобы получить xpath, требуется три клика.

Burt
источник
Похоже, не работает на Ubuntu 10.04 с Chrome 12.0.742.124, устанавливает, но когда щелкните значок xpath, затем нажмите на страницу (первый раз, чтобы закрыть всплывающее окно xpath), затем нажмите на элемент страницы (чтобы отобразить xpath в консоли js ) .... в консоли ничего не отображается. протестировано на сайте плагина
xiatica
8

Что касается последнего обновления для Chrome, теперь вы можете щелкнуть любой элемент в инспекторе элементов и скопировать XPath в буфер обмена.

запутанный
источник
5

Для Chrome, например:

  1. Щелкните правой кнопкой мыши «осмотреть» на предмет, который вы пытаетесь найти XPath.
  2. Щелкните правой кнопкой мыши на выделенной области в HTML DOM.
  3. Перейдите в «Копировать»> выберите «Копировать XPath».
  4. После вышеуказанного шага вы получите абсолютный XPath элемента из DOM.
  5. Вы можете внести изменения, чтобы сделать его относительным XPath (потому что, если DOM изменится, ваш XPath все равно сможет найти элемент).

а. Для этого, открыв панель «Элементы» браузера, нажмите CTRL + F и вставьте XPath.

б. Внесите изменения, как описано в следующем примере.

Абсолютный xpath = // * [@ id = "app"] / div [1] / header / nav / div [2] / ul / li [2] / div / button

Связанный xpath = // div // nav / div [2] / ul / li [2] / div / button

Когда вы вносите изменения:

  1. убедитесь, что XPath уникален в DOM.
  2. Тем не менее, веб-элемент выбран на DOM и на веб-странице.
Хоссейн Махмуд Тухин
источник
3

Просто щелкните правой кнопкой мыши на элементе, для которого вы хотите использовать xpath, и вы увидите пункт меню, чтобы скопировать его. Этого, возможно, не существовало, когда ОП сделал свой пост, но это, безусловно, сейчас.

RAAAAAAAANDY
источник
2

В Firebug в Firefox вы можете щелкнуть правой кнопкой мыши элемент после его проверки и выбрать «Копировать XPath». Я не мог заставить ChromYQLip работать без сбоев.

Иван
источник
1

Вы можете попробовать использовать Chrome Web Extension TruePath, который динамически генерирует относительный XPath при щелчке правой кнопкой мыши на веб-странице и отображает все XPath в качестве пунктов меню.

dasunse
источник
0

Немного ОТ, но, возможно, полезно: в Mac Chrome, хотя вы не можете скопировать xpath из поля поиска на панели инструментов Dev (вместо этого копировать захватывает узел как HTML), вы можете перетаскивать текст во внешний редактор.

Бен Вейнер
источник
0

Я перепробовал почти все доступные расширения и нашел ниже один из лучших.

Ссылка на расширение ChroPath

Как и FirePath, это расширение напрямую дает вам Xpath, когда вы нажимаете Inspect.

введите описание изображения здесь

Хариш Каннан
источник
0

нажмите Cntl + Shift + C
на элемент, который хотите получить XPath, нажав на него
right clickв выделенной части консоли
copy->copy XPath

введите описание изображения здесь

Хоссейн Хаяти
источник
-1

Используйте это расширение, оно генерирует xpaths на основе идентификатора или класса, что, вероятно, вы хотите использовать.

Нажмите на значок браузера, панель отобразится в правом углу страницы, затем нажмите «Начать проверку», затем нажмите на любой элемент, чтобы получить свой xpath.

XPath Generator

ospider
источник
@robbyoconnor Если вы выполнили какое-то тестирование или сканирование черного ящика, вы бы знали, что сгенерированный браузером xpath не так стабилен.
ospider