Test XPath & CSS Selector

Test XPath & CSS Selector - Test Selectors và XPath Trực Tuyến

Selector là hệ thống định địa chỉ của web: mọi inspector của trình duyệt, mọi web scraper (BeautifulSoup, Scrapy, Cheerio, Playwright, Selenium), mọi framework kiểm thử end-to-end, mọi quy tắc CSS và mọi truy vấn jQuery cuối cùng đều phân giải thành một biểu thức XPath hoặc CSS selector trên cây DOM đã phân tích. Viết selector khớp chính xác các nút bạn muốn — không hơn, không kém — khó hơn vẻ ngoài: HTML thực tế lộn xộn, class và ID thay đổi giữa các build, và cùng một 'phần tử' logic có thể truy cập qua hàng tá đường dẫn khác nhau với độ ổn định khác nhau. Trình kiểm tra này khép vòng phản hồi: dán HTML thực bạn nhắm tới (từ 'Xem nguồn' của trình duyệt, một phản hồi fetch, hoặc bất kỳ tài liệu nào), gõ hoặc tinh chỉnh selector, và xem ngay lập tức bao nhiêu phần tử khớp cùng HTML render chính xác của từng khớp. Chuyển giữa XPath 1.0 (chuẩn W3C được mọi trình duyệt hỗ trợ qua document.evaluate và mọi thư viện scraping) và CSS Level 3 (cú pháp dùng bởi querySelectorAll, các thao tác tương tự getElementsByClassName, và hầu hết API scraping hiện đại) chỉ với một cú nhấp. Dùng nó để debug locator Selenium bị hỏng, prototype trường Scrapy, kiểm tra quy tắc chặn nội dung, học sự khác biệt giữa combinator hậu duệ và con trực tiếp, hoặc đơn giản trả lời câu hỏi 'tại sao selector của tôi không khớp?' mà không cần khởi chạy trình duyệt headless đầy đủ.

XPath là gì?

XPath (XML Path Language) là ngôn ngữ truy vấn để chọn nodes từ các tài liệu XML/HTML. Nó thường được dùng cho:

- Web scraping
- Automated testing (Selenium, Puppeteer)
- Trích xuất dữ liệu từ HTML
- Xử lý XML

Ví dụ XPath expressions:
- //div[@class='title'] - Tất cả div elements có class 'title'
- //a[@href] - Tất cả links có thuộc tính href
- //p[1] - Paragraph element đầu tiên
- //div[@id='main']//p - Tất cả p bên trong div có id 'main'

XPath mạnh mẽ cho selections phức tạp và điều hướng cấu trúc document.

CSS Selectors là gì?

CSS Selectors là patterns dùng để chọn HTML elements dựa trên attributes, classes, IDs và relationships của chúng. Chúng được dùng cho:

- Styling elements với CSS
- Chọn elements trong JavaScript
- Web scraping
- Automated testing

Ví dụ CSS selectors:
- div.title - Div có class 'title'
- #header - Element có id 'header'
- a[href] - Tất cả links có thuộc tính href
- div > p - Các p con trực tiếp của div
- p:first-child - P element đầu tiên

CSS selectors đơn giản hơn XPath cho hầu hết selections phổ biến.

Làm thế nào để sử dụng tester này?

Sử dụng tester rất đơn giản:

1. Chọn loại selector (XPath hoặc CSS Selector)
2. Nhập HTML của bạn vào trường 'HTML Input'
3. Nhập XPath expression hoặc CSS selector của bạn
4. Nhấp 'Test Selector' để xem kết quả khớp
5. Xem số lượng elements khớp và HTML được highlighted

Công cụ sẽ:
- Validate cú pháp selector của bạn
- Hiển thị bao nhiêu elements khớp
- Highlight các elements khớp trong HTML
- Hiển thị text content của các elements khớp

XPath vs CSS Selector - Nên dùng cái nào?

Cả hai đều có điểm mạnh riêng:

CSS Selectors:
- Cú pháp đơn giản hơn
- Performance nhanh hơn
- Quen thuộc hơn với web developers
- Tốt hơn cho selections dựa trên styling
- Giới hạn trong việc điều hướng xuống (descendant)

XPath:
- Mạnh mẽ và linh hoạt hơn
- Có thể điều hướng lên (chọn parent)
- Tốt hơn cho điều kiện phức tạp
- Có thể chọn theo text content
- Có thể dùng logical operators (and, or)
- Tốt hơn cho XML documents

Khuyến nghị:
- Dùng CSS selectors khi có thể (đơn giản hơn, nhanh hơn)
- Dùng XPath cho selections phức tạp hoặc khi cần chọn parent

XPath Expressions phổ biến

Các patterns XPath hữu ích:

Cơ bản:
- //tagname - Tất cả elements với tag
- //div - Tất cả div elements
- //div[@class='name'] - Div với class cụ thể
- //div[@id='main'] - Div với ID cụ thể

Attributes:
- //a[@href] - Elements có attribute
- //img[@alt='Logo'] - Giá trị attribute chính xác
- //a[contains(@href, 'example')] - Khớp một phần

Text:
- //p[text()='Hello'] - Khớp text chính xác
- //div[contains(text(), 'world')] - Khớp text một phần

Điều hướng:
- //div[@id='main']//p - Tất cả p descendants
- //div[@id='main']/p - Các p con trực tiếp
- //p[1] - P element đầu tiên
- //p[last()] - P element cuối cùng

Làm thế nào viết selector tồn tại qua các lần thiết kế lại website?

Ưu tiên tín hiệu ổn định hơn dễ vỡ. (1) Dùng thuộc tính ngữ nghĩa mà developer ít có khả năng thay đổi: data-testid, data-cy, name, aria-label, role — thường được thêm vào cho kiểm thử và tồn tại qua các thay đổi giao diện. (2) Dùng nội dung văn bản với XPath khi nhãn hiển thị là cam kết: //button[normalize-space(.)='Thêm vào giỏ'] vẫn hoạt động dù mọi tên class thay đổi. (3) Tránh class tự tạo của framework như 'css-xn8q5e' từ styled-components hay 'jss123' từ MUI — chúng tái tạo mỗi build. (4) Tránh chuỗi tổ tiên sâu: 'div > div > div > div > p' sẽ vỡ ngay khi thêm hoặc bớt một div layout. (5) Tránh chỉ mục vị trí ('//tr[3]') trừ khi vị trí chính là ý nghĩa. (6) Khi buộc dùng class CSS, chọn class có ý nghĩa ngữ nghĩa nhất (.product-price), không phải cụ thể nhất (.text-sm.font-bold.text-red-500). Quy tắc chung: selector tốt đọc giống tiếng Anh đối với developer khác.

Vì sao XPath của tôi hoạt động trong trình duyệt nhưng thất bại trong Scrapy hoặc Selenium?

Ba lý do phổ biến. (1) Nội dung render bởi JavaScript: trình duyệt chạy JS của trang trước khi bạn kiểm tra, nên các phần tử DOM như giá sản phẩm hoặc bình luận có thể tồn tại trong DevTools nhưng vắng mặt trong HTML thô mà Scrapy/requests lấy. Giải pháp: dùng trình duyệt headless (Playwright, Selenium với Chrome) hoặc tìm API JSON mà trang gọi. (2) Namespace mặc định: tài liệu XHTML và SVG có thuộc tính xmlns buộc bạn đăng ký namespace trong thư viện XPath như lxml. Trình duyệt khoan dung; lxml nghiêm ngặt. Giải pháp: dùng local-name() — //*[local-name()='div'] — để bỏ qua namespace. (3) Phiên bản XPath: document.evaluate của trình duyệt chỉ hỗ trợ XPath 1.0, nhưng một số thư viện (lxml, Saxon) hỗ trợ hàm XPath 2.0+ như ends-with(), matches(), tokenize(). Nếu bạn viết XPath dựa trên lxml 2.0 và test trong DevTools, trình duyệt có thể báo không hợp lệ. Trình kiểm tra này dùng XPath 1.0 (giống trình duyệt) nên kết quả khớp với những gì Selenium/Puppeteer thấy.

Tôi có thể xuất selector sang mã Scrapy, Selenium hoặc Playwright không?

Có. Khi selector của bạn hợp lệ, mở bảng 'Sao chép dưới dạng mã' và chọn thư viện của bạn. Trình kiểm tra tạo ra lệnh gọi chính xác, được escape đúng cho chế độ hiện tại (XPath hoặc CSS):

- Scrapy: response.xpath("...").getall() hoặc response.css("...").getall()
- lxml: tree.xpath("...") hoặc tree.cssselect("...")
- Selenium (Python): driver.find_elements(By.XPATH, "...") hoặc By.CSS_SELECTOR
- Playwright (Python và JS): page.locator("xpath=...") hoặc page.locator("...")
- JS/DOM: document.evaluate(...) cho XPath hoặc document.querySelectorAll('...') cho CSS

Công cụ chọn loại dấu nháy KHÔNG được dùng bên trong selector và escape phần còn lại, nên bạn tránh được lỗi kinh điển By.CSS_SELECTOR vs By.XPATH và lỗi escape dấu nháy. Đây là điểm dừng cuối trước khi dán vào scraper hoặc bài test của bạn.

Công cụ có hỗ trợ hàm XPath 2.0 như matches() hoặc ends-with() không?

Không. Trình kiểm tra này dùng document.evaluate của trình duyệt, vốn chỉ là XPath 1.0 — cùng engine mà Selenium và Puppeteer dùng trên trang thật. Các biểu thức dựa vào hàm XPath 2.0+ sẽ báo 'XPath expression không hợp lệ' ở đây:

- matches(chuỗi, mẫu) — regex XPath 2.0, KHÔNG có sẵn
- ends-with(chuỗi, hậu tố) — XPath 2.0, KHÔNG có sẵn (dùng mẹo substring đảo ngược hoặc contains())
- tokenize(), replace(), lower-case(), upper-case() — XPath 2.0, KHÔNG có sẵn

Các lựa chọn XPath 1.0 thay thế CÓ hoạt động: contains(), starts-with(), normalize-space(), translate() (để đổi chữ hoa/thường), substring(), string-length() và mẹo local-name() cho namespace. Nếu một biểu thức chạy được trong lxml hoặc Saxon nhưng thất bại ở đây, gần như chắc chắn bạn đã dùng hàm 2.0 — viết lại bằng 1.0 để khớp với những gì trình duyệt và Selenium thực sự chạy.

Dữ liệu của tôi có an toàn không?

Có, dữ liệu của bạn hoàn toàn an toàn:

- Tất cả việc test selector diễn ra trong trình duyệt của bạn
- Không có dữ liệu nào được gửi đến server
- Chúng tôi không lưu trữ hoặc log bất kỳ HTML hoặc selectors nào
- Hoạt động hoàn toàn offline sau khi trang load
- Xử lý client-side mã nguồn mở

Bạn có thể xác minh bằng cách kiểm tra tab network của trình duyệt - không có requests nào được thực hiện khi test selectors.

Tính Năng Chính

• Test XPath expressions
• Test CSS selectors
• Chuyển đổi giữa chế độ XPath và CSS selector
• Validate cú pháp selector
• Hiển thị số lượng khớp
• Highlight các elements khớp trong HTML
• Sao chép dưới dạng mã cho Scrapy, lxml, Selenium, Playwright và JS/DOM
• Hiển thị content của elements khớp
• Hỗ trợ HTML nested phức tạp
• Test selector theo thời gian thực
• Copy selectors và kết quả
• Hỗ trợ chế độ tối
• Xử lý 100% phía client - dữ liệu không rời khỏi trình duyệt
• Hoạt động offline sau khi load ban đầu
• Thiết kế responsive thân thiện mobile