How to Check an Element's Existence in Playwright

Better Stack Team
Updated on February 22, 2024

Ensuring an element's presence is a fundamental task in Playwright, crucial for actions like clicking on the element or determining the test outcome based on its existence.

Below are several strategies for this purpose:

🔭 Want to automate and scale your Playwright end-to-end tests?

Head over to Better Stack and start monitoring in 5 minutes.

1. Assessing element visibility

To ascertain an element's visibility, apply the isVisible() method to a locator:

 
const visible = await page.getByRole('button').isVisible();
if (visible) {
    // do something
}

For direct visibility assertions, utilize toBeVisible():

 
await expect(page.getByRole('button')).toBeVisible();

To assert the inverse, that an element is hidden, use the not property:

 
await expect(page.getByRole('button')).not.toBeVisible();

2. Checking DOM presence

To check if an element is present in the DOM, regardless of its visibility, use the count() method:

 
const count = await page.getByRole('button').count();
if (count > 1) {
    // do something
}

For precise assertions on an element's presence, toHaveCount() is recommended:

 
// Exactly one element matching the locator is present
await expect(page.getByRole('button')).toHaveCount(1);

To verify the absence of an element, proceed as follows:

 
await expect(page.getByRole('button')).toHaveCount(0);

Thanks for reading, and happy coding!