How to Check Element is Not Visible in Playwright

By AravindPlaywright Tutorial

Verifying that an element is not visible is a crucial aspect of Playwright automation testing. This often comes into play when you need to ensure that an element disappears after an interaction, such as a loader vanishing, a modal closing, or a deleted item no longer being present on the page.

Playwright offers several methods to handle such scenarios effectively, allowing you to validate that elements are either hidden or completely removed from the DOM.

In this guide, we’ll learn how to verify that an element is not visible using various Playwright methods:
not.toBeVisible(), isVisible() with a false check, toBeHidden(), and toHaveCount(0).

Methods to Check if an Element is Not Visible

We will see different available methods in playwright to check the invisibility of an element.

Check if the element is not visible using not.toBeVisible() assertion

In the Playwright automation framework, you can use not.toBeVisible() to verify that an element is not visible on the page. This assertion ensures that the targeted element is either hidden or not rendered in a way that’s visible to the user.

Here’s a clear and concise example of how to check that an element is not visible using the not.toBeVisible() assertion in Playwright.

Example: Check element is not visible using not.toBeVisible() assertion

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

test('Example to check element is not visible in Playwright Using not.toBeVisible() assertion.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
const element = page.locator('#your-element');

// Assert that element is no longer visible.
await expect(element).not.toBeVisible();
});
check element is not visible in Playwright Using not.toBeVisible() assertion

Code Breakdown

  • page.locator() is used to locate elements in Playwright.
  • The not modifier inverts the assertion.
  • toBeVisible() normally checks for visibility, so not.toBeVisible() ensures that the element is either hidden via CSS (e.g., display: none, visibility: hidden, or opacity: 0) or not present in the DOM.

Verify the element is not visible using isVisible() false

You can check the visibility of an element using the isVisible() method and assert that it returns false.
This indicates that the element is not visible on the page. To perform the assertion, you can use toBe(false).

Here’s a practical example showing how to check that an element is not visible using Playwright’s isVisible() method and asserting it returns false.

Example: Check Element is Not Visible using isVisible()

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

test('Verify element is not visible in Playwright Using isVisible() method.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
const element = page.locator('#your-element');

// Check visibility using isVisible()
const isVisible = await element.isVisible();

// Assert that the element is not visible
expect(isVisible).toBe(false);
});
Verify element is not visible in Playwright Using isVisible() method

Code Breakdown

  • element.isVisible(): Checks whether the element with the selector your-element is visible.
  • expect(isVisible).toBe(false): Asserts that the element is not visible.

Playwright check element is not visible using the toBeHidden() assertion

Playwright provides a built-in assertion method called toBeHidden() that helps verify if an element is present in the DOM but not visible to the user. toBeHidden() assertion will check that the element exists in the DOM but is not visible.

Let’s explore how to check if an element is either hidden or not present on the page using Playwright.

Example to check if the element is not visible using toBeHidden()

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

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

const element = page.locator('#your-element');

//check element is hidden using toBeHidden() method.
await expect(element).toBeHidden();
});
Verify element is not visible in Playwright Using toBeHidden()

Code Breakdown

  • const element stores the locator object for reuse in assertions or other operations.
  • expect(element) is a Playwright assertion targeting the previously defined locator.
  • .toBeHidden() checks that the element exists in the DOM but is not visible.

Check that the element is not visible using toHaveCount(0)

In Playwright, if you want to verify that an element is completely absent from the page, meaning it does not exist in the DOM at all, you can use the toHaveCount(0) assertion.

Unlike toBeHidden(), which checks if an element is present but not visible, toHaveCount(0) confirms that no matching element is found on the page.

Example to verify the element is not visible using toHaveCount(0)

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

test('Example: Verify element is not visible in Playwright Using toHaveCount(0).', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
const element = page.locator('#your-element');
await expect(element).toHaveCount(0);
});
Verify element is not visible in Playwright Using toHaveCount(0)

Code Breakdown

  • expect(element) uses the Playwright assertion library.
  • .toHaveCount(0) checks that the total number of matching elements is exactly 0.
  • await ensures that the test waits until the condition is confirmed or times out.

Final Thoughts

Playwright offers several built-in methods to check if an element is hidden or invisible on the page. Depending on your test scenario, you can use assertions like not.toBeVisible(), isVisible() with a false check, toBeHidden(), or toHaveCount(0) to ensure the targeted element is not visible either on page load or after user interaction.

Leave a Reply

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