Check Boxes

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to automate interactions with checkboxes. Here's what you'll learn:

1. **Introduction to Checkboxes**:
- **Overview**: Learn how to select and unselect checkboxes using Playwright and perform assertions on their status.
- **Setup**: Create a new test and navigate to the Toaster page on the test application where there are three checkboxes.

2. **Selecting Checkboxes**:
- **Using Labels and Roles**: Identify checkboxes using labels and roles.
- **Example Setup**: Create a locator for the Toaster page checkboxes.
- **Checkbox Selection**: Use the `getByRole` method to select checkboxes.
- **Example**:
```javascript
await page.getByRole('checkbox', { name: 'Hide on click' }).check({ force: true });
```

3. **Handling Hidden Elements**:
- **Force Selection**: Use the `force: true` option to bypass visibility checks for hidden elements.
- **Reason**: Some checkboxes may be visually hidden, requiring the `force` option to interact with them.

4. **Check vs. Click**:
- **Check Method**: The `check` method will only check a checkbox if it is not already checked.
- **Click Method**: The `click` method will toggle the checkbox regardless of its current state.
- **Example**:
```javascript
await page.getByRole('checkbox', { name: 'Hide on click' }).click({ force: true });
```

5. **Unchecking Checkboxes**:
- **Uncheck Method**: Use the `uncheck` method to uncheck a checkbox.
- **Example**:
```javascript
await page.getByRole('checkbox', { name: 'Hide on click' }).uncheck({ force: true });
```

6. **Selecting and Unselecting All Checkboxes**:
- **Creating Locators**: Create a locator for all checkboxes on the page.
- **Example**:
```javascript
const allCheckboxes = await page.getByRole('checkbox').all();
```
- **Looping Through Checkboxes**: Use a loop to check or uncheck all checkboxes.
- **Example**:
```javascript
for (const box of allCheckboxes) {
await box.check({ force: true });
expect(await box.isChecked()).toBeTruthy();
}
```

7. **Performing Assertions**:
- **Generic Assertions**: Verify the status of the checkboxes using a generic assertion.
- **Example**:
```javascript
const checkboxStatus = await page.getByRole('checkbox', { name: 'Hide on click' }).isChecked();
expect(checkboxStatus).toBeTruthy();
```
- **Locator Assertions**: Use locator-specific assertions to verify the checkbox's status.
- **Example**:
```javascript
await expect(page.getByRole('checkbox', { name: 'Hide on click' })).toBeChecked();
```

8. **Practical Examples**:
- **Interacting with Checkboxes**: Demonstrate how to check, uncheck, and validate multiple checkboxes.
- **Simulating Keystrokes**: Show how to simulate slow typing using the `press` method with delays.
- **Assertions**: Perform both generic and locator-specific assertions to validate checkbox states.

9. **Summary**:
- **Selecting Checkboxes**: Use `check` and `uncheck` methods for reliable checkbox interaction.
- **Handling Hidden Elements**: Use `force: true` to interact with hidden elements.
- **Assertions**: Verify checkbox status using both generic and locator-specific assertions.
- **Looping Through Checkboxes**: Use loops to interact with multiple checkboxes on a page.

By the end of this lesson, you will be proficient in automating interactions with checkboxes, ensuring your automated tests accurately reflect user interactions with these elements. See you in the next lesson!