How to Select Checkboxes in Playwright: A Complete Guide

By AravindPlaywright Tutorial
Select Checkboxes in Playwright

Playwright is a powerful automation library for testing web applications across all modern browsers. One common task in test automation is interacting with checkboxes. In this comprehensive guide, you’ll learn several methods like check(), setChecked(), and click() to select checkboxes using Playwright effectively.

Why Checkbox Selection Matters in Test Automation

Checkboxes are fundamental UI elements that:

  • Represent binary choices (on/off, true/false)
  • Appear in forms, preference panels, and data tables
  • Often require validation in test scenarios

Basic Checkbox Selection Methods in Playwright

Using the check() Method

The simplest way to select a checkbox in Playwright is to use the check() method.

await page.check('#accept-terms');

This method:

  • Finds the checkbox matching the selector
  • Check if it is not already checked
  • Waits for the element to be actionable

Using setChecked() for More Control

You can use the setChecked() method to check or uncheck it irrespective of its current status.

To select a checkbox, you can use the setChecked() method as below.

await page.setChecked('#newsletter-subscribe', true); // to check

To remove selection from the checkbox, you can use the setChecked() method as below.

await page.setChecked('#newsletter-subscribe', false); // to uncheck

Direct Click Approach

Sometimes you need to simulate an actual click action using the click() method as below.

await page.locator('#remember-me').click();

Locating Checkboxes Effectively

You can use different element locator strategies to locate a checkbox. Let’s see all the possible locators to locate the checkbox.

By ID (Most Reliable)

await page.check('#unique-checkbox-id');

By Name Attribute

await page.check('input[name="agreement"]');

By Associated Label Text

await page.check('label:has-text("I agree to terms") >> input[type="checkbox"]');

By XPath (When Necessary)

await page.locator('//input[@type="checkbox" and @name="option"]').check();

Handling Dynamic Checkboxes

Some web pages have a checkbox that loads asynchronously. In such cases, you can use the waitFor() method to check the status of element as below.

const checkbox = page.locator('.dynamic-checkbox');
await checkbox.waitFor({ state: 'attached' });
await checkbox.check();

Verifying Checkbox States

To verify the checkbox selected in Playwright, you can use the toBeTruthy() or toBeChecked() methods. Let’s see how to verify checkbox is selected.

Using the toBeTruthy() method to check states

const isChecked = await page.isChecked('#newsletter-subscribe');
expect(isChecked).toBeTruthy();

Using the toBeChecked() method to check states

await expect(page.locator('#newsletter-subscribe')).toBeChecked();

Dealing with Common Checkbox Issues

Select Hidden Checkboxes

If you have a hidden checkbox on the page, you need to make it visible first. Here is an example to make the hidden checkbox visible, and then click on it.

await page.$eval('#hidden-checkbox', checkbox => {
  checkbox.style.display = 'block';
  checkbox.style.visibility = 'visible';
});
await page.check('#hidden-checkbox');

Disabled Checkboxes

To verify if the checkbox is disabled in the Playwright test, you can use the isDisabled() method as below.

const isDisabled = await page.locator('#disabled-option').isDisabled();
expect(isDisabled).toBeTruthy();

Custom Checkbox Elements

You can handle non-standard checkboxes that use CSS tricks as below.

await page.locator('.custom-checkbox .checkmark').click();

Best Practices for Checkbox Testing

  • Use explicit waits: Ensure elements are ready before interaction
  • Prefer text selectors: They make tests more readable and maintainable
  • Verify states: Always confirm that the checkbox reached the desired state
  • Combine methods: Use different approaches for different scenarios
  • Prioritize accessibility: Test with screen readers in mind

Complete Example: End-to-End Checkbox Test

Here is a complete Playwright example to interact with a checkbox on the web page.

const { test, expect } = require('@playwright/test');

test('Verify user data table', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');
  // Check the checkbox
  await page.check('#accept-terms');
  
  // Verify it's checked
  await expect(page.locator('#accept-terms')).toBeChecked();
  
  // Uncheck it
  await page.uncheck('#accept-terms');
  
  // Verify it's unchecked
  await expect(page.locator('#accept-terms')).not.toBeChecked();
  
  // Alternative: use click with verification
  const checkbox = page.locator('#newsletter-subscribe');
  await checkbox.click();
  expect(await checkbox.isChecked()).toBeFalsy();
  });
Playwright automation tool checking a web form checkbox with code examples visible

Final Thoughts

Using the methods outlined in this guide, you can confidently handle any checkbox scenario in Playwright. Remember to choose the right approach for your specific case, verify states, and follow best practices for reliable, maintainable tests.

Leave a Reply

Your email address will not be published. Required fields are marked *