Checkboxes & Radio Buttons Demo

1. Standard Controls

Checkboxes (Multi-select)

Select one or more skills you know:

Automation Tip: Use locator.check() and locator.uncheck() to toggle checkboxes.
Radio Buttons (Single-select)

Select your preferred plan:

Automation Tip: When selecting one radio button, verify others are automatically deselected using the same name attribute.

2. State-Based Scenarios

Default States

Notification preference (pre-selected):

Automation Tip: Use expect(locator).toBeChecked() immediately upon page load to verify default states.
Disabled States
Automation Tip: Assert state using expect(locator).toBeDisabled().
Indeterminate State

The "Select All" checkbox shows a dash when only some items are selected:

Automation Tip: Check the indeterminate property via locator.evaluate(el => el.indeterminate).

3. Locator Challenges

Labels and IDs

Properly labeled inputs for better accessibility:

Automation Tip: Use page.getByLabel('Receive product updates') instead of brittle CSS selectors like #receive-updates.
Hidden Inputs (Custom Styling)

Fancy checkboxes with hidden native inputs:

Automation Tip: Since the actual <input> is hidden (opacity: 0), you might need { force: true } option or click the label instead.

4. Dynamic Interactions

Dependent Fields

Checking this box will enable additional options:

Automation Tip: Practice "Check and Verify" flow—check the box, then assert the new element is visible/enabled.
Delayed Loading

These checkboxes appear after a 2-second delay:

Automation Tip: Playwright's auto-waiting will handle the delay. No need for explicit waits!

5. Edge Cases

The "I Agree" Trap

Scroll to the bottom of the terms to enable the checkbox:

Terms and Conditions

By using this service, you agree to the following terms and conditions:

1. You will use this platform responsibly and in accordance with all applicable laws.

2. You understand that this is a demo application for testing purposes.

3. Any data entered may be visible to other users of the platform.

4. We reserve the right to modify these terms at any time.

5. Your use of automated testing tools is encouraged and expected.

6. All test data should be anonymized and non-sensitive.

7. Please report any bugs or issues you encounter.

8. This platform is provided "as is" without warranty of any kind.

9. We are not responsible for any data loss or damage.

END OF TERMS - You have reached the bottom!

Automation Tip: You'll need to scroll the textarea to enable the checkbox. Use element.scrollIntoView() or scroll events.
Shadow DOM Challenge

Radio buttons wrapped in Shadow DOM:

Automation Tip: Access Shadow DOM elements using Playwright's built-in shadow DOM piercing capabilities.

Current Selections

Make some selections above to see them displayed here...