Tương tác với Dropdown/List bằng Selenium WebDriver

Bài đăng này đã không được cập nhật trong 7 năm

Trong khi kiểm thử website, thì bất cứ trang web nào cũng sử dụng Dropdown/List để tạo ra các danh sách. Vì vậy, trong kiểm thử tự động ta cũng hay gặp những vấn đề liên quan đến xử lý và thao tác trên Dropdown/List, một số vấn đề mà chúng ta thường hay gặp cụ thể như sau:

Làm sao để select và deselect được các giá trị trong dropdown list?
Làm sao để kiểm tra được trong dropdown list có bao nhiêu giá trị?
Làm sao để kiểm tra một giá trị trong dropdown list hiển thị hiển thị đúng hay chưa sau khi đã chọn thành công?
Làm sao kiểm tra được dropdown list có phải là multi-select hay là single-select?
Và cuối cùng là nếu là multi-select thì làm sao chúng ta có thể chọn tất cả các item ở trong dropdown list này?

Đối với các vấn đề trên, chúng ta sử dụng Selenium WebDriver để tìm ra giải pháp, nó hỗ trợ kiểm tra các phần tử của dropdown list bằng cách sử dụng lớp Select thay vì sử dụng lớp WebElement như thường lệ. Để sử dụng lớp Select, ta thực hiện import câu lệnh sau: import org.openqa.selenium.support.ui.Select Lớp Select này sẽ cung cấp các phương thức và thuộc tính khác nhau giúp chúng ta có thể tương tác với dropdown list qua phần tử HTML là thẻ <select> Dưới đây là đoạn code mẫu về dropdown list được dùng trong ví dụ này:

<select id=”dropdown01” name=”type_mobile”>
	<option value=”apple”>Apple</option>
	<option value=”samsung”>Samsung</option>
	<option value=”nokia”>Nokia</option>
	<option value=”htc”>HTC</option>
</select>

Việc đầu tiên cần làm là chúng ta phải bắt được element của dropdown này bằng cách sử dụng command sau:

WebElement mobilelist = driver.findElement(By.id("dropdown01"));
Select oSelect = new Select(mobile_dropdown);

//Hoặc có thể viết theo cách ngắn gọn hơn
Select oSelect = new Select(driver.findElement(By.id("dropdown01")));

Đến đây mình sẽ giải quyết tiếp các vấn đề đã nêu ở đầu bài:

Select và Deselect các giá trị trong dropdown: Lớp Select hỗ trợ cho chúng ta rất nhiều phương thức để tương tác với dropdown, thao tác hay dùng nhất đó là select các phần tử ở trong dropdown. Có 3 phương thức giúp ta có thể lựa chọn được các phần tử trong dropdown đó là:
- selectByVisibleText(String arg0); Select item trong dropdown theo giá trị hiển thị trên dropdown:
```
Select oSelect = new Select(driver.findElement(By.id("dropdown01")));
oSelect.selectByVisibleText(“Apple”);
```
- selectByValue(String arg0); Select item trong dropdown theo thuộc tính value của thẻ <option>
```
Select oSelect = new Select(driver.findElement(By.id("dropdown01")));
oSelect.selectByValue(“samsung”);
```
- selectByIndex(int arg0); Select item trong dropdown theo thuộc tính index của thẻ <option> Vị trí thứ nhất sẽ có index = 0
```
Select oSelect = new Select(driver.findElement(By.id("dropdown01")));
oSelect.selectByIndex(“4”);
```
Đối với thao tác deselect các item trong dropdown thì lớp Select cũng hỗ trợ thêm các phương thức tương tự như thao tác select
```
deselectByIndex(int arg0);
deselectByValue(String arg0);
deselectByVisibleText(String arg0);
```
Làm sao để kiểm tra được trong dropdown list có bao nhiêu giá trị? Ta sử dụng phương thức getOptions(); phương thức này sẽ trả về cho ta một list các item ở trong dropdown.
```
Select oSelect = new Select(driver.findElement(By.id("dropdown01")));
int number_item = oSelect.getOptions().size();
```
Lúc này giá trị number_item = 4, chính là số lượng item trong dropdown của chúng ta. Để verify được ta sử dụng câu lệnh:
```
Assert.assertEquals(4,number_item);
```
Kiểm tra giá trị trong dropdown hiển thị đúng sau khi đã chọn thành công (giá trị đã chọn sẽ luôn hiển thị ở vị trí đầu tiên): Ta sử dụng phương thức getFirstSelectedOption(); phương thức này sẽ trả về cho ta item đầu tiên trong dropdown.
```
 Select oSelect = new Select(driver.findElement(By.id("dropdown01")));
 oSelect.selectByVisibleText(“HTC”);
 String actual_result = oSelect. getFirstSelectedOption().getText();
```
Lúc này giá trị của actual_result sẽ là “HTC”, chính là item mà chúng ta đã lựa chọn Để verify được ta sử dụng câu lệnh:
```
Assert.assertEquals(“HTC”, actual_result);
```
Kiểm tra được dropdown có phải là multi-select hay là single-select: Ta sử dụng phương thức isMultiple(); phương thức này sẽ giúp ta kiểm tra dropdown này có thể hỗ trợ multi-select hay không Kết quả trả về là một kiểu boolean
```
Select oSelect = new Select(driver.findElement(By.id("dropdown01")));
```
Để verify được ta sử dụng câu lệnh:
```
Assert.assertFalse(oSelect.isMultiple());
```
Nếu true thì dropdown của chúng ta sẽ hỗ trợ multi-select.
Vậy nếu dropdown của chúng ta là multi-select thì làm cách nào để có thể select tất cả các item trong dropdown được: Hãy tham khảo cách sau:

     Select selectElement = new Select(driver.findElement(By.Id("productId")));
     
     // Kiểm tra xem dropdown có support multi-select hay không?
     if (selectElement.isMultiple()) { 
     
     // Nếu có support thì việc tiếp theo là collect tất cả các item trong dropdown bằng pt getOptions();
 	List<WebElement> options = selectElement.getOptions();
     
     // Sử dụng vòng lặp để thực hiện select tất cả các item từ list 'options'
 	for (WebElement we : options) {  
     	we.selectByVisibleText(we.getText());
         // Các xử lý khác với list options
 	}
     } else {
         // Xử lý khi không support multi-select 
     }

Với 3 step trên chúng ta có thể thực hiện select tất cả item ở trong dropdown.

Tổng kết Lớp Select vẫn còn nhiều phương thức khác để hỗ trợ các thao tác với Dropdown/list, trên đây chỉ là những phương thức hay gặp và sử dụng nhất. Bài viết này mình đã giúp các bạn hiểu rõ hơn về cách tương tác của selenium webdriver với dropdown/list, biết cách áp dụng vào những bài toán cụ thể khi thực hiện dự án của mình.

Mục lục