How do I check if an element is visible on the page using Playwright?


To check if an element is visible on the page using @playwright/test, you can use the toBeVisible() matcher with the expect() function. First, create a locator that identifies the element you want to check. You can use methods like page.locator(), page.$(), or page.waitForSelector() to create a locator.

Here's an example using TypeScript:

import { test, expect } from '@playwright/test';

test('Check if element is visible', async ({ page }) => {
  await page.goto('https://ray.run/');

  // Create a locator for the element you want to check
  const elementLocator = page.locator('#my-element');

  // Use the toBeVisible() matcher to check if the element is visible
  await expect(elementLocator).toBeVisible();

In this example, Playwright will automatically wait for the element to be visible before checking its visibility. If the element is not immediately present on the page (e.g., due to asynchronous loading), Playwright will wait until it appears before performing the check.

Remember that an element is considered visible if it has a non-empty bounding box and does not have a visibility:hidden computed style.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.