Xpath tools

List of tools for xpath expression selection/query

Comparison of xpath tools

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

List matched elements by XPath rule

Open the browser console in Chrome or Edge :

1. Menu: Tools → Developer Tools → Console
2. To verify elements matching an XPath rule, type the expression using $x(). For example, to find all images, enter $x("//img") 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 XPath rule //div[@id="showvender"]/a:

// 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'));

List matched elements by CSS selector

To quickly list all elements matching a CSS selector, use $$("css-selector") in the console. For example, to find all images, enter $$("img") 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 div#showvender a:

// 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'));

Highlight matched elements by XPath rule

By XPath rule:

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';
});

Highlight matched elements by CSS selector

By CSS selector:

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';
});

XPath Browser extensions

XPath Helper for Chrome

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

SelectorsHub for Chrome

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

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

CSS Selector[1] for Chrome

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

Firebug + FirePath for Firefox

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

Sublime text editor

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: ctrl + shift + p on Win or command + shift + p on macOS )
2. and select Xpath: Query document
3. input the Xpath expression

Other tools

• 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

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

References

• References

Related articles

• Xpath cheatsheet

Troubleshooting of ...

• Troubleshooting of Excel errors

• PHP, cUrl, Python, selenium, HTTP status code errors

• Database: SQL syntax debug, MySQL errors, MySQLTuner errors or PostgreSQL errors

• Troubleshooting of regular expression

• 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

• Bug report template