Selection

Radio Button

Beginner

Plan tier

StarterProEnterprise

Plan: Starter

Live widget · interact freely

Manual test goal

Switch between radio options and validate that exactly one option is selected at any time.

Expected result

Only one option carries the selected affordance; the visible plan summary reflects the chosen tier.

Stable selectors

Plan: Starter[data-testid="radio-starter"]
Plan: Pro[data-testid="radio-pro"]
Plan: Enterprise[data-testid="radio-enterprise"]
Selected plan[data-testid="radio-selected"]

Reference Playwright spec

radio.spec.ts

import { test, expect } from '@playwright/test';

test('radio selection is mutually exclusive', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/radio');

  await page.getByTestId('radio-pro').check();
  await expect(page.getByTestId('radio-pro')).toBeChecked();
  await expect(page.getByTestId('radio-starter')).not.toBeChecked();
  await expect(page.getByTestId('radio-selected')).toHaveText('Plan: Pro');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idleradio.spec.ts

https://lab.hakdogan.com/practice/radio

# console output will stream here