Xpath tools

From LemonWiki共筆
Jump to navigation Jump to search

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]

Chrome Browser chrome.png javascript console

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

15103179455_c452b70923.jpg

image hosted by flickr

chrome extension[edit]

XPath Helper

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

SelectorsHub

  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 線上應用程式商店

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

CSS Selector[1]

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

firefox extension[edit]

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 Mac 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

Related articles


Troubleshooting of ...

Template