TESTHEON Practice Lab

Component Lab A · Choices

Checkboxes and Radio Buttons

Practice checked, disabled, generated, conditional, indeterminate, and hierarchical choice states using native inputs and clear visible outcomes.

Start the fixtureRead the locator guide

PRACTICE FIXTURE — intentionally built for automation practice

Single, grouped, and disabled checkboxes

These choices use native labels and expose selected values in a status region.

Notifications cleared.

Notification channels

No channels selected.

Select all with indeterminate state

The parent becomes indeterminate when only some environments are selected.

Run environments

0 of 3 environments selected.

Dynamically enabled checkbox

The policy choice starts disabled and is enabled by a separate native checkbox.

Choice disabled.

Nested product hierarchy

Branch selections propagate to their leaves; partial leaf selection makes the branch indeterminate.

Products

No products selected.

Normal and disabled radio options

Select a browser engine while keeping the unsupported option visibly disabled.

Browser engine

No browser selected.

Dynamically generated radio options

Generate a stable three-option suite group, then select by label.

No suite options generated.

Radio-controlled conditional content

The business option reveals an additional named region.

Account type

Choose an account type.

Identical labels in separate sections

Scope the repeated Yes and No labels to the correct named section.

Email reports
SMS reports

No reporting preference selected.

Passing examples

Start with observable behavior

These snippets match executable tests stored inexamples/playwright-ts/.

Indeterminate select-all
const selectAll = page.getByLabel('Select all environments');
await page.getByLabel('Staging').check();
await expect(selectAll).toHaveJSProperty('indeterminate', true);
Parent-child propagation
await page.getByLabel('Electronics').check();
await expect(page.getByLabel('Laptop')).toBeChecked();
await expect(page.getByLabel('Mobile')).toBeChecked();
Generated radio group
await page.getByRole('button', { name: 'Generate suite options' }).click();
await page.getByLabel('Regression').check();
await expect(page.getByRole('status')).toContainText('Regression suite selected');