How do I check a checkbox or radio button in Playwright?

Locate the control, then call check() to tick it or uncheck() to clear it, and assert the state with toBeChecked(). setChecked(true or false) does either, which suits a test that receives the state as data.

This answer is one piece of Chapter 8: How Playwright Works.

Architecture: How Playwright Talks to the Browser
Actions: Clicking, Typing & Forms
Navigation & Page Events
Auto-Waiting & Actionability
Practice and interview questions: Playwright Fundamentals

check() describes the result you want, not a click. If the box is already ticked, it returns immediately; a plain click() would clear it. After clicking, it confirms the box really is ticked and throws if not. That makes the test independent of the starting state.

The best locator is the role plus the label text the user reads: getByRole('checkbox', { name: '...' }) or getByRole('radio', { name: '...' }). getByLabel() also works.

The first test uses the login page's Keep me signed in on this device box. The input sits inside its <label>, so the label text is its accessible name. The test ticks it, asserts toBeChecked(), clears it with uncheck(), and asserts not.toBeChecked().

The second test uses the Priority radio group on the fulfilment form. Standard starts selected. After express.check(), Express is checked and Standard no longer is, because radios in one group exclude each other. Calling uncheck() on a checked radio throws: Playwright reports that a radio can only be unchecked by selecting another in the same group.

Always follow the action with toBeChecked(). The action tells you Playwright ticked the box. The assertion tells you the page agreed.

qa-051.spec.js(https://practice.learnplayforge.com)

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

test('check a checkbox on the login page', async ({ page }) => {
  await page.goto('/login.html?mock=static&seed=42');
  const remember = page.getByRole('checkbox', { name: 'Keep me signed in on this device' });

  await remember.check();
  await expect(remember).toBeChecked();

  await remember.uncheck();
  await expect(remember).not.toBeChecked();
});

test('choose a radio button in the priority group', async ({ page }) => {
  await page.goto('/fulfilment.html?mock=static&seed=42&autologin=1');
  const standard = page.getByRole('radio', { name: 'Standard' });
  const express = page.getByRole('radio', { name: 'Express' });

  await expect(standard).toBeChecked();
  await express.check();
  await expect(express).toBeChecked();
  await expect(standard).not.toBeChecked();
});

Output

2 passed (3.7s)

Test yourself

Which method does the Playwright input guide call the easiest way to both check and uncheck a checkbox or radio button?

Practised in the full course: the drill The checkbox.

See the chapter

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

How do I check a checkbox or radio button in Playwright?

Related questions