LemonWiki共筆

Xpath tools: Difference between revisions

← Older edit
mNo edit summary
Tag: wikieditor
 
(28 intermediate revisions by the same user not shown)
Line 1: Line 1:
List of tools for xpath expression selection/query


== chrome  javascript console ==
== Comparison of xpath tools ==
{{chrome}}  javascript console
# 選單: 工具 -> 開發人員工具 -> Console
# 輸入 {{kbd | key = <nowiki> $x("//img") </nowiki>}}，按 Enter。就會顯示符合 xpath 規則的結果<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref>：
https://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg


image hosted by [https://www.flickr.com/photos/planetoid/15103179455/ flickr]
<table border=1 class="wikitable sortable">
        <tr>
            <th>Method</th>
            <th>Pros</th>
            <th>Cons</th>
        </tr>
        <tr>
            <td>chrome extension [https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]</td>
            <td>worked on online webpage</td>
            <td>NOT work on offline file</td>
        </tr>
        <tr>
            <td>Sublime [https://packagecontrol.io/packages/xpath xpath] plugin</td>
            <td>worked on offline file</td>
            <td>NOT work on online webpage</td>
        </tr>
</table>


== chrome extension ==
== Browser Console ==
[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]
 
# 輸入 ctrl + shift + x 開始 XPath Helper console
=== List matched elements by XPath rule ===
 
Open the browser console in {{chrome}} or {{Edge}}:
 
# Menu: Tools → Developer Tools → Console
# To verify elements matching an XPath rule, type the expression using $x(). For example, to find all images, enter {{kbd | key = <nowiki>$x("//img")</nowiki>}} and press Enter. The matched elements will be listed in the console<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref><ref>[https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng's Blog]</ref>:
 
https://planetoid.info/images/xpath_result_on_browser_console.jpg
 
To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses XPath rule {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}:
<pre>
// Use document.evaluate to retrieve all matching elements
const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
// Collect text content from each element
const textArray = [];
for (let i = 0; i < result.snapshotLength; i++) {
    const element = result.snapshotItem(i);
    // Strip newlines and trim whitespace
    const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();
    textArray.push(cleanedText);
}
 
// Print all results, one per line
console.log(textArray.join('\n'));
</pre>
 
 
=== List matched elements by CSS selector ===
 
To quickly list all elements matching a CSS selector, use {{kbd | key = <nowiki>$$("css-selector")</nowiki>}} in the console. For example, to find all images, enter {{kbd | key = <nowiki>$$("img")</nowiki>}} and press Enter. The matched elements will be listed in the console.
 
To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses CSS selector {{kbd | key = <nowiki>div#showvender a</nowiki>}}:
<pre>
// Use querySelectorAll to retrieve all matching elements
const elements = document.querySelectorAll('div#showvender a');
 
// Collect text content from each element
const textArray = [];
elements.forEach(el => {
    // Strip newlines and trim whitespace
    const cleanedText = el.textContent.replace(/[\n\r]+/g, '').trim();
    textArray.push(cleanedText);
});
 
// Print all results, one per line
console.log(textArray.join('\n'));
</pre>
 
 
=== Highlight matched elements by XPath rule ===
 
By XPath rule:
<pre>
const xpath = '//main[contains(@class, "htmlview") and @data-cat="article"]';
 
// Helper: resolve XPath to an array of elements
function $x(xpath) {
  const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  return Array.from({ length: result.snapshotLength }, (_, i) => result.snapshotItem(i));
}
 
// Scroll to the first matched element
$x(xpath)[0]?.scrollIntoView();
 
// Highlight all matched elements with a red outline
$x(xpath).forEach(el => {
  el.style.outline = '3px solid red';
});
</pre>
 
=== Highlight matched elements by CSS selector ===
 
By CSS selector:
<pre>
const cssSelector = "main.htmlview[data-cat='article']";
 
// Scroll to the first matched element
document.querySelector(cssSelector)?.scrollIntoView();
 
// Highlight all matched elements with a red outline
document.querySelectorAll(cssSelector).forEach(el => {
  el.style.outline = '3px solid red';
});
</pre>
 
== XPath Browser extensions ==
[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper] for {{Chrome}}
 
# 不支援 {{kbd | key=<nowiki>file:///</nowiki>}}
# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示，開啟 XPath Helper console (顯示在網頁上方)
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
https://farm6.staticflickr.com/5579/15102884872_509e9559f6.jpg
: https://planetoid.info/images/xpath_helper.jpg
 
[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub] for {{Chrome}}


image hosted by [https://www.flickr.com/photos/planetoid/15102884872/in/photostream/ flickr]
# After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器
# Open DevTools. 打開「開發人員工具」
# Click on SelectorsHub tab. 點選「元素」標籤，再點選最右邊的「SelectorsHub」
# Here it will show all possible xpath, selectors for inspected element.
# To build  your own xpath or CSS Selector, start typing in the selector input box.
 
[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店] for {{Chrome}}
 
# 開啟「開發人員工具」
# 點選標籤「WebSync」-> 輸入 xpath 規則
 
[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome] for {{Chrome}}
 
* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。
 
[https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}
# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
# 切換到 FirePath 標籤
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
 
== Sublime text editor ==
[https://packagecontrol.io/packages/xpath xpath] plugin: "[https://www.sublimetext.com/ Sublime Text] plugin for easier cursor navigation of XML and HTML files using XPath 1.0."
 
Steps
# Open the Command Palette
#* Menu: Tools -> Command Palette
#* or press the keyboard shortcut<ref>[https://stackoverflow.com/questions/45586508/sublime-text-xpath-plugin-shortcut sublimetext3 - Sublime Text - XPath Plugin shortcut - Stack Overflow]</ref>: {{kbd | key=ctrl + shift + p}} on {{Win}} or {{kbd | key=command + shift + p}} on {{Mac}})
# and select {{kbd | key=Xpath: Query document}}
# input the Xpath expression
 
== Other tools ==
* [https://xpath.curiousconcept.com/ XPath Expression Tester] for XML {{access | date=2020-06-09}}
* [https://www.freeformatter.com/xpath-tester.html Free Online XPath Tester / Evaluator] for XML {{access | date=2020-06-09}}
* [http://xpather.com/ XPath online real-time tester, evaluator and generator for XML & HTML] {{access | date=2023-03-22}}
 
== Xpath syntax examples ==
* SVG {{kbd | key=<nowiki>//*[local-name() = 'svg']</nowiki>}}
* SVG elements {{kbd | key=<nowiki>//*[name()='svg']//*[name()='YOUR OBJECT']</nowiki>}} <ref>[https://stackoverflow.com/questions/31520642/how-to-use-xpath-in-selenium-webdriver-to-grab-svg-elements java - How to use xPath in Selenium WebDriver to grab SVG elements? - Stack Overflow]</ref>
 
== References ==
* References


== references ==
<references/>
<references/>


Related articles
* [https://devhints.io/xpath Xpath cheatsheet]
{{Template:Troubleshooting}}


[[Category:WebDev]]
[[Category: Programming]]
[[Category: Web_Dev]]
[[Category: Javascript]]
[[Category: Data collecting]]
[[Category: Revised with LLMs]]
Retrieved from "https://wiki.planetoid.info/index.php/Xpath_tools"