Checkbox

Duy Văn | 08/04/2025

---

Checkbox là một element rất phổ biến trong giao diện web, nó dùng dể người dùng đưa ra lựa chọn của mình dưới dạng một input, ví dụ như một form đăng ký, hay là một bộ filter kết quả tìm kiếm. Tuy nhiên một câu đùa mà giới tester hay nói với nhau là tester đứng trước một checkbox không có lựa chọn nào cả 😂, vì lựa chọn nào cũng phải chọn.

Thực tế mà nói thì checkbox ở dạng nguyên thuỷ nhất sẽ có code như sau

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label>

Nó sẽ nhìn kiểu dạng như

Checkbox

Tuy nhiên, với những framework web dev hiện đại, thì checkbox thường sẽ được bọc bởi một div và div này sẽ được gia cố bởi một đống CSS và JavaScript để tạo ra một checkbox đẹp hơn

Stylized checkbox

Dù dạng thù hình của nó là thế nào đi nữa thì việc của tester chính là xác định trạng thái của các element liên quan khi các lựa chọn checkbox được chọn bởi người dùng. Autotest sẽ sử dụng Selenium để tự động hoá việc tương tác với checkbox, sau đó xác định trạng thái của checkbox và element liên quan

Locate checkbox

Đầu tiên, chúng ta sẽ đi vào ví dụ với trang web này để tìm checkbox

Demoqa checkbox

Ở đây, chúng ta có thể thấy bộ 3 lựa chọn Hobbies là Sports, Reading và Music. Đây là checkbox, để kiểm tra thì F12 huyền thoại

Inspect checkbox

Ở đây, chúng ta có thể thấy cấu trúc checkbox của trang web này là bọc input checkbox và label cho nó vào bên trong các div

Thì chiều hướng đơn giản nhất để xác định từng checkbox chính là bám vào id vì chúng ta đang thấy nó có id khác nhau

WebElement sportsCheckbox = driver.findElement(By.id("hobbies-checkbox-1"));
WebElement readingCheckbox = driver.findElement(By.id("hobbies-checkbox-2"));
WebElement musicCheckbox = driver.findElement(By.id("hobbies-checkbox-3"));

Sau đó, để thực hiện động tác click vào checkbox, chúng ta sẽ sử dụng method click() của WebElement

sportsCheckbox.click();
readingCheckbox.click();
musicCheckbox.click();

Tuy nhiên, nếu để ý, chúng ta có thể thấy label của checkbox có property title for, tức là từng label này đã được gán với checkbox tương ứng, nếu sử dụng XPath thì có thể xác định được checkbox bằng cách xác định label trước, sau đó tìm đến checkbox tương ứng

WebElement sportsCheckbox = driver.findElement(By.xpath("//label[text()='Sports']");
WebElement readingCheckbox = driver.findElement(By.xpath("//label[text()='Reading']"));
WebElement musicCheckbox = driver.findElement(By.xpath("//label[text()='Music']");

Bởi lẽ nếu chúng ta click vào label của checkbox thì checkbox cũng sẽ được chọn, vì vậy chúng ta có thể click vào label thay vì click vào checkbox, dẫn đến phương án xác định label thay vì xác định bản thân checkbox

Validation

Sau khi đã click vào checkbox, chúng ta cần xác định trạng thái của checkbox và element tương ứng. Để xác định trạng thái của checkbox, chúng ta sẽ sử dụng method isSelected() của WebElement, còn đối với element tương ứng thì chúng ta sẽ sử dụng method isDisplayed() hoặc isEnabled() của WebElement

Đầu tiên là xác định trạng thái của checkbox

boolean isSportsCheckboxSelected = sportsCheckbox.isSelected();
assertTrue(isSportsCheckboxSelected, "Checkbox Sports is not selected");

Nếu có tồn tại một element tương ứng, ví dụ như một modal hiện ra khi checkbox được chọn, thì chúng ta có thể xác định trạng thái của nó bằng cách sử dụng method isDisplayed() hoặc isEnabled()

WebElement sportsModal = driver.findElement(By.id("sports-modal"));
boolean isSportsModalDisplayed = sportsModal.isDisplayed();
assertTrue(isSportsModalDisplayed, "Modal Sports is not displayed");