Как проверить выражение XPath в инструменте разработчиков Chrome или Firefox Firefox?

179

Как я могу проверить свой XPath?

Я использую инструмент разработчиков Chrome для проверки элементов и формирования моего XPath. Я проверяю это с помощью плагина Chrome XPath Checker, однако он не всегда дает мне результат. Какой лучший способ проверить мой XPath.

Я также попытался использовать Firebug для проверки ошибки, а также использовать FirePath для проверки. Но Firepath также проверяет XPath.

Моим последним вариантом будет использование Selenium WebDriver для подтверждения моего XPath.

google-chrome firefox selenium xpath selenium-webdriver user3448242
источник

Ответы:

367

Хром

Это может быть достигнуто тремя различными подходами (см. Мою статью в блоге здесь для более подробной информации):

  • Поиск в Elementsпанели, как показано ниже
  • Выполнить $x()и $$()в Consoleпанели, как показано в ответе Лоуренса
  • Расширения третьих сторон (в большинстве случаев не обязательно, может быть излишним)

Вот как вы ищите XPath в Elementsпанели:

  1. Нажмите, F12чтобы открыть Chrome Developer Tool
  2. На панели «Элементы» нажмите Ctrl+F
  3. В поле поиска введите XPath или CSS Selector, если элементы найдены, они будут выделены желтым цветом.

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

Firefox (начиная с версии 75)

Начиная с FF 75 можно использовать необработанный запрос xpath без оценочных выражений xpath, см. Документацию для получения дополнительной информации.

Firefox (предыдущая версия 75)

  1. Выберите «Веб-консоль» в подменю «Веб-разработчик» в меню Firefox (или в меню «Инструменты», если отображается строка меню или в Mac OS X),
    или нажмите сочетание клавиш Ctrl+ Shift+ K( Command+ Option+ Kв OS X).

  2. В командной строке внизу используйте следующее:

    • $()Возвращает первый соответствующий элемент. Эквивалент document.querySelector()или вызов $функции на странице, если она существует.

    • $$()Возвращает массив совпадающих узлов DOM. Это как для document.querySelectorAll(), но возвращает массив вместо NodeList.

    • $x(): Оценивает выражение XPath и возвращает массив совпадающих узлов.

Firefox (предыдущая версия 49)

  1. Установите Firebug
  2. Установить Firepath
  3. Нажмите, F12чтобы открыть Firebug
  4. Переключиться на FirePathпанель
  5. В раскрывающемся списке выберите XPathor CSS
  6. Введите, чтобы найти

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

И Цзэн
источник
2
Только одно предупреждение о XPath и браузерах, так как это может привести к путанице: stackoverflow.com/questions/18241029/…
Jens Erat
@JensErat: действительно хороший момент. Для тех, кто читает этот комментарий, как уже упоминалось в этом вопросе, на Selenium это не влияет, поскольку он управляет браузерами и использует ту же базовую технологию оценки JavaScript с инструментами dev.
И Цзэн
1
@ user1177636: Какое программное обеспечение вы использовали для создания этих GIF-файлов?
JacekM
Если вам также нужен локальный парсер для XQuery, я нашел BaseX: basex.org/products
tuxErrante
4
Ответ нуждается в обновлении для Firefox. К сожалению, Firebug устарел и был объединен с Инструментами разработчика. В настоящее время вы можете проверить выражение xpath в консоли, например$("//div")
derloopkat
53

Вы можете открыть DevTools в Chrome с помощью CTRL+IWindows (или CMD+IMac) и Firefox с помощью F12, затем выбрать Consoleвкладку) и проверить XPath, набрав $x("your_xpath_here").
Это вернет массив совпадающих значений. Если он пуст, вы знаете, что на странице нет совпадений.

Firefox v66 (апрель 2019 года):

Консоль Firefox v66 xpath

Chrome v69 (апрель 2019 года):

Консоль Chrome v69 xpath

Bošnjak
источник
1
Этот метод не идеален, но его полезно знать, потому что любое выражение xpath, которое вы пишете в этой консоли, может быть выполнено JavascriptExecutor в Selenium. Иногда вы можете использовать это в качестве обходного пути, возможно, когда собственные события Firefox отключены?
Джангофан
1
@ djangofan, как ты имеешь в виду? По этой логике оба эти ответа, хотя и правильны, но не нужны вашей логике.
Арран
1
@bosnjak, пробуя это в консоли, $x("//input[@name='q']")я получилVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
YasserKhalil
@YasserKhalil, какой браузер вы используете, какую версию? На каком сайте вы это делаете?
босняк
16

С помощью Chrome или Opera

без каких-либо плагинов, без написания каких-либо символов синтаксиса XPath

  1. щелкните правой кнопкой мыши нужный элемент, затем «осмотрите»
  2. щелкните правой кнопкой мыши на выделенном теге элемента, выберите «Копировать»> «Копировать Xpath».

;)

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

Eng. Самер Т
источник
2
Для Chrome это лучшее решение, которое я когда-либо видел. Спасибо, что поделился. Облегчает подтверждение в Chrome, когда я не хочу использовать Firefox.
Автоматизировано
Я использовал это для большой пользы. Но одна большая проблема заключается в том, что иногда контекстное меню отключается или перезаписывается. Тогда вы должны полагаться на другие подходы.
ouflak
1
Это на самом деле не отвечает на вопрос. Он не проверяет существующий xpath, он генерирует его. Тот, который генерирует Chrome, часто уродлив и очень хрупок, когда существует гораздо лучшее решение.
майор майор
6

Вот расширение ChroPath для Chrome, которое имеет много дополнительных функций по сравнению с FirePath. Пожалуйста, выполните следующие действия:

  1. Откройте панель devtools.
  2. Щелкните правой кнопкой мыши в любом месте на веб-странице.
  3. Нажмите Осмотреть.
  4. В правой части вкладки Элементы, нажмите на вкладку ChroPath.

Здесь вы получите XPath / CSS, а также сможете редактировать и оценивать его.

Скачать аддон

SanjayKumar I ChroPath Creator
источник
1
Расширение ChroPath все еще работает в 2020 году. Спасибо. Большая помощь
Пузыри
1

Другой вариант проверки вашего xpath - использовать селен IDE.

  1. Установите Firefox Selenium IDE
  2. Откройте ваше приложение в FireFox и откройте IDE
  3. В новой строке вставьте свой xpath в цель в IDE и нажмите «Найти». Соответствующий элемент будет выделен в вашей заявке

Selenium IDE

АЕК
источник