Скачать или смотреть Playwright with Typescript|UI Components|Check Boxes| 17

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.