Nếu bạn bắt tay vào làm công việc Kiểm thử tự động Web UI, thì có thể bạn sẽ dành phần lớn thời gian để tìm các phần tử – element trên trang web như các button, text box, tag, div. Việc tìm kiếm các phần tử có thể là một thách thức khi chúng thiếu ID duy nhất hay tên class duy nhất. Bài viết hôm nay mình sẽ giới thiệu về các phần tử trên một trang web cũng như cách để định vị chúng bằng locator trong Kiểm thử tự động.
Nào hãy cùng mình tìm hiểu nhé!
Phần Tử Web Là Gì?
Phần tử Web hay Web element một thực thể riêng lẻ được hiển thị trên trang Web. Mọi thứ người dùng nhìn thấy trên một trang Web (và cả một số thứ không nhìn thấy được) đều là các phần tử: tiêu đề, nút ấn, trường nhập liệu, vùng văn bản, v.v.. Các phần tử này được chỉ định trong HTML theo tên thẻ – tag name, thuộc tính – attributes và nội dung – contents. Chúng cũng có thể có các phần tử con – child element, chẳng hạn như một bảng chứa các hàng, danh sách thả xuống – dropdown list. CSS có thể được áp dụng cho các phần tử để tạo kiểu cho chúng bằng màu sắc, kích thước, vị trí, v.v. Các ngôn ngữ lập trình thường truy cập các phần tử Web dưới dạng các nodes trong DOM (Document Object Model).
Một số ví dụ về các phần tử web phổ biến bao gồm:
<p>: Đại diện cho một đoạn văn bản.<img>: Hiển thị một hình ảnh trên trang web.<button>: Tạo một nút bấm mà người dùng có thể nhấn để thực hiện một hành động.<input>: Tạo một ô nhập liệu để người dùng có thể nhập dữ liệu.<table>: Đại diện cho một bảng dữ liệu được hiển thị trên trang web.
Thế Còn Web Element Locator Là Gì?
Web element và locator là hai thứ khác nhau. Web element locator là một đối tượng để tìm và trả về các phần tử web trên một trang bằng cách sử dụng câu truy vấn – query. Nó cho phép nhà phát triển hoặc người kiểm thử định vị và tương tác với các phần tử HTML, CSS hoặc JavaScript trên một trang web. Nói tóm lại, locators dùng để tìm elements.
Locator có quan trọng đối với Kỹ sư kiểm thử tự động không? Câu trả lời là rất quan trọng. Nếu như người dùng có thể tương tác với trang web một cách trực quan: chúng ta nhìn, scroll, nhấp chuột, gõ thông qua trình duyệt. Thì công việc kiểm thử tự động đòi hỏi phải tương tác với trang web thông qua lập trình. Nghĩa là chúng cần được mã hoá bằng code để tìm và thao tác với các thành phần của web. Kiểm thử tự động sẽ không “nhìn” trang web như con người. Thay vào đó, nó sẽ tìm kiếm trên DOM.
Mình lấy ví dụ về việc sử dụng Selenium WebDriver để kiểm thử tự động cho trang web. Thì Selenium WebDriver tách biệt một quan tâm về vị trí phần từ và sự tương tác. Việc gọi WebDriver cho chúng thường được viết liền nhau:
Để truy vấn locator của phần tử web, WebDriver có thể sử dụng một số cách thông qua việc sử dụng “By.” như sau:
Tìm Kiếm Locator Bằng Việc Sử Dụng DevTools Trên Trình Duyệt Chrome
Không nhất thiết phài sử dụng DevTools trên trình duyệt Chrome để tìm kiếm locator của các phần tử web. Chúng ta có thể tìm kiếm trên các trình duyệt khác như Mozilla Firefox, Apple Safari, Microsoft Edge… Tuy nhiên Chrome vẫn là sự lựa chọn số một của mình. Tại sao lại chọn Chrome? Bởi:
- Chrome là trình duyệt phổ biến được hầu hết mọi người sử dụng
- Công cụ dành cho nhà phát triển của Chrome thực sự dễ sử dụng và cung cấp tiện ích phong phú
Để kiểm tra bất kỳ trang web nào trong Chrome, bạn chỉ cần lựa chọn một trong số những cách sau:
- Chọn Menu Chrome ở phía trên góc phải cửa sổ trình duyệt của bạn, sau đó chọn Tools -> Developer Tools.
- Nhấp phải chuột ở bất kỳ vị trí nào trên trang web của bạn, chọn Inspect
- Dùng phím tắt Ctrl+Shift+I trên Win, (hoặc Cmd+Opt+I trên Mac)
Khi DevTools mở lên, để tìm kiếm phần tử web, hãy ấn vào tab Elements.
Sau đó nhấp chuột vào “select” tool ở góc trên bên trái của DevTools pane (hình ô vuông có con trỏ trên đó). Biểu tượng sẽ chuyển sang màu xanh lam.
Tiếp theo, di chuyển con trỏ đến phần tử mong muốn trên trang. Bạn sẽ thấy mỗi phần tử được đánh dấu bằng các màu khác nhau khi di chuột qua. Mã nguồn HTML tương ứng trong tab Elements cũng sẽ được đánh dấu đồng thời. Nhấp chuột vào phần tử mong muốn để phần tô sáng không biến mất khi bạn di chuyển con trỏ sang nơi khác.
Từ đây, bạn có thể kiểm tra thẻ – tag, các lớp – class, thuộc tính – attributes, nội dung – content, cha – parents và con – children của phần tử.
Mẹo Sử Dụng Locator Trong Kiểm Thử Độc Lập
Bạn đã biết các phần tử web, cách tìm kiếm locator của chúng bằng cách inspect. Nhưng đó mới chỉ là nửa cuộc hành trình. Tạo một truy vấn định vị phần tử là một nửa còn lại. Nếu locator quá rộng nó có thể trả về kết quả dương tính giả – false positives. Tuy nhiên, nếu một công cụ định vị quá cụ thể, thì nó có thể dễ bị hỏng bất cứ khi nào DOM thay đổi và người khác cũng có thể khó đọc. Triết lý tốt nhất là thế này: Viết truy vấn định vị đơn giản nhất để xác định duy nhất (các) phần tử đích.
Lời khuyên dành cho bạn là, hãy truy vấn định vị phần tử theo thứ tự ưu tiên:
- ID (nếu nó là duy nhất)
- Name (nếu nó là duy nhất)
- Class name
- CSS Selector
- XPath không kèm text hay indexing
- Link text / partial link text
- XPath không kèm text hoặc/và indexing
Nếu ID, name, class nam là duy nhất, thì việc định vị phần tử cực kỳ dễ dàng: truy vấn ngắn và không cần thêm ký tự neo nào. Tuy nhiên, nhiều phần tử không có chúng, điều đó có nghĩa là locator phải dựa vào CSS selector và XPath phức tạp hơn. Bất cứ khi nào điều này xảy ra, thì đây là một số lời khuyên của mình dành cho bạn:
- Sử dụng các phần tử cha làm điểm neo nếu chúng có các định danh duy nhất.
- Ví dụ CSS selector: “#some-list > li”
- Ví dụ XPath: “//ul[@id=’some-list’]/li”
- Tránh dùng XPaths sử dụng text hoặc indexing nếu được
- Ví dụ tồi: “//div[3]//span[text()=’hello’]”
- Điều này có xu hướng làm việc kiểm thử dễ thất bại hơn
- Sử dụng hàm “contains” khi kiểm tra cho các class trong XPath
- Ví dụ: “//div[contains(@class, ‘some-class’)]”
- Các phần tử thường có nhiều hơn một class
- “contains” sẽ kiểm tra chuỗi con thay vì một chuỗi class đầy đủ
- Tuy nhiên, hãy cẩn thận vì “some-class2” có thể bị khớp
Cũng luôn luôn kiểm tra locator. Lỗi cú pháp hay dương tính giả xảy ra thường xuyên. Chrome DevTools giúp việc kiểm tra locators trở lên dễ dàng. Chỉ cần nhấn Ctrl-F trên tab Phần tử rồi dán truy vấn định vị vào trường công cụ tìm. DevTools sẽ đánh dấu tất cả các yếu tố phù hợp theo thứ tự.
Đôi khi, bạn có thể không hiểu nổi tại sao một locator không hoạt động trong một testcase, và lúc đó công việc cần nào của bạn để tìm hiểu nguyên nhân là:
- Chạy test case đó trong debugging từ IDE của mình
- Đặt break point tại locator
- Đợi test case đó dừng tại break point đã đặt
- Nhập DevTools trên cửa sổ Chrome đang chạy
- Kiểm tra DOM và locators trực tiếp trên trang
Làm Gì Nếu Các Bài Kiểm Thử Tự Động Không Ổn Định?
Web UI testing thường bị chỉ trích nặng nề là “không ổn định” vì các thử nghiệm thường gặp sự cố vì những lý do không mong muốn. Tuy nhiên, phần lớn những người không tin cậy gặp phải trong Web UI testing (và thường với chính Selenium WebDriver) là tất cả các tương tác Web vốn đã đặt ra các điều kiện cạnh tranh. Kiểm thử tự động và trình duyệt chạy độc lập, vì vậy các tương tác phải được đồng bộ hoá với trạng thái trang. Nếu không, WebDriver sẽ đưa ra các exception cho việc timeout, phần tử cũ, và không tìm thấy phần tử. Những vấn đề này xảy ra không liên tục, vì vậy chúng khó giải quyết.
Cách tốt nhất để tránh điều kiện cạnh tranh là: Luôn đợi một phần tử tồn tại trước khi tương tác với phần tử đó. Điều này có vẻ cơ bản nhưng rất dễ bỏ qua. Tất cả các package Selenium WebDriver đều cung cấp một số loại đối tượng WebDriverWait sẽ buộc driver đợi một điều kiện nhất định là đúng trước khi tiếp tục. Cách dễ nhất để kiểm tra xem một phần tử có tồn tại hay không là kiểm tra xem danh sách các phần tử được trả về bởi lệnh gọi FindElements có khác rỗng hay không. Thêm một lần call khác cho mỗi tương tác có thể làm nặng chương trình, nhưng các pattern thiết kế trong các framework được thiết kế tốt như Screenplay Pattern có thể khiến các kiểm tra này diễn ra tự động.
Một phương pháp hay khác là: Luôn tìm nạp các phần tử mới. Đôi khi, trước tiên, kiểm thử tự động sẽ lấy một số phần tử, sau đó sử dụng truy vấn thứ hai để lấy thêm phần tử. Đối tượng phần tử Web tồn tại càng lâu thì càng dễ trở nên lỗi thời và gây ra exception. Một số phần tử trở nên cũ kỹ một cách khó hiểu ngay cả khi dường như chúng vẫn còn trên trang. Hãy nhớ ‘Luôn luôn lấy một phần tử mới nhất khi cần’.
AI Giúp Gì Được Trong Kiểm Thử Web UI?
Một số dự án/sản phẩm dựa trên AI nhằm mục đích cải thiện kiểm thử Web UI tự động so với các phương pháp truyền thống:
- Applitools mở rộng quá trình tự động hóa Selenium WebDriver bằng cách kiểm tra các khác biệt nhỏ về hình ảnh.
- Testim có thể tự động sửa chữa bộ định vị bất cứ khi nào chúng bị hỏng, tránh tình trạng thử nghiệm không ổn định do thay đổi giao diện người dùng.
- Mabl là một công cụ trợ lý học và chạy lại các bài kiểm thử mà các nhà phát triển dạy nó mà không cần viết bất kỳ đoạn code nào.
- Test.ai chạy các bài kiểm thử người dùng phổ biến như đăng nhập, tìm kiếm và mua sắm trên các ứng dụng dành cho thiết bị di động dựa trên những gì AIđã học được từ một số ứng dụng khác.
- Rainforest QA sử dụng dịch vụ cộng đồng kèm với AI để chạy kiểm thử thủ công do một nhóm chỉ định gần giống như kiểm thử tự động
Nhiều công cụ kiểm tra AI chắc chắn sẽ gia tăng giá trị, nhưng hãy nhớ rằng, bên dưới vỏ bọc bề ngoài, locators vẫn được sử dụng ở đâu đó.
Mình xin dừng bài viết hôm nay tại đây. Chúc các bạn sớm làm quen được với kiểm thử tự động. Hẹn gặp các bạn vào những bài viết tiếp theo!
Happy Testing!