How to Check and Uncheck Checkbox in Playwright

In this article, we will see how to check and uncheck checkboxes in Playwright and verify whether the checkbox is selected or not.

Table of Contents

1. Demo Website
2. Check Checkbox using Click Method
3. Check Checkbox using Check Method
4. Uncheck Checkbox using Click Method
5. Uncheck Checkbox using Uncheck Method
6. Verify Checkbox is Checked
7. Verify Checkbox is Unchecked
8. Video Tutorial

Demo Website 

Demo Link: http://autopract.com/selenium/form5/

Check Checkbox using Click Method

You can use either of below command to select checkbox two

await page.click("input[value='two']")
// or
await page.locator("input[value='two']").click()

Check Checkbox using Check Method

You can use either of below command to select checkbox two

await page.check("input[value='two']")
// or
await page.locator("input[value='two']").check()

Uncheck Checkbox using Click Method

You can use either of below command to uncheck checkbox one

await page.click("input[value='one']")
// or
await page.locator("input[value='one']").click()

Uncheck Checkbox using Uncheck Method

You can use either of below command to uncheck checkbox one

await page.uncheck("input[value='one']")
// or
await page.locator("input[value='one']").uncheck()

Verify Checkbox is Checked

You can use either of below command to verify that checkbox is checked

expect(await page.locator("input[value='one']").isChecked()).toBeTruthy()
// or
await expect(page.locator("input[value='one']")).toBeChecked();

Verify Checkbox is Unchecked

You can use below command to verify that checkbox is unchecked

expect(await page.locator("input[value='two']").isChecked()).toBeFalsy()