Xpath tools: Difference between revisions
Jump to navigation
Jump to search
Tags: Mobile edit Mobile web edit |
|||
(10 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 | ||
== Comparison of xpath tools == | |||
<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 javascript console == | == chrome javascript console == | ||
{{chrome}} javascript console | {{chrome}} javascript console | ||
# 選單: 工具 -> 開發人員工具 -> 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://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg | ||
Line 12: | Line 32: | ||
[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper] | [https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper] | ||
# 不支援 {{kbd | key=<nowiki>file:///</nowiki>}} | |||
# 輸入 ctrl + shift + x 或點選工具列上的 x 圖示,開啟 XPath Helper console (顯示在網頁上方) | # 輸入 ctrl + shift + x 或點選工具列上的 x 圖示,開啟 XPath Helper console (顯示在網頁上方) | ||
# 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方 | # 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方 | ||
https:// | : https://planetoid.info/images/xpath_helper.jpg | ||
[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub] | |||
# 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 線上應用程式商店] | ||
Line 23: | Line 49: | ||
# 開啟「開發人員工具」 | # 開啟「開發人員工具」 | ||
# 點選標籤「WebSync」-> 輸入 xpath 規則 | # 點選標籤「WebSync」-> 輸入 xpath 規則 | ||
[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome] | |||
* 直接點選網頁元素,則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。 | |||
== firefox extension == | == firefox extension == | ||
Line 31: | Line 61: | ||
== Sublime text editor == | == Sublime text editor == | ||
[https://packagecontrol.io/packages/xpath xpath | [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 10:11, 13 November 2023
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 |
chrome javascript console[edit]
- 選單: 工具 -> 開發人員工具 -> Console
- 確認符合 XPath 規則的結果,例如 XPath 規則是 "//img",可在 Console 輸入 $x("//img") ,按 Enter。就會顯示符合 xpath 規則的結果[1][2]:
image hosted by flickr
chrome extension[edit]
- 不支援 file:///
- 輸入 ctrl + shift + x 或點選工具列上的 x 圖示,開啟 XPath Helper console (顯示在網頁上方)
- 輸入 xpath 規則。就會凸顯符合 xpath 規則的網頁元件地方
- 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.
Natu WebSync - Chrome 線上應用程式商店
- 開啟「開發人員工具」
- 點選標籤「WebSync」-> 輸入 xpath 規則
- 直接點選網頁元素,則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。
firefox extension[edit]
Firebug + FirePath for Firefox
- 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
- 切換到 FirePath 標籤
- 輸入 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
- Open the Command Palette
- Menu: Tools -> Command Palette
- or press the keyboard shortcut[3]: ctrl + shift + p on Win or command + shift + p on Mac )
- and select Xpath: Query document
- input the Xpath expression
Other tools[edit]
- XPath Expression Tester for XML [Last visited: 2020-06-09]
- Free Online XPath Tester / Evaluator for XML [Last visited: 2020-06-09]
- XPath online real-time tester, evaluator and generator for XML & HTML [Last visited: 2023-03-22]
Xpath syntax examples[edit]
- SVG //*[local-name() = 'svg']
- SVG elements //*[name()='svg']//*[name()='YOUR OBJECT'] [4]
References[edit]
- References
- ↑ Is there a way to get the xpath in google chrome? - Stack Overflow
- ↑ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng’s Blog
- ↑ sublimetext3 - Sublime Text - XPath Plugin shortcut - Stack Overflow
- ↑ java - How to use xPath in Selenium WebDriver to grab SVG elements? - Stack Overflow
Related articles
Troubleshooting of ...
- PHP, cUrl, Python, selenium, HTTP status code errors
- Database: SQL syntax debug, MySQL errors, MySQLTuner errors or PostgreSQL errors
- HTML/Javascript: Troubleshooting of javascript, XPath
- Software: Mediawiki, Docker, FTP problems, online conference software
- Test connectivity for the web service, Web Ping, Network problem, Web user behavior, Web scrape troubleshooting
Template