Чи є спосіб отримати XPath в Google Chrome?

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

Чи є спосіб скопіювати повний XPath?

Ви можете використовувати $xв консолі JavaScript JavaScript. Розширення не потрібні.

колишній: $x("//img")

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

Клацніть правою кнопкою миші на вузлі => "Скопіювати XPath"

Усі наведені вище відповіді правильні, тут є ще один спосіб із скріншотом.

З Chrome:

1. Клацніть правою кнопкою миші «перевірити» на предметі, який ви намагаєтесь знайти xpath
2. Клацніть правою кнопкою миші на виділеній області на консолі.
3. Перейдіть на Копіювати xpath

Розширення XPath Helper виконує те, що потрібно: https://chrome.google.com/webstore/detail/hgimnogjllphhhllbbmlgjoejdpjl

Зараз у хромі не потрібно розширення. Клацніть правою кнопкою миші на будь-якому елементі, для якого ви хочете xpath, і натисніть кнопку "Перевірити елемент", а потім знову всередині інспектора, клацніть правою кнопкою миші на елементі та натисніть на "Скопіювати Xpath".

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.

Скажемо вам просту формулу, щоб знайти xpath будь-якого елемента:

1- Відкрийте сайт у браузері

2- Виберіть елемент і клацніть правою кнопкою миші на ньому

3- Клацніть опцію перевірити елемент

4- Клацніть правою кнопкою миші на вибраному HTML

5- оберіть варіант для копіювання xpath Використовуйте його там, де вам це потрібно

Це посилання на відео буде корисним для вас. http://screencast.com/t/afXsaQXru

Примітка. Для попередніх варіантів xpath ви повинні знати регулярний вираз або шаблон вашого HTML.

xpathOnClick має те, що ви шукаєте: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Прочитайте коментарі, хоча для отримання xpath насправді потрібно три кліки.

З останнього оновлення для хрому тепер ви можете натиснути будь-який елемент інспектора елементів та скопіювати XPath у буфер обміну.

Наприклад, для 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 та на веб-сторінці.

Просто клацніть правою кнопкою миші елемент, для якого потрібно xpath, і ви побачите пункт меню для його копіювання. Це, можливо, не існувало, коли ОП виступила на посаду, але це, безумовно, є зараз.

У Firebug в Firefox ви можете правою кнопкою миші клацнути на елементі після огляду і вибрати Copy XPath. Я не міг змусити ChromYQLip працювати безперебійно.

Ви можете спробувати використовувати веб-розширення TruePath Chrome, яке динамічно генерує відносну XPath правою кнопкою миші на веб-сторінці та відображає всі XPath як пункти меню.

Трохи OT, але, можливо, корисно. На Mac Chrome, хоча ви не можете скопіювати xpath із поля пошуку на панелі інструментів Dev (замість цього, копія захоплює вузол як HTML), ви можете перетягнути текст у зовнішній редактор.

Я спробував майже всі доступні розширення і виявив, що нижче є одним з найкращих.

Посилання розширення ChroPath

Як і FirePath, це розширення безпосередньо дає вам Xpath, коли ви натискаєте на Огляд.

натисніть Cntl + Shift + C
виберіть елемент, який ви бажаєте отримати XPath, клацнувши по ньому
right clickна виділеній частині консолі
copy->copy XPath

Використовуючи це розширення, воно генерує xpaths на основі id або класу, що, мабуть, ви хочете використовувати.

Клацніть на піктограмі браузера, панель відображається в правому куті сторінки, потім натисніть кнопку «Почати перевірку», а потім натисніть будь-який елемент, щоб отримати ваш xpath.

XPath Generator