Description this lesson

Cách xử lý Dropdown, Radio, Checkbox, Tag Input và các dạng form điền thông tin.

1. Radio button

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester

 

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester

Tất cả các nút radio đang được tạo bằng thẻ HTML <input> và có một thuộc tính có tên là “type”, có giá trị là “radio”, biểu thị rằng loại của phần tử đầu vào là một nút Radio.

Cách chọn một Nút Radio

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester

Chúng ta dùng hàm Click() đơn giản

IWebElement radioBtn = driver.FindElement(By.Id("yesRadio"));

radioBtn.Click();

IWebElement radioBtn = driver.FindElement(By.Id("yesRadio"));
 
radioBtn.Click();

 

Cách kiểm tra lại Radio có được chọn hay chưa?

Chúng ta dùng hàm Selected ElementAt(vị trí) để chọn ra vị trị Radio cần kiểm tra

// Dùng IList để lưu hết các nút Radio cùng loại vào IWebElement
IList<IWebElement> AllRadioButton = driver.FindElements(By.Name("like"));
 
// Tạo một biến kiểu bool sẽ khởi tạo giá trị False
bool radioValue = false;
 
 // Dùng hàm Selected để check Radio button. Trả về True nếu Radio ĐẦU TIÊN đã được chọn.
 // Hàm ElementAt(vị trí) bắt đầu từ 0 để chọn thư stwuj radio
 radioValue = AllRadioButton .ElementAt(0).Selected;
 
 // Kiểm tra lại nếu nó đã được chọn rồi (radioValue = true) thì sẽ làm gì đó
 if (radioValue == true)
 {
     // Ví dụ cick vào Radio thứ 2 chẵn hạn
     AllRadioButton.ElementAt(1).Click();
 }
 else
 {
    // Ngược lại, nghĩa là nó chưa được chọn thì chọn nó (Radio đầu tiên)
    AllRadioButton.ElementAt(0).Click();
 }

Lưu ý: name luôn giống nhau cho cùng một nhóm Nút radio / Hộp kiểm (Checkbox) nhưng Giá trị của chúng khác nhau. Vì vậy, nếu bạn tìm thấy phần tử có thuộc tính name thì có nghĩa là nó có thể chứa nhiều hơn một phần tử, do đó chúng ta cần sử dụng phương thức FindElements và lưu trữ danh sách các WebElements. (vào IList)

2. Checkbox

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester

Tương tự Radio button cả cách chọn và kiểm tra lại. Ngoài ra cả hai thằng đều có thể chọn và kiểm tra theo: value, Text

Trong ví dụ này chúng ta lấy theo value dùng hàm GetAttribute

// Tìm các checkbox element cùng loại theo Name
IList <IWebElement> oCheckBox = driver.FindElements(By.Name("tool"));

// Hàm Count sẽ trả cho bạn số lượng checkbox/radio nó lấy được lưu vào biến Size
int Size = oCheckBox.Count;

// Start the loop from first checkbox to last checkboxe
for (int i = 0; i < Size; i++)
{
     //Dùng hàm GetAttribute để lấy giá trị theo thuộc tính
     //Cụ thể là lấy giá trị theo thuộc tính "value" và lưu vào biến Value
     String Value = oCheckBox.ElementAt(i).GetAttribute("value");

     //Kiểm tra tại vị trí "i" nếu checkbox nào có giá trị (value) bằng với "anhtester" thì click vào
	if (Value.Equals("anhtester"))
	{
	    oCheckBox.ElementAt(i).Click();           
	    // Nó sẽ thoát vòng lặp
	    break;
	}
}

 

3. Làm việc với Dropdown List

3.1. Dropdown List tĩnh

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester
Yêu cầu:

  • Làm sao để chọn các giá trị: Thứ trong tuần của dropdown ở hình trên?
  • Làm sao để kiểm tra trong dropdown có bao nhiêu giá trị => như hình trên có 7 giá trị?
  • Làm sao để kiểm tra 1 giá trị trong dropdown hiển thị đúng hay chưa sau khi đã chọn thành công?
  • Làm sao để kiểm tra dropdown có phải là multi-select hay single select => multi-select: cho phép chọn nhiều giá trị trong dropdown/ list?

Giải pháp:

  • Selenium WebDriver hỗ trợ kiểm tra các phần tử Dropdown/ List bằng cách sử dụng lớp Select thay vì sử dụng lớp WebElement
    import org.openqa.selenium.support.ui.Select;​
  • Lớp Select cung cấp các phương pháp và thuộc tính khác nhau để tương tác với dropdown/ list qua phần tử HTML là thẻ Select

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester

Các phương thức sử dụng:

  • Select dropdown sử dụng thuộc tính ID:

    HTML: <select id="job1" name="user_job1">
    Select select = new Select(driver.findElement(By.id("job1")));​

  • Select một giá trị trong dropdown sử dụng visible text (thường sử dụng)

    HTML
    : <option value="automation">Automation Tester</option>
    select.selectByVisibleText(“Automation Tester”);​

     

    Hoặc: Select một giá trị trong dropdown sử dụng value
    select.selectByValue("automation");​

     


  • Hoặc: Select một giá trị trong dropdown sử dụng index (bắt đầu từ vị trí số 0)
    select.selectByIndex(3);​

    => <option value=”website>Website Tester</option>

  • Kiểm tra dropdown có hỗ trợ dạng multi-select hay không:
    Assert.assertFalse(select.isMultiple());​
  • Kiểm tra dropdown có 5 giá trị:
    Assert.assertEquals(5, select.getOptions().size());​
    => Mỗi 1 giá trị tương ứng với 1 thẻ

  • 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):
    Assert.assertEquals("Manual Tester", select.getFirstSelectedOption().getText());​


3.2. Dropdown List động

Phần trước với các kiểu drop down list và các method dùng trong việc xử lý các drop down list tĩnh. Phần sẽ là các gợi ý và xử lý với drop down list động (Dynamic drop down list), để các bạn có thể dễ dàng làm việc với tất cả các loại drop down khi automate!

Bắt đầu, mình sẽ lấy một ví dụ về một drop down động khác để cùng hiểu hơn về yêu cầu của bài toán cũng như hướng giải quyết nhé.

Dưới đây là một trang web về đặt vé máy bay, người dùng sẽ click vào ô textbox điểm khởi hành để nhập vào điểm khởi hành chuyến bay. Khi click vào đó, trang web hiển thị ra danh sách các điểm khởi hành được gợi ý, người dùng có thể chọn từ list đó hoặc nhập vào các từ khóa, hệ thống sẽ hiển thị tên gợi ý tương ứng gần đúng với từ khóa nhập vào nhất.

[Selenium C#] Lesson 8: Cách xử lý Dropdown, Radio button, Checkbox, Tag Input | Anh Tester

Trong trường hợp này, ta không thể sử dụng cách thông thường sử dụng với drop down list tĩnh là dùng select sau đó sử dụng các thuộc tính của phần tử HTML để lấy giá trị cho text box được, mà phải sử dụng bằng cách khác, cách này được mô tả theo kịch bản dưới đây:

Bước 1. Truy cập trang web

Bước 2. Click vào trường điểm khởi hành

Bước 3. Search từ khóa cần tìm

Bước 4. Click chọn điểm khởi hành hiển thị trong drop down phía dưới

Kết quả mong muốn là điểm khởi hành đã chọn được hiển thị vào ô textbox tương ứng.

Locator của các element trong trang này rối quá, mần theo Css thì mất thời gian nên là chúng ta dùng ChroPath/SelectorsHub lấy luôn cái Xpath dài ngoằn kia.

Và ngoài ra, xét về hiệu năng run code này thì được đánh giá là không được tốt bằng việc sử dụng các cách khác. Do đó, hãy cố gắng lấy locator để làm sao đọc dễ hiểu, dễ nắm bắt và quan trọng là ít bị ảnh hưởng bởi những thay đổi cập nhật nhất có thể nhé!

Teacher

Teacher

Anh Tester

Tester

Đường dẫu khó chân vẫn cần bước đi
Đời dẫu khổ tâm vẫn cần nghĩ thấu

Teach the world online

Create an online video course, reach students across the globe, and earn money

Course content