How do I correctly use the toBeVisible() assertion in a Playwright project?

Answer

To use the toBeVisible() assertion correctly in a Playwright project, you should await the expect function with a locator that finds the element and then call .toBeVisible() on it. Here's an example:

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

test('element should be visible', async ({ page }) => {
  await page.goto('https://ray.run');
  
  // Correct usage of toBeVisible()
  await expect(page.getByText('welcome')).toBeVisible();
});

This will ensure that the element with the text 'welcome' is visible on the page. If the assertion fails, you'll get an error message with details about the failure.

You can also provide a custom error message as a second argument to the expect function to help with debugging. This will give you more context about what was expected and why it failed:

await expect(page.getByText('welcome')).toBeVisible('should be logged in');

If the assertion fails, the error message will look like this:

Error: should be logged in
Call log:
• expect.toBeVisible with timeout 5000ms
• waiting for "getByText('Name')"

Remember that soft assertions are available in Playwright Test Runner, which allow for making checks that will not stop the test when failed. Use expect.soft() for soft assertions, and check for any soft assertion failures by verifying if test.info().errors has length 0.

For live debugging of your tests in VSCode, install the VS Code extension and run tests in debug mode. Right-click on the line next to the test you want to run, and a browser window will open, pausing at the breakpoint. You can live debug your test by clicking or editing locators in your test in VS Code, which will highlight the locator in the browser window and show any other matching locators found on the page.