How to Verify Element Does Not Exist in Playwright

By AravindPlaywright Tutorial

When testing modern web applications with the Playwright browser automation framework, one of the most common scenarios is verifying that a specific element no longer exists on the page. This could include checking whether a modal has closed, a loading spinner has disappeared, or a deleted item is removed from the DOM. In all these cases, confirming the non-existence of an element is a vital part of reliable end-to-end testing.

In this article, we’ll explore multiple ways to check if an element does not exist in Playwright, using methods like count(), isVisible(), and waiting for the locator to be detached from the DOM. These techniques will help you write robust, accurate Playwright test scripts for dynamic web applications.

Why Check if an Element Does Not Exist?

In real-world testing scenarios, you often need to confirm that a pop-up closes after clicking the “Close” button or that a loading indicator disappears once an API call is complete. You might also need to check whether an error message is removed after a retry or ensure that a deleted item no longer appears in a list.

Fortunately, the Playwright framework provides several powerful methods to handle these situations effectively, allowing you to validate that elements have been removed or are no longer present in the DOM.

Check element is not present using the Count() method

You can use the count() method in Playwright to determine how many elements match a specified locator. This method returns the number of matching elements on the page. If the count is 0, it means the specified element does not exist in the DOM, making it a simple and reliable way to verify element absence during test execution.

Let’s see how to check element is not present using the count() method in the Playwright automation framework.

Example to check element does not exist using the count() method

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

test('Verify element does not exist in Playwright Using count() method.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');

const count = await page.locator('#nativeDate').count();
if (count === 0) {
  console.log('✅ Element does NOT exist');
} else {
  console.log('❌ Element exists');
}
});
Verify element does not exist in Playwright Using count() method

Code Breakdown

  • page.locator(‘#nativeDate’): This selects the element with the ID nativeDate.
  • .count(): This method returns the total number of elements that match the selector.
  • count will be a number — 0 if the element does not exist, or greater if it does.
  • If count === 0, the element is not present, and a success message is logged.
  • Otherwise, it logs that the element exists, indicating that your test might need to fail or retry.

Wait Until Element is Detached (Removed)

If you want to verify that an element disappears or is removed from the DOM after a user interaction (such as clicking a button or submitting a form), you can use the waitFor() method with the ‘detached’ state. This ensures Playwright waits until the element is no longer attached to the DOM, making it a reliable way to confirm that the element has been fully removed after an action.

Here is an example of how to wait for an element to be detached in Playwright automation testing.

Example: Waiting for an Element to Be Detached in Playwright

await page.locator('selector').waitFor({ state: 'detached' });
console.log('✅ Element is gone (not in DOM)');

Code Breakdown

  • page.locator(‘#loadingSpinner’) targets the element you expect to disappear.
  • .waitFor({ state: ‘detached’ }) tells Playwright to pause the test until the element is no longer present in the DOM.
  • Once detached, the script resumes, confirming the element has disappeared.

In Playwright, you can wait for other element states as well using the waitFor() method. These include:

  • attached – Waits until the element is added to the DOM.
  • visible – Waits until the element is both present in the DOM and visible on the page.
  • hidden – Waits until the element is either hidden (e.g., via CSS) or removed from view, but still present in the DOM.

Assert element does not exist using the toHaveCount() assertion

If you want to assert that an element is not present on the page during a Playwright test, you can use the built-in toHaveCount() assertion. This is part of the Playwright Test Runner and allows you to verify that a locator matches zero elements, confirming that the element does not exist in the DOM.

Let’s take a look at how to use toHaveCount(0) to assert that an element is completely absent from the page.

Example of an assert element is not present in Playwright using toHaveCount()

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

test('Assert element is not present in Playwright Using toHaveCount() assertion.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');

await expect(page.locator('#selector')).toHaveCount(0);
});
Assert element is not present in Playwright Using toHaveCount() assertion.

Code Breakdown

  • The locator(‘#selector’) targets the element.
  • toHaveCount(0) asserts that zero matching elements exist.
  • If the element is present, the assertion will fail and notify you immediately.

Final Thoughts

You can use the count() method in Playwright to verify that an element is not present on the page by checking if the count is zero. Additionally, you can use the detached state with the waitFor() method to ensure an element is completely removed from the DOM after a user interaction.

For test assertions, Playwright also provides a built-in and more readable option: the toHaveCount(0) assertion. This is a simple and effective way to assert that an element does not exist during automated testing.

Leave a Reply

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