Playwright Dropdowns and Checkboxes

A restaurant order form asks a customer to pick a spice level from a list and tick a box agreeing to delivery terms. Dropdowns and checkboxes appear on nearly every form across the internet, and Playwright has dedicated methods built specifically for them.

Common Form Controls

Registration Form
 |-- Dropdown: Country
 |-- Checkbox: I Agree to Terms
 |-- Radio Buttons: Payment Method (Card / Cash)

Selecting From a Dropdown by Visible Text

await page.getByLabel('Country').selectOption('India');

This line opens the country dropdown and picks the option showing the text "India," matching exactly how a real user clicks through the list.

Selecting a Dropdown Option by Value

await page.getByLabel('Country').selectOption({ value: 'IN' });

Some dropdowns store a short internal code, such as "IN" for India, separate from the visible label. This method targets that internal code directly.

Selecting Multiple Dropdown Options

await page.getByLabel('Interests').selectOption(['Sports', 'Music', 'Reading']);

A multi-select dropdown allows several choices at once, and passing an array selects all three options in a single step.

Checking a Checkbox

await page.getByLabel('I agree to the terms').check();

The check method ticks the checkbox. Playwright skips the action automatically if the box already shows as checked, avoiding an accidental double toggle.

Unchecking a Checkbox

await page.getByLabel('Subscribe to newsletter').uncheck();

This removes a tick from a previously checked box, useful for testing opt-out scenarios.

Selecting a Radio Button

await page.getByLabel('Pay by Card').check();

Radio buttons use the same check method as checkboxes, since selecting one radio option naturally deselects any other option in the same group.

Confirming a Checkbox State

await expect(page.getByLabel('I agree to the terms')).toBeChecked();

This assertion confirms the checkbox actually shows as ticked, useful for verifying a form remembers a previous selection correctly.

A Complete Signup Form Example

await page.getByLabel('Country').selectOption('India');
await page.getByLabel('I agree to the terms').check();
await page.getByLabel('Pay by Card').check();
await page.getByRole('button', { name: 'Create Account' }).click();

This short script fills every control on a signup form and submits it, exactly matching a real customer's journey through the page.

Quick Practice Task

Find a signup form on any website and write a test that selects a country from its dropdown and checks its terms and conditions checkbox.

Key Takeaways

• selectOption picks values from single or multi-select dropdowns.
• check and uncheck safely control checkboxes and radio buttons.
• toBeChecked confirms the actual state of a checkbox or radio button.
• These methods match natural, real-world form-filling behavior.