In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to interact with radio buttons, automate their selection, and perform assertions on their status. Here's what you'll learn:

1. **Introduction to Radio Buttons**:
- **Overview**: Learn how to automate the selection of radio buttons and verify their status.
- **Setup**: Create a new test for interacting with radio buttons.

2. **Locating and Selecting Radio Buttons**:
- **Using Labels and Roles**: Identify radio buttons using labels and roles.
- **Example Setup**: Create a locator for the form: `const UsingTheGridForm = page.locator('nb-card:has-text("Using the Grid")')`.
- **Inspecting Elements**: Inspect the radio button elements to understand their structure.

3. **Selecting Radio Buttons**:
- **By Label**: Use the label to select the radio button.
- **Example**: `await UsingTheGridForm.getByLabel('Option 1').check({ force: true })`.
- **By Role**: Use the role to select the radio button.
- **Example**: `await UsingTheGridForm.getByRole('radio', { name: 'Option 1' }).check({ force: true })`.

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

5. **Making Assertions**:
- **Generic Assertions**: Verify the status of the radio button using a generic assertion.
- **Example**:
```javascript
const radioStatus = await UsingTheGridForm.getByRole('radio', { name: 'Option 1' }).isChecked();
expect(radioStatus).toBeTruthy();
```
- **Locator Assertions**: Use locator-specific assertions to verify the radio button's status.
- **Example**: `await expect(UsingTheGridForm.getByRole('radio', { name: 'Option 1' })).toBeChecked()`.

6. **Validating Multiple Radio Buttons**:
- **Selecting Another Radio Button**: Select a different radio button and validate the first one is no longer selected.
- **Example**:
```javascript
await UsingTheGridForm.getByRole('radio', { name: 'Option 2' }).check({ force: true });
expect(await UsingTheGridForm.getByRole('radio', { name: 'Option 1' }).isChecked()).toBeFalsy();
expect(await UsingTheGridForm.getByRole('radio', { name: 'Option 2' }).isChecked()).toBeTruthy();
```

7. **Practical Examples**:
- **Typing and Clearing Text**: Demonstrate typing, clearing, and retyping text in input fields.
- **Simulating Keystrokes**: Show how to simulate slow typing using the `press` method with delays.
- **Assertions**: Perform both generic and locator-specific assertions to validate input field values.

8. **Summary**:
- **Selecting Radio Buttons**: Use `getByRole` with `check` to select radio buttons.
- **Handling Hidden Elements**: Use `force: true` to interact with hidden elements.
- **Assertions**: Verify radio button status using both generic and locator-specific assertions.

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

Comments are closed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}