How to Check if Checkbox is Checked or Not in Playwright

By AravindPlaywright Tutorial

Verifying whether a checkbox or radio button is checked or unchecked is a common test scenario in Playwright automation testing. Often, you may need to check the state either on page load or after user interaction, such as clicking the checkbox.

Fortunately, the Playwright automation framework offers various methods and assertions to help you determine whether a checkbox or radio button is selected. By using these built-in tools effectively, you can ensure your automated tests are both reliable and accurate.

In this guide, you will learn how to check whether a checkbox is checked or unchecked in Playwright. Specifically, we will explore several methods, including isChecked(), getAttribute(‘checked’), and evaluate((el) => …). Additionally, we’ll cover how to use the toBeChecked() assertion to validate the checkbox state effectively.

4 Ways to check if a checkbox is checked in Playwright

Let’s see how to check if a checkbox is checked or not using 4 different ways in Playwright.

Verify if the checkbox is checked using isChecked()

In the Playwright automation framework, the isChecked() method is used to determine whether a checkbox or radio button element is currently selected. This method returns a Boolean value: it returns true if the checkbox is checked, and false if it is unchecked.

This is especially useful in end-to-end testing scenarios where you need to validate the state of form elements before proceeding with further actions or assertions.

Here’s a quick example:

Example to verify check box is checked or not using isChecked()

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

test('Example: Check if checkbox is checked or not in Playwright Using isChecked().', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Check if "Subscribe to newsletter" checkbox is checked or not.
const isChecked = await page.locator('#newsletter-subscribe').isChecked();
console.log(isChecked);
if (isChecked) {
  console.log('Checkbox is checked');
} else {
  console.log('Checkbox is not checked');
}

//Check if "Remember me" checkbox is checked or not.
const isChecked1 = await page.locator('#remember-me').isChecked();
console.log(isChecked1);
if (isChecked1) {
  console.log('Checkbox is checked');
} else {
  console.log('Checkbox is not checked');
}
});
Check if checkbox is checked or not in Playwright Using isChecked()

Code Breakdown

  • Playwright’s locator() function to target an HTML element with the ID remember-me.
  • The isChecked() method is called on this element to check whether it is currently selected (checked).
  • The result is a boolean (true or false), and it’s stored in the constant variable isChecked1.
  • The await keyword ensures the script waits for the result before moving on.
  • If the checkbox is found checked, it will log the message “Checkbox is checked” in the console.
  • If the checkbox is not checked, it will log the message “Checkbox is not checked” in the console.

Assert if the checkbox is checked or not using the toBeChecked() assertion

Playwright provides a wide range of built-in assertions for verifying the state of web elements during automated testing. One of the most commonly used assertions for checkboxes is toBeChecked().

The toBeChecked() assertion is specifically designed to confirm whether a checkbox (or a radio button) is currently checked. To assert that a checkbox is not checked, simply use the not modifier. This makes it ideal for validating the state of form elements during end-to-end tests.

Example to assert a checkbox is checked or not using toBeChecked() in Playwright

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

test('Example: Assert if checkbox is checked or not checked using toBeChecked() assertion.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Assert if "Subscribe to newsletter" checkbox is checked.
await expect(page.locator('#newsletter-subscribe')).toBeChecked();

//Assert if "Remember me"  checkbox is not checked.
await expect(page.locator('#remember-me')).not.toBeChecked();
});
Assert if checkbox is checked or not checked using toBeChecked() assertion

Code Breakdown

  • page.locator(‘#newsletter-subscribe’): This targets the DOM element with the ID newsletter-subscribe.
  • expect(…).toBeChecked(): This is an assertion provided by Playwright’s test library. It checks that the targeted checkbox is currently checked.
  • The test will pass if the checkbox is checked and fail if the checkbox is not checked.
  • expect(…).not.toBeChecked(): This checks that the checkbox is not checked (i.e., it should be unchecked).
  • not: The .not modifier inverts the assertion.
  • The test will pass if the checkbox is not checked and fail if the checkbox is checked.

Check if the checkbox is checked or not using getAttribute() in Playwright

In addition to using methods like isChecked() or assertions like toBeChecked(), Playwright also allows you to verify a checkbox’s status by checking its checked attribute using the getAttribute() method.

This approach is particularly useful when you need to access or log the raw HTML attribute values or when you’re working with custom or non-standard checkbox implementations.

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

test('Example: Check if checkbox is checked or not checked using getAttribute() in Playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Check if checkbox is checked using getAttribute() method.
const checkedState = await page.locator('#newsletter-subscribe').getAttribute('checked');
if (checkedState !== null) {
  console.log('Checkbox is checked');
}else {
  console.log('Checkbox is not checked');
}

//Check if checkbox is not checked using getAttribute() method.
const checkedState1 = await page.locator('#remember-me').getAttribute('checked');
if (checkedState1 !== null) {
  console.log('Checkbox is checked');
}else {
  console.log('Checkbox is not checked');
}
});
Check if checkbox is checked or not checked using getAttribute() in Playwright

Code Breakdown

  • page.locator(‘#newsletter-subscribe’): This selects the checkbox element with the ID newsletter-subscribe.
  • getAttribute (‘checked’): Retrieves the value of the checked attribute from the checkbox element.
  • The message will be logged in the console as on the checkbox’s checked status.
  • page.locator(‘#remember-me’): This selects the checkbox element with the ID remember-me.
  • getAttribute (‘checked’): This fetches the value of the checked attribute from the checkbox element.
  • Next, if-else statements will log a message in the console.

Check if the checkbox is checked or not using evaluate()

Playwright offers multiple ways to verify the checked status of a checkbox during automated testing. One powerful and flexible method is using the evaluate() function. This allows you to run custom JavaScript code directly within the browser context to interact with DOM elements.

Using evaluate() is especially useful when you need to check properties (like .checked) that aren’t necessarily reflected in HTML attributes, or when dealing with dynamic or JavaScript-driven components.

Example to verify the checkbox is checked using evaluate()

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

test('Example: Check if checkbox is checked or not checked using evaluate() in Playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

//Check if checkbox is checked or not checked using evaluate().
const isChecked = await page.locator('#remember-me').evaluate((el) => el.checked);
console.log(isChecked ? 'Checked' : 'Not checked');
});
Check if checkbox is checked or not checked using evaluate() in Playwright

Code Breakdown

  • page.locator(‘#remember-me’): Selects the checkbox element with the ID remember-me
  • evaluate((el) => el.checked): Runs a function directly in the browser context.
  • el refers to the actual DOM element.
  • el.checked is a native DOM property that returns true if the checkbox is checked and false if the checkbox is not checked.

Final Thoughts

Playwright offers four ways to check if a checkbox is selected: isChecked() for simple boolean checks, toBeChecked() for clear test assertions, getAttribute(‘checked’) to read the raw HTML attribute, and evaluate() to access the actual DOM property. Use toBeChecked() for test validations, isChecked() for logic, and the other two for advanced or dynamic scenarios.

Leave a Reply

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