How to handle radio buttons using Playwright?

The Answer

Radio buttons are best located using `getByLabel` or `getByRole('radio')` and interacted with using `.check()`. You can assert their state with `toBeChecked()`.

Deep Dive Explanation

Never use `.click()` on radio buttons in critical tests — `.check()` is idempotent (safe to call even if already checked) and Playwright will wait for the radio to be enabled before acting.

example.spec.ts

// Check a radio button by its label
await page.getByLabel('Female').check();

// Verify it's selected
await expect(page.getByLabel('Female')).toBeChecked();

// Check using role
await page.getByRole('radio', { name: 'Express Shipping' }).check();

// Verify another is NOT checked
await expect(page.getByLabel('Male')).not.toBeChecked();