Answer

Working with Playwright

When you're testing with Playwright, there are a few best practices you should follow.

Web First Assertions

Use web first assertions like toBeVisible() instead of expect(await page.getByText('welcome').isVisible()).toBe(true). This makes your tests more reliable.

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

test('is visible', async ({ page }) => {
  await page.goto('https://ray.run/');
  const welcome = page.locator('text=welcome');
  await expect(welcome).toBeVisible();
});

Debugging

You can debug your tests live in VSCode. Install the VS Code extension and run tests in debug mode. This opens a browser window and pauses at the breakpoint.

// Right-click on the line next to the test you want to run

You can also use the Playwright inspector by running your tests with the --debug flag.

// Run your tests with the --debug flag

Working with Locators

Use chaining and filtering techniques to narrow down searches for specific parts of a page. Prefer user-facing attributes over XPath or CSS selectors.

// Use chaining and filtering techniques

Code Generator

If you're having trouble generating locators, Playwright has a built-in code generator tool. It can generate tests and pick resilient locators for you.

// Use the built-in code generator tool

For more tips on writing efficient Playwright test scripts, check out this blog post.