Как проверить выражение 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:

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

enter image description here

Fire Fox

  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. Введите, чтобы найти

enter image description here

Ответ 2

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

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

Firefox v66 console xpath

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

Chrome v69 console xpath

Ответ 3

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

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

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

;)

enter image description here

Ответ 4

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

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

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

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

Ответ 5

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

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

Selenium IDE

Ответ 6

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

Оно может:

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

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

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

enter image description here