Answer
Handling Checkboxes in Playwright
Check a Checkbox
TypeScript
// By label (most readable)
await page.getByLabel('I agree to Terms').check();
// By test ID
await page.getByTestId('terms-checkbox').check();
// By role
await page.getByRole('checkbox', { name: 'Remember me' }).check();
Uncheck a Checkbox
TypeScript
await page.getByLabel('Subscribe to newsletter').uncheck();
Toggle Based on Desired State
TypeScript
// Check if not already checked; uncheck if already checked
await page.getByLabel('Dark mode').setChecked(true); // Always check
await page.getByLabel('Dark mode').setChecked(false); // Always uncheck
Verify Checkbox State
TypeScript
await expect(page.getByLabel('Terms')).toBeChecked();
await expect(page.getByLabel('Newsletter')).not.toBeChecked();
Get Checkbox State
TypeScript
const isChecked = await page.getByLabel('Terms').isChecked();
console.log(isChecked); // true or false
✦
Handling Radio Buttons
Radio buttons work similarly — use check() to select one:
TypeScript
// Select a radio option by label
await page.getByLabel('Male').check();
await page.getByLabel('Female').check();
await page.getByLabel('Other').check();
// By value attribute
await page.locator('input[name="gender"][value="male"]').check();
Verify Radio Button Selection
TypeScript
await expect(page.getByLabel('Male')).toBeChecked();
await expect(page.getByLabel('Female')).not.toBeChecked();
✦
Full Form Example
TypeScript
import { test, expect } from '@playwright/test';
test('registration form with checkboxes', async ({ page }) => {
await page.goto('/register');
await page.getByLabel('Full Name').fill('Jane Doe');
// Radio button
await page.getByLabel('Female').check();
// Checkboxes
await page.getByLabel('I agree to Terms and Conditions').check();
await page.getByLabel('Subscribe to newsletter').setChecked(true);
// Verify
await expect(page.getByLabel('Female')).toBeChecked();
await expect(page.getByLabel('I agree to Terms and Conditions')).toBeChecked();
await page.getByRole('button', { name: 'Register' }).click();
await expect(page).toHaveURL('/success');
});