Listboxes và dropdown lists là một trong những điều khiển giao diện người dùng cho phép người dùng chọn các tùy chọn (các loại khác là như là checkboxes, radio buttons, toggle switches, steppers). Trong đó, Listboxes hiển thị các tùy chọn ngay lập tức và hỗ trợ nhiều lựa chọn trong khi dropdown lists yêu cầu người dùng nhấp chuột để xem các tùy chọn và chỉ hỗ trợ lựa chọn một lần.
Trong bài này chúng ta sẽ cùng nhau tìm hiểu listboxes và dropdown lists, và cách automate sử dụng Selenium WebDriver nhé!
Dropdown lists
Ở dạng cơ bản nhất, dropdown list bao gồm 4 thành phần chính:
- Hộp chứa (container box)
- Nút mũi tên hướng xuống – Để hiển thị danh sách các mục khi nhấp chuột vào
- Danh sách các mục – Người dùng chỉ có thể chọn một tùy chọn từ danh sách này, khi người dùng chọn một mục hoặc nhấp vào bên ngoài mục đó, danh sách thả xuống sẽ đóng lại.
- Và nhãn nhận dạng.
Dropdown list với một cơ chế đơn giản nhưng đã trở thành một yếu tố chính của nhiều trang web, đặc biệt là những trang yêu cầu nhập thông tin, điền vào biểu mẫu và lựa chọn mục.
Hầu như dropdown list được tạo bởi phần tử select trong HTML, cùng với một hoặc nhiều phần tử option. Trong đó select dùng để tạo danh sách và option được hiển thị dưới dạng một tùy chọn khả dụng trong danh sách đó.
Bên cạnh sử dụng thẻ select và option, chúng ta còn thấy dropdown list không được tạo với select-option, và dropdown list có thể cho phép người dùng tìm kiếm thông qua một danh sách lớn các lựa chọn và cùng lúc chọn nhiều lựa chọn khác nhau/ hay dropdown menu với các giá trị bị disable/active…
Listboxes
Dạng đơn giản nhất, Listboxes gồm ba phần: hộp chứa (container box), danh sách các mục (list of items) và các nhãn (label). Người dùng có thể nhấp vào các mục có trong hộp chứa để chọn một hoặc nhiều mục từ danh sách.
Có 4 loại listboxes:
- Single-select listbox: Với loại này, người dùng chỉ có thể chọn một mục từ danh sách các tùy chọn loại trừ lẫn nhau.
- Multiselect listbox: Người dùng có thể chọn hoặc bỏ chọn một hoặc nhiều mục bằng cách giữ phím Shift hoặc Ctrl trong khi nhấp vào mục.
- Multiselect listbox with checkboxes: Loại này bao gồm các checkboxes, ngụ ý rõ ràng rằng chức năng đa lựa chọn
- Multiselect, dual listboxes: loại này gồm 2 loại listboxes. Một listbox bên trái chứa các tùy chọn có sẵn và listbox bên phải đại diện cho các mục đã chọn. Ngoài ra có add button sẽ di chuyển một/hoặc nhiều mục từ danh sách có sẵn sang danh sách đã chọn và delete button sẽ di chuyển một/hoặc nhiều mục đã chọn trở lại danh sách có sẵn để bỏ chọn nó. Người dùng cũng có thể di chuyển các tùy chọn lên và xuống để sắp xếp lại thứ tự các phần tử trong danh sách.
Listboxes cũng có thể bao gồm thanh cuộn (scroll) – Trong trường hợp danh sách các mục quá dài, hay cho phép người dùng thay đổi kích thước, sắp xếp lại danh sách các mục.
Cũng giống dropdown list, Listbox cũng được tạo bởi cặp thẻ select – option trong HTML. Đối với chọn nhiều giá trị, sẽ thêm thuộc tính multiple với thẻ select
Cách xử lý dropdown lists/ listboxes trong Selenium WebDriver
Dropdown lists/ Listboxes được tạo bởi thẻ (tag) select-option
Để xử lý các WebElement được tạo bởi cặp thẻ select-option, Selenium WebDriver cung cấp một lớp có tên là “Select”, cung cấp các phương thức khác nhau để xử lý các dropdown list/listbox – có thể chọn/bỏ chọn một hoặc nhiều mục.
- Class “Select” nằm trong package “org.openqa.selenium.support.ui”.
- Class “Select” mô hình hóa một thẻ SELECT và cung cấp các phương thức trợ giúp để chọn và bỏ chọn các tùy chọn.
- Class “Select” cung cấp một hàm tạo đối số (argument) chấp nhận webElement phải là thẻ (tag) select. Hàm tạo (constructor) này sẽ kiểm tra xem phần tử web đã cho có phải là thẻ select hay không. Nếu không, thì một UnexpectedTagNameException sẽ được ném ra.
Khởi tạo đối tượng thuộc class Select
Khởi tạo một đối tượng thuộc lớp Select và truyền vào hàm tạo (constructor) là một WebElement của dropdown/listbox
Select dropdownlist = new Select(WebElement webelement);
Các phương thức thuộc class Select
Class “Select” cung cấp các phương thức khác nhau để xử lý các hoạt động của dropdown list/listbox được liệt kê sau đây:
1 – Lấy tất cả các tùy chọn thuộc thẻ Select
dropdownlist.getOptions();
- Kết quả trả về là một list các WebElement của các lựa chọn
- Để lấy giá trị của các lựa chọn thì bạn sử dụng vòng lặp for…each và phương thức getText()
Ví dụ: lấy hết danh sách các tùy chọn từ Dropdown list “Format option”
Code example
Kết quả sau khi chạy đoạn chương trình như sau
2 – Cách chọn một tùy chọn trong dropdown list/listbox
Ví dụ: Thực hiện các chọn tùy chọn “Short – d M,y” từ Dropdown list “Format option”
Có ba cách:
- selectByIndex(int index) – đươc sử đụng để chọn một tùy chọn dựa vào chỉ số index của nó, bắt đầu bằng 0.
dropdownList.selectByIndex(2);
- selectByVisibleText(String text) – đươc sử đụng để chọn một tùy chọn dựa vào text của tùy chọn.
dropdownList.selectByVisibleText("Short - d M, y");
- selectByVisibleText(String value) – đươc sử đụng để chọn một tùy chọn dựa vào giá trị của thuộc tính value của tùy chọn đó.
dropdownList.selectByValue("d M, y");
3 – Cách bỏ tùy chọn đã chọn trong dropdown list/listbox
Ví dụ: Thực hiện bỏ chọn tùy chọn “Short – d M,y” đã được chọn từ Dropdown list “Format option”
Có 4 cách
- deselectAll() – đươc sử đụng để bỏ chọn tất cả các tùy chọn đã được chọn trước đó.
dropdownList.deselectAll();
- deselectByIndex(int index) – đươc sử đụng để bỏ chọn một tùy chọn đã được chọn trước đó dựa vào chỉ số index của nó, bắt đầu bằng 0.
dropdownList.deselectByIndex(2);
- deselectByVisibleText(String text) – đươc sử đụng để chọn một tùy chọn dựa vào text của tùy chọn.
dropdownList.deselectByVisibleText("Short - d M, y");
- deselectByVisibleText(String value) – đươc sử đụng để bỏ chọn một tùy chọn đã được chọn dựa vào giá trị của thuộc tính value của tùy chọn đó.
dropdownList.deselectByValue("d M, y");
4 – Kiểm tra listbox có cho phép chọn nhiều lựa chọn không (multiple select)
dropdownList.isMultiple()
- Kết quả trả về là boolean. Trả về true nếu cho chọn nhiều lựa chọn, ngược lại là false
5 – Lấy tùy chọn đầu tiên đã được chọn
dropdownlist.getFirstSelectedOption();
- Kết quả trả về là WebElement của tùy chọn đang được chọn
- Nếu có nhiều lựa chọn đang được chọn, chỉ có duy nhất lựa chọn đầu tiên được trả về
6 – Lấy danh sách các tùy chọn đã được chọn
dropdownlist.getAllSelectedOptions();
- Kết quả trả về là list các WebElement của các tùy chọn đang được chọn
Scenario làm việc với dropdown/listbox sử dụng Selenium WebDriver
Scenario: Sử dụng các phương thức của class Select để thực thi các việc chọn và bỏ chọn các hãng xe như sau
- Kiểm tra danh sách các hãng xe có sort hay không
- Chọn BMW, Ferrari
- Xuất ra hãng xe được chọn đầu tiên
- Bỏ chọn Ferrari
- chọn Jaguar
- Xuất ra danh sách hãng xe được chọn
- Bỏ chọn tất cả
Code example
Kết quả sau khi chạy chương trình
Cheer! 🙂