How to Check if Element Exists in Playwright: 4 Ways

This guide will show you how to check if element exists in Playwright using different strategies. You’ll learn how to check element presence with built-in assertions and conditional checks to avoid flaky tests and improve test stability.

When using Playwright for automation, it’s sometimes important to verify that an element is visible before attempting to interact(clicking, typing, etc.) with it, to avoid errors or unexpected behavior. There are multiple ways to check if element is present or not in Playwright, especially when dealing with dynamic content in Playwright, like tables or dropdowns.

In this guide, we will learn how to verify if an element is present using the isVisible(), count(), waitForSelector(), and page.$() methods.

Check if the element is visible using the isVisible() method in Playwright

The first way to verify an element’s existence is by using the isVisible() method. You can use the isVisible() method in Playwright automation to check not only if an element is visible, but also if it is present in the DOM.

Now, let’s see an example that demonstrates how to use the isVisible() method to verify an element’s visibility.

Example: verify if an element exists using isVisible() method

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

test('Check if an element exists in Playwright Using isVisible()', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');
  
  //Check or verify if element exist or visible using isVisible() method.
  const isVisible = await page.locator('#load-checkbox').isVisible();
if (isVisible) {
  console.log('Element is visible!');
} else {
  console.log('Element is not visible or does not exist.');}
  });

Code Breakdown

• page.locator(‘#load-checkbox’) selects the element with the ID load-checkbox.
• .isVisible() checks whether the element is visible in the DOM (not hidden and takes up layout space).
• The result is stored in the isVisible variable as a Boolean (true or false).
• If isVisible is true, it logs that the element is visible.
• If false, it means the element is either hidden or not present at all.

Check if element exists in Playwright using the count() method

The count() method in Playwright can be used with a locator to find out how many matching elements exist on the page. This is the second way to check if an element is present on the page in Playwright automation testing.

Now, let’s see an example that demonstrates how to use the count() method to check if an element exists on the page.

Example: Check locator exists using page.locator().count()

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

test('Check if an element exists in Playwright Using page.locator().count()', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');
  
  //Check or verify if element exist or visible using count() method.
  const element = page.locator('#load-checkbox');
  if (await element.count() > 0) {
    console.log('Element exists!');
  } else {
    console.log('Element does not exist.');
  }  
  });

Code Breakdown

• page.locator() is used to identify and interact with elements on the page.
• Element now refers to the group of elements matching the selector #load-checkbox (even if there’s only one).
• element.count() returns the number of elements that match the locator.
• await is used because count() is an asynchronous method.
• If the count is greater than 0, it means the element exists on the page (even if it might be hidden), similar to how you select dropdown values in Playwright.
• If count > 0, it will log a message “Element exists!”. Else it will log a message “Element does not exist.”.

Wait until element is visible using waitForSelector() in Playwright

The third way to check if an element is present in Playwright automation is by using the waitForSelector() method. The waitForSelector() method waits for the element to become visible on the page within a specified timeout.

Let’s see how to verify if an element is present on the page using the waitForSelector() method, with an example.

Example to verify the presence of an element using the waitForSelector() method

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

test('Check if an element exists in Playwright Using waitForSelector()', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');
  
  //Check or verify if element exist or visible using waitForSelector() method.
  try {
    await page.waitForSelector('#load-checkbox', { timeout: 5000 });
    console.log('Element exists!');
  } catch (error) {
    console.log('Element not found within 5 seconds.');
  }
  });

Code Breakdown

• waitForSelector(‘#load-checkbox’, { timeout: 5000 }): This syntax will wait for the element with the ID #load-checkbox to appear and be visible, with a timeout of 5 seconds.
• If the element is found within that time, the next line runs; otherwise, it throws an error.
• Next, it will log a success message if the element appears within 5 seconds.
• The next catch block will handle the error if the element does not appear within the timeout period and logs a message indicating that the element was not found.

Check the presence of the element using the page.$() method

The fourth and last method to check if an element is present on the page is using the $() function in Playwright. The page.$() function checks for the existence of an element on the page and returns a reference to the element if found, or null if not.

Let’s see how to verify an element’s presence using the $() function in Playwright.

Example: Check if an element is present using the page.$() function

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

test('Check if an element exists in Playwright Using page.$()', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-checkbox-testing-demo.html');

  const element = await page.$('#load-checkbox');
if (element) {
  console.log('Element exists!');
} else {
  console.log('Element does not exist.');
}  
});

Code Breakdown

• Playwright’s $() method (equivalent to querySelector) will search for the element with the ID load-checkbox.
• If the element is found, the element will hold a reference to that element (an ElementHandle).
• If not found, the element will be null.
• If condition checks if the element variable holds a truthy value (i.e., the element was found). If the element was found, this message is printed to the console.
• If it’s not null, it proceeds to the next line.
• If the element is null, the message is logged, indicating the element isn’t present on the page at the time of execution.

Final Thoughts

Verifying the presence of an element on the page is a crucial step in Playwright automation testing before performing any interaction. In this article, we explored several effective methods to check for element visibility, including isVisible(), locator().count(), waitForSelector(), and page.$(). Each method has been explained with examples to help you choose the most suitable approach for your testing needs. You might also want to learn how to handle date pickers in Playwright, which also involve conditionally loaded elements.

Related Articles

• How to Maximize Browser Window in Playwright
• How to Scroll in Playwright (Down and Top)
• How to Handle Dialog Box in Playwright With Example

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.