Checkboxes | Bondar Academy

Lesson Summary

In this lesson, we explore how to work with checkboxes and validate their status in a web application. The demonstration uses two pages: Models and Overlays and Toaster . Checkbox Interaction To automate checkbox selection, we create a new test in UIComponent.spec.ts . The checkboxes are organized within a label tag, with the actual checkbox being an input of type checkbox . The checkbox has a class of visually hidden , requiring the use of force: true to bypass this dependency. Methods to Interact with Checkboxes getByRole : Use this method to select the checkbox by its role. click : This method performs a click action regardless of the checkbox's current state. check : This method checks the current state; it will only check an unchecked checkbox. uncheck : Similar to check, but it unchecks a checked checkbox. Example Code To check or uncheck all checkboxes, you can use a loop: const allBoxes = await getByRole('checkbox'); for (const box of allBoxes) { await box.check(); // or box.uncheck(); await expect(box).toBeChecked(); // Validate status } Summary In summary, use getByRole to select checkboxes, and utilize check and uncheck methods to manage their states. This allows for efficient looping through checkboxes for bulk actions and validation.