Xpath tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
List of tools for xpath expression selection/query
List of tools for xpath expression selection/query


== chrome javascript console ==
== Comparison of xpath tools ==
{{chrome}} javascript console
 
<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>
 
== Browser console ==
 
Browser console of {{chrome}} or {{Edge}}
# 選單: 工具 -> 開發人員工具 -> Console
# 選單: 工具 -> 開發人員工具 -> Console
# 確認符合 XPath 規則的結果，例如 XPath 規則是 {{kbd | key = <nowiki>"//img"</nowiki>}}，可在 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>：
# 確認符合 XPath 規則的結果，例如 XPath 規則是 {{kbd | key = <nowiki>"//img"</nowiki>}}，可在 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><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://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg
 
https://planetoid.info/images/xpath_result_on_browser_console.jpg
 
擷取指定 XPath 的元素文字，清理後以換行分隔顯示。下方例子的 XPath 規則是 {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}
<pre>
// 使用 document.evaluate 取得所有元素
const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
// 建立陣列來存放所有元素的文字
const textArray = [];


image hosted by [https://www.flickr.com/photos/planetoid/15103179455/ flickr]
// 遍歷所有元素
for (let i = 0; i < result.snapshotLength; i++) {
    const element = result.snapshotItem(i);
    // 去除換行符號並加入陣列
    const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();
    textArray.push(cleanedText);
}


== chrome extension ==
// 用換行符號連接所有元素
[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]
console.log(textArray.join('\n'));
</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 (顯示在網頁上方)
# 輸入 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


image hosted by [https://www.flickr.com/photos/planetoid/15102884872/in/photostream/ flickr]
[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub] for {{Chrome}}


# 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 線上應用程式商店]
[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店] for {{Chrome}}


# 開啟「開發人員工具」
# 開啟「開發人員工具」
# 點選標籤「WebSync」-> 輸入 xpath 規則
# 點選標籤「WebSync」-> 輸入 xpath 規則


== firefox extension ==
[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}}
[https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}
# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
Line 31: Line 80:


== Sublime text editor ==
== Sublime text editor ==
[https://packagecontrol.io/packages/xpath xpath - Packages - Package Control]: "[https://www.sublimetext.com/ Sublime Text] plugin for easier cursor navigation of XML and HTML files using XPath 1.0."
[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
Steps
# Menu: Tools -> Command Palette
# Open the Command Palette
# Xpath: Query document
#* Menu: Tools -> Command Palette
# input Xpath expression
#* 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 ==
== Other tools ==
* [https://xpath.curiousconcept.com/ XPath Expression Tester] for XML {{access | date=2020-06-09}}
* [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}}
* [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 ==

Latest revision as of 00:55, 21 November 2024

List of tools for xpath expression selection/query

Comparison of xpath tools[edit]

Method Pros Cons
chrome extension XPath Helper worked on online webpage NOT work on offline file
Sublime xpath plugin worked on offline file NOT work on online webpage

Browser console[edit]

Browser console of Chrome Browser chrome.png or Edge

  1. 選單: 工具 -> 開發人員工具 -> Console
  2. 確認符合 XPath 規則的結果，例如 XPath 規則是 "//img"，可在 Console 輸入 $x("//img") ，按 Enter。就會顯示符合 xpath 規則的結果[1][2]：

xpath_result_on_browser_console.jpg

擷取指定 XPath 的元素文字，清理後以換行分隔顯示。下方例子的 XPath 規則是 //div[@id="showvender"]/a 

// 使用 document.evaluate 取得所有元素
const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

// 建立陣列來存放所有元素的文字
const textArray = [];

// 遍歷所有元素
for (let i = 0; i < result.snapshotLength; i++) {
    const element = result.snapshotItem(i);
    // 去除換行符號並加入陣列
    const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();
    textArray.push(cleanedText);
}

// 用換行符號連接所有元素
console.log(textArray.join('\n'));

XPath Browser extensions[edit]

XPath Helper for Chrome Browser chrome.png

  1. 不支援 file:///
  2. 輸入 ctrl + shift + x 或點選工具列上的 x 圖示，開啟 XPath Helper console (顯示在網頁上方)
  3. 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
xpath_helper.jpg

SelectorsHub for Chrome Browser chrome.png

  1. After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器
  2. Open DevTools. 打開「開發人員工具」
  3. Click on SelectorsHub tab. 點選「元素」標籤，再點選最右邊的「SelectorsHub」
  4. Here it will show all possible xpath, selectors for inspected element.
  5. To build your own xpath or CSS Selector, start typing in the selector input box.

Natu WebSync - Chrome 線上應用程式商店 for Chrome Browser chrome.png

  1. 開啟「開發人員工具」
  2. 點選標籤「WebSync」-> 輸入 xpath 規則

CSS Selector[1] for Chrome Browser chrome.png

  • 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。

Firebug + FirePath for Firefox browser_firefox.png

  1. 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
  2. 切換到 FirePath 標籤
  3. 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方

Sublime text editor[edit]

xpath plugin: "Sublime Text plugin for easier cursor navigation of XML and HTML files using XPath 1.0."

Steps

  1. Open the Command Palette
    • Menu: Tools -> Command Palette
    • or press the keyboard shortcut[3]: ctrl + shift + p on Win Os windows.png or command + shift + p on macOS icon_os_mac.png )
  2. and select Xpath: Query document
  3. input the Xpath expression

Other tools[edit]

Xpath syntax examples[edit]

  • SVG //*[local-name() = 'svg']
  • SVG elements //*[name()='svg']//*[name()='YOUR OBJECT'] [4]

References[edit]

  • References
  1. ↑ Is there a way to get the xpath in google chrome? - Stack Overflow
  2. ↑ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng’s Blog
  3. ↑ sublimetext3 - Sublime Text - XPath Plugin shortcut - Stack Overflow
  4. ↑ java - How to use xPath in Selenium WebDriver to grab SVG elements? - Stack Overflow

Related articles


Troubleshooting of ...

Template

Retrieved from "https://wiki.planetoid.info/index.php?title=Xpath_tools&oldid=25178"