XPath 線上測試工具

什麼時候用得著它

寫爬蟲想提取網頁裡所有商品價格的連結，或者除錯自動化測試指令碼裡的元素定位，又或者只是好奇某段HTML裡某個標籤到底有幾個——用XPath可以一句話定位。但XPath寫對了沒？表示式容易手滑。我們的XPath線上測試工具讓你貼一份HTML/XML文件，寫上XPath，立即顯示匹配數量和高亮內容，省去反覆重新整理頁面或開啟開發者工具的麻煩。

概念一句話

XPath是一種在XML文件裡找節點的路徑語言，類似檔案系統的目錄路徑。比如//div[@class='price']表示“所有class屬性等於price的div元素”。把它想象成給文件裡的元素一個“地址”，你用這個地址就能直接拿到它們。開發者經常用它來從網頁裡提取資料，或者控制自動化流程。

怎麼用這個工具

1. 準備測試文件：開啟我們的工具頁面，你會看到一個大的多行文字框（標籤是“XML/HTML 文件”）。把你需要測試的網頁原始碼或XML片段貼上進去。如果手邊沒有，可以用示例資料按鈕載入一段預設的HTML。
2. 寫 XPath 表示式：在旁邊的輸入框（標籤是“XPath 表示式”）裡輸入你的選擇路徑。比如//a/@href表示提取所有超鏈接的地址。
3. 點選“測試”按鈕：工具會立即解析文件，執行表示式。
4. 看結果：下方“匹配結果”區域會顯示匹配到的節點數量，並以列表形式展示每個節點的文字或屬性值。如果文件中有高亮功能，匹配的節點還會在文件預覽中被標記出來。
5. 調整表示式：如果結果不對，修改XPath再次點選測試，直到拿到想要的資料。

完整算例：提取商品列表

假設你有一段簡單的商品HTML（貼上到文件框）：

<div id="products">
  <div class="item">
    <span class="name">無線滑鼠</span>
    <span class="price">¥39.9</span>
  </div>
  <div class="item">
    <span class="name">機械鍵盤</span>
    <span class="price">¥129</span>
  </div>
</div>

你想提取所有商品名稱。在XPath框輸入：//span[@class='name']/text()。點選測試，結果區域會顯示“匹配到2個節點”，並列出：
1. 無線滑鼠
2. 機械鍵盤
假如你想一次性拿到名稱和價格，可以用聯合選擇或返回元素的父節點，但初學者先用簡單表示式。

再看一個對照例：如果你寫//span[@class='price']（不加/text()），匹配結果會顯示“2個節點”，但每個節點是<span class="price">¥39.9</span>這樣的整個標籤——因為XPath預設返回節點，不是文字。如果你的目的是拿數字，記得加/text()或string()。

典型使用場景

• 爬蟲寫手：從電商頁面抓取商品標題、價格，先用工具驗證XPath表示式，免得程式碼跑起來才發現路徑不對。
• 前端自動化測試：用 Selenium 或 Playwright 寫元素定位時，先拿一段 HTML 片段在這兒測好 XPath，再複製到測試指令碼裡。
• 資料分析師：偶爾需要從 XML 配置檔案或 RSS Feed 摘資料，用 XPath 快速篩選，這個工具免去安裝任何軟體。
• API 除錯：某些介面返回 XML 資料，想提取特定欄位，貼上進去試表達式看結果。

常見誤用 / 易踩的坑

• 忘記名稱空間：如果文件裡有預設名稱空間（比如 SOAP 或 SVG），//tag 往往不匹配，需要先註冊名稱空間字首。我們的工具目前只支援無名稱空間或顯式字首的匹配，遇到名稱空間時請先手動移除或改用local-name() 函式。
• 大小寫敏感：XPath 對標籤名和屬性名大小寫敏感。HTML 裡經常混用大小寫，比如<Div> 和 <div> 是兩個不同的節點，寫表示式時要注意。
• 誤用 // 導致效能問題：雖然工具處理小文件很快，但在真實大文件裡濫用 // 會掃描全部節點，建議用具體路徑如 /html/body/div[1]/ 來提高效率。
• 路徑中多空格：//div [@class=...]（方括號前有空格）是語法錯誤，工具會提示“Invalid expression”。寫表示式時不要亂加空格。
• 以為 text() 能取到所有文字：text() 只返回直接文字子節點，巢狀元素裡的文字不會自動合併。要取全部文字可以用 string() 或 normalize-space()。

注意事項 / 邊界與侷限

• 文件大小限制：爲了頁面響應速度，我們限制了貼上的 XML/HTML 文件不超過 500KB。超大的檔案建議拆成片段測試。
• 不支援 XSLT 等擴充套件函式：工具僅實現標準 XPath 1.0（大部分瀏覽器預設實現）。XPath 2.0/3.0 裡的算術、型別轉換、正則等函式不支援。
• 名稱空間處理：目前無法自動處理預設名稱空間，需要你手動在表示式中用 local-name() 或先去除名稱空間宣告。
• 執行環境：工具執行在瀏覽器前端，不儲存你的文件和表示式，重新整理頁面即丟失，請及時儲存結果。
• 不要用來測試敏感資料：雖然是本地處理，但注意網路傳輸過程（HTTPS 加密），建議不要貼上包含密碼、金鑰等機密資訊。

常見問題 FAQ

1. 我貼了 HTML，但是 XPath 查不到任何節點
   檢查一下你的 HTML 是否規範（比如標籤是否閉合、屬性值是否用引號）。不規範的 HTML 可能會導致解析出意外結構，試試先用瀏覽器開發者工具複製“複製 outerHTML”。
2. 表示式對了，但返回的結果是空列表
   可能的原因是：路徑寫錯了大小寫、屬性值拼寫錯誤，或者你在 XPath 裡用了 @class='value' 但實際屬性值前後有空格。可以先用 //* 看看所有元素，再逐步縮窄。
3. 支援 contains() 函式嗎？
   支援的。例如 //div[contains(@class, 'price')] 可以匹配 class 屬性包含“price”的 div。
4. 我想提取超鏈接的 href 和文字，怎麼寫？
   用 //a 返回所有 a 元素，然後結果框會顯示節點的文字（inner text）。要拿 href 屬性，用 //a/@href，但注意返回的是屬性節點，文字為空。可以同時寫兩個表示式分兩次測試，或者用多表達式功能（如果工具有提供）。
5. 這個工具能測試 XPath 在真實網站的效果嗎？
   它只能測試你貼上的靜態文件。工具不會去請求網路，所以無法模擬動態載入的內容。如需測試動態頁面，請結合瀏覽器開發者工具。
6. 結果框顯示 [object Text] 之類的，不是我要的文字
   這是因為 XPath 返回了文字節點物件而不是字串。在表示式末尾加 /text() 或 /string() 可以拿到字串。

現在你可以在上方的輸入框裡試試自己的 HTML 和 XPath 表示式了。