Chào mọi người, đây là chuỗi bài viết xuyên suốt quá trình tự học Automation testing với framework Playwright (sử dụng Typescript) của mình, trong quá trình học mình ghi chú và trình bày lại để dễ dàng ghi nhớ và chia sẻ tới cộng đồng. Do đó chắc chắn sẽ có nhiều thiếu sót, mọi người có thể góp ý đóng góp qua phần bình luận, mình sẽ ghi nhận và cải thiện <3

1. Lý do cần xác định phần tử trong DOM

Xác định phần tử trong DOM (Document Object Model) khi kiểm thử tự động là một phần quan trọng của quá trình kiểm thử phần mềm tự động. Dưới đây là một số lý do quan trọng vì sao việc này cần thiết, bởi vì:

• Trong kiểm thử tự động, mục tiêu chính là kiểm tra các tương tác với giao diện người dùng. Điều này bao gồm việc thao tác với các phần tử như nút, ô input, liên kết, v.v. Để thực hiện các thao tác này, bạn cần xác định rõ ràng phần tử mục tiêu trên trang web hoặc ứng dụng của bạn.
• Việc xác định phần tử trong DOM giúp đảm bảo rằng các thử nghiệm được thực hiện trên các phần tử thực sự tồn tại trên trang, đảm bảo chất lượng và sự ổn định của ứng dụng.
• Khi bạn cần thực hiện nhiều lần kiểm thử tương tự nhau, việc xác định phần tử trong DOM cho phép bạn tự động hóa việc thực hiện các thao tác lặp đi lặp lại trên các trang hoặc màn hình khác nhau.
• Khi phát triển và cập nhật ứng dụng, cấu trúc của trang web hoặc ứng dụng có thể thay đổi. Việc xác định phần tử trong DOM giúp bạn dễ dàng cập nhật các kiểm thử khi có sự thay đổi trong giao diện người dùng.

2. Tại sao lại sử dụng XPath thay vì các Selector?

Việc sử dụng XPath thay vì các selector khác (như CSS selector) trong automation testing có một số lợi ích và hữu dụng trong một số tình huống riêng biệt. Ở đây mình sẽ trình bày một số lý do và tình huống khi bạn nên sử dụng XPath như sau:

• XPath có khả năng xác định các phần tử dựa trên các điều kiện phức tạp hơn so với các selector thông thường. Nếu bạn cần lựa chọn dựa trên vị trí, phần tử cha/con, hoặc nhiều điều kiện kết hợp, XPath là lựa chọn tốt hơn.
• Nó cho phép bạn xác định phần tử dựa trên nội dung văn bản chứa trong nó, thậm chí cả khi không biết chính xác văn bản đó là gì. CSS selector thường hạn chế hơn trong việc làm điều này.
• XPath hỗ trợ các phép toán logic phức tạp hơn, cho phép bạn kết hợp nhiều điều kiện để xác định các phần tử. Điều này đặc biệt hữu ích khi bạn cần xác định các phần tử dựa trên nhiều thuộc tính hoặc điều kiện kết hợp.
• Ngoài ra nó còn cho phép bạn quét ngược theo cấu trúc của trang web, từ phần tử con lên phần tử cha. Điều này đặc biệt hữu ích khi bạn cần tìm kiếm các phần tử cha để sau đó xác định các phần tử con của chúng.
• XPath có thể sử dụng trên nhiều nền tảng khác nhau như HTML, XML, và cả ứng dụng di động. Điều này hữu ích khi bạn cần kiểm thử trên nhiều loại ứng dụng khác nhau.
• Khi bạn cần xử lý dữ liệu phức tạp trong tài liệu XML hoặc HTML, XPath cho phép bạn truy cập và trích xuất dữ liệu một cách linh hoạt hơn.

Tuy nhiên, trong một số trường hợp không phải luôn luôn sử dụng XPath. Tùy vào ngữ cảnh, chúng ta có thể lựa chọn phương pháp xác định phần tử trong DOM khác.

3. Các xác định phần tử trong DOM bằng XPath

Xác định XPath trong kiểm thử tự động là một kỹ năng quan trọng trong việc tự động hóa kiểm thử phần mềm. XPath giúp bạn định vị các phần tử trong cấu trúc của trang web hoặc ứng dụng của bạn để thực hiện các thao tác kiểm thử. Dưới đây là một số ví dụ về cách xác định XPath trong các tình huống khác nhau, cùng với các trường hợp cực kỳ chi tiết:

3.1. Xác định theo thẻ HTML đơn giản

Giả sử bạn có một trang web có một nút Đăng nhập, có thẻ HTML là <button>Đăng nhập</button>. Để xác định XPath cho nút này, bạn có thể sử dụng cú pháp sau:

//button[text()='Đăng nhập']

3.2. Xác định theo thuộc tính

Nếu bạn muốn xác định một phần tử dựa trên thuộc tính của nó, ví dụ như một ô input có id là username:

//input[@id='username']

Hoặc một phần tử input có class là username:

//input[@class='username']

3.3. Xác định theo vị trí

XPath cũng cho phép bạn xác định phần tử dựa trên vị trí của nó trong cấu trúc trang. Ví dụ, để chọn phần tử thứ hai trong danh sách các nút (khuyến khích các bạn tìm hiểu về CSS Selector trước khi đọc phần này):

//ul/li[2]/button

3.4. Xác định theo phần tử cha

Trong trường hợp bạn muốn chọn các phần tử con của một phần tử cha cụ thể, ví dụ: tất cả các ô input trong một form có class là login-form:

//form[@class='login-form']//input

3.5. Xác định theo văn bản chứa trong phần tử

Nếu bạn muốn xác định một phần tử dựa trên nội dung văn bản chứa trong nó có thẻ HTML là <p>Thanh Binh Bent</p>, bạn có thể sử dụng hàm contains():

//p[contains(text(), 'Thanh Binh Bent')]

3.6. Xác định theo nhiều điều kiện:

XPath cho phép bạn kết hợp nhiều điều kiện để xác định một phần tử cụ thể. Ví dụ, để xác định một liên kết có văn bản là “Đăng ký”và thuộc class “blog” với thẻ HTML là<a href="#" class="blog">Đăng ký</a>, chúng ta có XPath như sau:

//a[text()='Đăng ký' and @class='blog']

4. Kết luận

Trong bài viết này, chúng ta đã tìm hiểu qua cơ bản về việc xác định phần tử trong DOM bằng cách sử dụng XPath trong quá trình kiểm thử tự động. Chúng ta đã tìm hiểu về cách XPath là một công cụ mạnh mẽ cho việc định vị các phần tử trên trang web hoặc ứng dụng của chúng ta, cho phép chúng ta thực hiện các thao tác kiểm thử một cách linh hoạt và hiệu quả. Ngoài ra sẽ còn có một số cách xác định XPath chưa được cập nhật trong bài viết, mình sẽ cập nhật thường xuyên đầy đủ nhất.

Chúng ta đã tìm hiểu cách sử dụng cú pháp XPath để xác định các phần tử dựa trên vị trí, thuộc tính, văn bản, và điều kiện logic phức tạp. Sử dụng XPath cho phép chúng ta thực hiện kiểm thử tự động một cách hiệu quả, đáng tin cậy và dễ dàng duy trì, đồng thời đảm bảo chất lượng và tính nhất quán của ứng dụng trong quá trình phát triển và cập nhật.

Cảm ơn bạn đã theo dõi bài viết!

Thanh Bình.

Lượt xem: 408