Playwright test library - checkbox state

Question

Please, how to get the status a checkbox element in the Playwright E2E test library.

Answer 1

According to Playwright Docs,

If you need to assert that checkbox is checked, prefer expect(locator).toBeChecked() to avoid flakiness.

So:

Assert checkbox state

const locator = page.getByLabel('Subscribe to newsletter');
await expect(locator).toBeChecked();

Get checkbox state

const checked = await page.getByRole('checkbox').isChecked();

locator.isChecked() Docs

Answer 2

You can use jsHandle.evaluate():

const checkbox = await page.$('[type=checkbox]');
const checkboxState = await checkbox.evaluate(node => node.checked);

or page.$eval():

const checkboxState = await page.$eval('[type=checkbox]', node => node.checked);

or page.evaluate():

const checkboxState = await page.evaluate(() => {
    const checkbox = document.querySelector('[type=checkbox]');
    return checkbox.checked;
});

If you have more of them, you can do it in one go as well:

const checkboxStates = await page.evaluate(() => {
    const checkboxes = document.querySelectorAll('[type=checkbox]');
    return [...checkboxes].map(c => c.checked);
});