Test XPath & CSS Selector

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

Công cụ mạnh mẽ để test XPath expressions và CSS selectors trên HTML content. Xem ngay lập tức các elements nào khớp với selectors của bạn với highlighting và kết quả chi tiết. Hoàn hảo cho web scraping, automation testing và học selectors.

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

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