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

Answer

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.