CodeKitHub
Công cụ Mã nguồn

Công Cụ Kiểm Tra XPath

Cập nhật lần cuối:

XPath là một ngôn ngữ truy vấn dùng để chọn các node từ một tài liệu XML (hoặc HTML) bằng biểu thức đường dẫn, tương tự cách một đường dẫn file chọn ra một file trong cây thư mục. Công cụ này cho phép bạn dán bất kỳ đoạn XML nào, viết một biểu thức XPath, và xem ngay node nào khớp — bao gồm số lượng node, output đã serialize và các thông báo lỗi rõ ràng khi XML hoặc cú pháp XPath sai. Nó chạy hoàn toàn trong trình duyệt của bạn bằng engine `document.evaluate` tích hợp sẵn trong mọi trình duyệt hiện đại, nên không có gì bạn dán vào bị tải lên bất kỳ đâu.

Công Cụ Này Là Gì?

XPath (XML Path Language) là một tiêu chuẩn W3C dùng để điều hướng và chọn các node — phần tử, thuộc tính, văn bản — bên trong một tài liệu XML bằng cú pháp giống đường dẫn ngắn gọn, ví dụ `//book[price>30]/title` chọn mọi `<title>` có phần tử `<price>` cùng cấp lớn hơn 30, ở bất kỳ đâu trong tài liệu. Nó được các stylesheet XSLT, công cụ kiểm tra XML, các trình thu thập dữ liệu web (web scraper), các framework tự động hóa trình duyệt (Selenium, Playwright) và nhiều thư viện XML trong các ngôn ngữ lập trình sử dụng.

Phiên bản hiện tại được mọi trình duyệt lớn triển khai — Chrome, Firefox, Safari, Edge — là XPath 1.0, Khuyến nghị W3C gốc từ năm 1999. Công cụ này dùng chính engine gốc đó thông qua API `document.evaluate()` của trình duyệt, nên kết quả ở đây khớp với những gì bạn nhận được từ DevTools của trình duyệt hoặc bất kỳ đoạn JavaScript nào chạy trong trình duyệt. Nó không triển khai các đặc tả XPath 2.0/3.0/3.1 sau này (những phiên bản đó bổ sung các hàm như `for`, sequence, và khớp bằng regex) — xem phần Câu hỏi thường gặp để biết ý nghĩa thực tế của điều này.

Một biểu thức có thể trả về một trong hai loại kết quả: một node-set (không hoặc nhiều phần tử, thuộc tính hay node văn bản khớp, được công cụ này serialize và liệt kê mỗi dòng một kết quả kèm số lượng), hoặc một giá trị vô hướng — số, chuỗi hoặc boolean — khi bản thân biểu thức tính ra một giá trị, như `count(//book)` hoặc `//book[1]/title = 'Dune'`.

Tại Sao Nên Dùng?

  • Gỡ lỗi một biểu thức XPath trước khi gắn cứng nó vào một web scraper, một bài test Selenium/Playwright, hoặc một stylesheet XSLT.
  • Kiểm tra nhanh xem một biểu thức XPath cho trước có chọn đúng node bạn mong đợi từ một mẫu XML/HTML thật hay không.
  • Xem chính xác số lượng node khớp và output đã serialize thay vì phải đoán từ code.
  • Nhận ngay lỗi rõ ràng, dễ đọc khi XML sai định dạng hoặc cú pháp XPath không hợp lệ, thay vì một stack trace khó hiểu.
  • 100% xử lý phía client: XML và biểu thức của bạn không bao giờ rời khỏi trình duyệt.

Cách Sử Dụng

  1. Dán hoặc chỉnh sửa XML (hoặc HTML) của bạn trong ô nhập liệu — một tài liệu mẫu về hiệu sách đã được điền sẵn để bạn thấy công cụ hoạt động ngay.
  2. Gõ một biểu thức XPath vào trường biểu thức, hoặc chỉnh sửa ví dụ đã điền sẵn.
  3. Nhấn "Evaluate" (hoặc nhấn Enter trong trường biểu thức).
  4. Đọc các node khớp bên dưới, với số lượng hiển thị ở đầu; các kết quả vô hướng (số, chuỗi, boolean) được hiển thị trực tiếp.
  5. Nếu XML hoặc biểu thức không hợp lệ, một thông báo lỗi cụ thể sẽ thay thế phần kết quả.

Ví dụ

Đầu vào

XML:
<bookstore>
  <book><title>The Great Gatsby</title><price>12.99</price></book>
  <book><title>Learning XPath</title><price>34.50</price></book>
  <book><title>Dune</title><price>45.00</price></book>
</bookstore>

XPath: //book[price>30]/title

Đầu ra

✓ 2 node(s) matched
<title>Learning XPath</title>
<title>Dune</title>

Chỉ 2 trong 3 cuốn sách có giá trên 30, nên đúng 2 phần tử <title> được trả về — cuốn sách thứ ba (Gatsby, $12.99) bị loại đúng như mong đợi.

XPath và CSS selector nhìn tổng quan

Cả hai ngôn ngữ đều chọn node từ một tài liệu, nhưng chúng giải quyết những bài toán khác nhau. Hãy dùng bảng này để chọn công cụ phù hợp cho một tác vụ chọn lựa cụ thể.

Khả năngXPathCSS selector
Chọn theo tag/class/id đi xuốngCó — và thường nhanh hơn
Chọn theo nội dung/văn bản hiển thịCó — `contains(text(),'x')`Không
Di chuyển ngược lên phần tử cha/tổ tiênCó — `//div[span]/..`Không (`:has()` là một ngoại lệ một phần mới hơn)
So sánh giá trị giữa các phần tử anh em (ví dụ `price>30`)Không
Hoạt động ngoài trình duyệt (công cụ XML phía server, XSLT)Không — CSS selector chỉ dành riêng cho trình duyệt/DOM

Công cụ liên quan

Đang làm việc với các định dạng dữ liệu có cấu trúc? Những công cụ này kết hợp tốt với việc kiểm tra XPath.

Công Cụ Định Dạng JSON · Công Cụ Giải Mã JWT

Câu Hỏi Thường Gặp

XPath dùng để làm gì?

XPath chọn các node — phần tử, thuộc tính, hoặc văn bản — từ một tài liệu XML hoặc HTML bằng cú pháp đường dẫn. Đây là ngôn ngữ chọn lựa đứng sau các phép biến đổi XSLT, nhiều công cụ kiểm tra XML, và được dùng rộng rãi trong thu thập dữ liệu web và tự động hóa kiểm thử trình duyệt (Selenium, Playwright, Cypress) để định vị phần tử trên một trang, đặc biệt khi CSS selector đơn thuần không diễn đạt được điều kiện cần thiết.

XPath so với CSS selector — nên dùng cái nào?

Hai ngôn ngữ này có phần chồng lấn nhưng không tương đương nhau. XPath có thể chọn một phần tử cha dựa trên nội dung của phần tử con (`//div[span='Total']`), di chuyển ngược lên các phần tử tổ tiên, và chọn theo nội dung văn bản hiển thị (`//button[contains(text(),'Submit')]`) — CSS selector không thể di chuyển ngược lên trong cây và hoàn toàn không thể khớp theo nội dung văn bản. Nếu bạn chỉ cần chọn theo tag, class hoặc ID và đi xuống trong tài liệu, CSS selector đơn giản hơn để viết và nhìn chung đánh giá nhanh hơn. Hãy dùng XPath cụ thể khi bạn cần "chọn phần tử cha của đoạn văn bản này" hoặc "chọn theo nội dung phần tử ghi ra", chứ không chỉ dựa vào tag hay class.

Công cụ này có hỗ trợ các hàm của XPath 2.0 hay 3.0 không?

Không — và không trình duyệt nào hỗ trợ cả. Trình duyệt triển khai XPath 1.0 (Khuyến nghị W3C năm 1999) thông qua `document.evaluate()`, và công cụ này dùng chính engine gốc đó, nên kết quả chính xác với những gì bạn nhận được khi chạy cùng biểu thức trong DevTools của trình duyệt hoặc trong JavaScript. Các hàm và tính năng được đưa vào trong XPath 2.0/3.0/3.1 (như biểu thức `for`, sequence, hoặc `matches()` với regex) không khả dụng — chỉ các hàm 1.0 như `contains()`, `starts-with()`, `substring()`, `count()`, `position()` và `last()` hoạt động ở đây.

Một số biểu thức XPath phổ biến tôi nên biết là gì?

`//tag` chọn mọi `<tag>` ở bất kỳ đâu trong tài liệu. `//tag[@attr='value']` chọn các phần tử `<tag>` có thuộc tính `attr` bằng `value`. `//tag[contains(text(),'x')]` chọn các phần tử `<tag>` có văn bản trực tiếp chứa `x`. `//tag[1]` chọn phần tử `<tag>` đầu tiên trong mỗi cha. `//parent/child` chọn các phần tử `<child>` là con trực tiếp của `<parent>`. `count(//tag)` trả về một con số thay vì một node-set.

Công cụ này có xử lý namespace XML không?

Chỉ trường hợp phổ biến không dùng namespace được hỗ trợ tốt, và điều này bao phủ phần lớn XML/HTML viết tay hoặc thu thập được. Nếu tài liệu của bạn khai báo một namespace XML (ví dụ `xmlns="..."` trên phần tử gốc), `document.evaluate` yêu cầu một hàm resolver có nhận biết namespace để ánh xạ tiền tố sang URI, mà công cụ đơn giản này không thiết lập — các biểu thức trên XML có namespace có thể trả về không kết quả nào dù trông có vẻ đúng. Đây là hạn chế đã biết, không phải lỗi: hãy bỏ khai báo namespace khỏi mẫu của bạn, hoặc dùng hàm local-name() (ví dụ `//*[local-name()='title']`) như một cách khắc phục.

XML hoặc biểu thức XPath của tôi có được gửi lên máy chủ không?

Không. Mọi thứ chạy cục bộ bằng `DOMParser` và `document.evaluate()` tích hợp sẵn của trình duyệt — chính engine mà trình duyệt của bạn vốn đã dùng nội bộ. Không có gì bạn gõ hoặc dán vào rời khỏi thiết bị của bạn.

Công Cụ Liên Quan