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

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

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

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

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

Ответ 1

Хром

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

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

Вот как вы просматриваете панель XPath in Elements:

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

Fire Fox

Либо выберите "Веб-консоль" из подменю "Веб-разработчик" в меню "Firefox" (или меню "Сервис", если вы отобразите панель меню или находитесь в Mac OS X)
или нажмите комбинацию клавиш Ctrl + Shift + K (Command + Option + K на OS X).
В командной строке внизу используйте следующее:
- $(): Возвращает первый элемент, который соответствует. Эквивалентен document.querySelector() или вызывает функцию $ на странице, если она существует.
- $$(): Возвращает массив узлов DOM, которые соответствуют. Это похоже на document.querySelectorAll(), но возвращает массив вместо NodeList.
- $x(): оценивает выражение XPath и возвращает массив совпадающих узлов.

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

;)

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

Я проверяю селектора XPath и Css, используя расширение Natu WebSync для Chrome.

Оно может:

разделить селектор на части и проверить их отдельно
показать с цветом, сколько элементов найдено для каждой части селектора. 0 - красный, 1 - зеленый, несколько - желтый
выделить элементы на странице, когда я нахожу селекторную часть
перейдите к элементу выбора на вкладке Элементы, когда я нажимаю селекторную часть

Это может быть очень полезно для тех, кто должен писать и проверять сложные селекторы.

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