[Automation tutorial] Tìm hiểu về Xpath, CSS Selector và Playwright Selector

Trong tự động hóa kiểm thử ứng dụng web, việc lựa chọn đúng các selectors là rất quan trọng để tương tác với các phần tử HTML. Sau đây là sự phân biệt giữa XPath, CSS Selector và Playwright Selector

1. Xpath

XPath (XML Path Language) là một ngôn ngữ truy vấn mạnh mẽ được sử dụng để xác định vị trí các phần tử trong document định dạng XML và HTML.

• Ưu điểm:
  • Có thể truy cập các phần tử dựa trên cấu trúc cây DOM.
  • Hỗ trợ tìm kiếm các phần tử với điều kiện phức tạp.
• Nhược điểm:
  • Cú pháp phức tạp hơn so với CSS Selector.
  • Hiệu suất chậm hơn khi truy vấn trên các document lớn.
• Ví dụ:

//div[@id='title']
//a[text()='Click here']

2. CSS Selector

CSS Selector là một cú pháp đơn giản và phổ biến được sử dụng để chọn các phần tử trong HTML dựa trên tên thẻ, lớp, ID, và các thuộc tính khác.

• Ưu điểm:
  • Cú pháp ngắn gọn và dễ hiểu.
  • Hiệu suất nhanh hơn so với XPath.
  • Phổ biến và dễ sử dụng cho các lập trình viên web.
• Nhược điểm:
  • Hạn chế trong việc truy vấn các phần tử dựa trên cấu trúc phức tạp của DOM.
  • Không thể truy cập các phần tử dựa trên vị trí tương đối như XPath.
• Ví dụ:

#example
.button-class
div > a

3. Playwright Selector

Playwright Selector là một tập hợp các bộ chọn được tối ưu hóa cho Playwright, cho phép chọn các phần tử dựa trên cú pháp và các tiêu chí khác nhau.

• Ưu điểm:
  • Linh hoạt, cho phép sử dụng cả XPath và CSS Selector.
  • Hỗ trợ các bộ chọn đặc biệt như text và role.
  • Tích hợp sâu với Playwright, hỗ trợ tốt cho tự động hóa kiểm thử.
• Nhược điểm:
  • Yêu cầu phải học các cú pháp đặc trưng của Playwright nếu muốn tận dụng hết các tính năng.
• Ví dụ:

'text="Submit"'
'css=button.submit'
'xpath=//div[@id="example"]'

Tóm lại

• XPath: Mạnh mẽ và linh hoạt, phù hợp cho các truy vấn phức tạp dựa trên cấu trúc DOM.
• CSS Selector: Đơn giản và hiệu quả, phù hợp cho các truy vấn thông thường dựa trên thuộc tính của phần tử.
• Playwright Selector: Linh hoạt và tích hợp tốt với Playwright, cho phép kết hợp các loại bộ chọn khác nhau và các bộ chọn đặc biệt.

Hiểu rõ sự khác biệt giữa các bộ chọn này sẽ giúp bạn chọn đúng công cụ cho từng tình huống cụ thể, tăng hiệu quả và độ chính xác trong việc tự động hóa kiểm thử ứng dụng web.

Nguồn: https://playwrightvn.com/blog/tim-hieu-ve-xpath-css-selector-va-playwright-selector-voi-typescript/

You need to login in order to like this post: click here