Trong quá trình làm automation test, chúng ta có thể gặp nhiều trường hợp phải chọn ngày, tháng, năm từ datepicker, ví dụ như form đăng ký thông tin cá nhân, người dùng cần chọn ngày sinh; hay book khách sạn/vé máy bay, bạn cần chọn ngày đến, ngày đi…. Việc hiển thị lựa chọn ngày có thể được thể hiện thông qua giao diện người dùng khác nhau sẽ gây khó khăn cho việc tự động hóa. Bài này sẽ giới thiệu với các bạn cách xử lý và chọn ngày từ Datepicker với nhiều giao điên khác nhau.
Datepicker
DatePicker là một ui widget, nó được sử dụng kết hợp với giao diện người dùng liên quan đến calendar – nó được khởi tạo khi nhấp vào điều khiển (có thể là textbox field, icon…). Nó cho phép người dùng chọn Date (ngày, tháng và năm) và time (tùy chọn) trong calendar một cách dễ dàng.
Có hai loại điều khiển calendar phổ biến mà bạn cần biết:
- jQuery Calendar: là một phần của dự án mã nguồn mở tại JS Foundation (trước đây gọi là jQuery Foundation). Có một số yếu tố khác như tương tác giao diện người dùng, widget, hiệu ứng, v.v. cũng được xây dựng trên thư viện JavaScript jQuery.
- Kendo Calendar: được phát triển bởi Telerik.com – không phải dự án mã nguồn mở. Sử dụng giao diện người dùng Kendo, nhà phát triển có thể xây dựng ứng dụng JavaScript nhanh hơn.
Dưới đây là một số mẫu dùng jQuery.
Chọn ngày trong Selenium WebDriver
Như các ví dụ ở trên, bạn sẽ thấy các điều khiển calendar là việc trình bày thông tin có thể khác nhau giữa các calendar. Trong một số điều khiển calendar, tháng và năm được hiển thị trong danh sách thả xuống hoặc tháng và năm có thể được thay đổi bằng cách sử dụng điều khiển điều hướng, tức là các nút trước đó (previous buttons) và tiếp theo (next buttons). Một số điều khiển cho phép chọn ngày cùng với thời gian bên cạnh (date time). Điều này làm cho việc automate đối với các điều khiển datepicker trở nên khó khăn hơn vì cần phải điều chỉnh theo giao diện và kiểu của datepicker – Đây thực sự là một thách thức trong thử nghiệm tự động hóa.
Dưới đây là hướng dẫn tự động hóa datepicker sử dụng Selenium WebDriver:
Scenario
Người dùng được chọn từ ngày (Date from) đến ngày (Date to), trong đó:
- Điều khiển Datepicker sẽ được hiển thị khi nhấp chuột vào ô nhập liệu (textbox field) của Date from/ Date to
- Ngày được chọn từ Datepicker sẽ được hiển thị vào ô nhập liệu tương ứng của Date from/ Date to
- Không cho phép chọn “Date from” lớn hơn “Date to” – disable hết những ngày không được chọn, tháng/ năm không được hiển thị trên dropdown list (Bài này không kiểm tra bước này)
- Không cho phép chọn “Date to” bé hơn “Date from” – disable hết những ngày không được chọn, tháng/ năm không được hiển thị trên dropdown list (Bài này không kiểm tra bước này)
- Người dùng thay đổi format date của Date from và Date to bằng cách đổi format option.
Data test:
- Date from: Ngày 25/5/2022
- Date to: Ngày 30/05/2022
- Format: Short – d M, y
Các bước thực hiện
- Chọn ngày “Date from”
- Xác định vị trí locator của element “Date from”
- Nhấp (click) vào “Date from” textbox field để hiển thị datepicker lên
- Chọn ngày, tháng năm
- Chọn Tháng là “May” và năm là “2023”.
- Xác định vị trí locator của dropdown Tháng và Năm
- Sử dụng class Select để chọn tháng “May” trong danh sách tháng, năm”2023″ trong danh sách năm – ở đây chúng ta sử dụng phương thức selectByVisibleText(“Text”). Nếu chưa hiểu cách xử lý dropdown trong selenium WebDriver, bạn có thể tham khảo thêm ở đây.
- Chọn ngày “25” trong bảng của calendar
- Vì trong calendar các ngày được hiển thị theo table, chúng ta sẽ dùng phương thức findElements() để lấy danh sách tất cả các WebElement của các ngày thuộc Tháng Năm đã chọn (Ví dụ: May 2023).
- Sử dụng vòng lặp duyệt qua danh sách các WebElement, nếu gặp giá trị “25” thì thực hiện phương thức click() để chọn ngày.
- Chọn Tháng là “May” và năm là “2023”.
- Chọn ngày cho ‘Date to’ – Thực hiện các bước tương tự như chọn ngày ‘Date from’
- Chọn format ngày hiển thị
- Xác định vị trí locator của dropdown ‘Format options’
- Sử dụng phương thức selectByVisibleText(“Text”) của class Select để chọn giá trị “Short – d M, y”
- Kiểm tra ngày chọn trong textbox “Date from” và “Date To” đúng với ngày được chọn từ datepicker theo đúng format chọn ở trên
Code example
Lưu ý: Các bạn xem thêm các bài sau nếu chưa rõ nhé
