How do I check if an element exists on a page using Playwright?

Answer

To check if an element is present using @playwright/test, you can use the expect function with various matchers. Here are some examples:

Check if an element is visible

Use the toBeVisible() matcher to check if an element is visible on the page:

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

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

Check the number of matching elements

Use the toHaveCount() matcher to check if a locator resolves to a list of elements with a specific number of children:

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

test('Check the number of matching elements', async ({ page }) => {
  await page.goto('https://ray.run/');
  await expect(page.locator('.element-class')).toHaveCount(3);
});

Wait for an element with specific text

Use the toHaveText() matcher to wait until an element has the specified text content:

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

test('Wait for an element with specific text', async ({ page }) => {
  await page.goto('https://ray.run/');
  await expect(page.locator('#element-id')).toHaveText('Expected Text');
});

By default, Playwright sets a 5-second timeout for all assertions. You can change this timeout by passing an argument or configuring the testConfig.expect value in your test configuration file.