What are some best practices for writing robust tests using the Playwright framework?

Answer

Here are some best practices to make your @playwright/test tests more robust:

Test User-Visible Behavior

Avoid relying on implementation details. Your tests should verify that the application works for the end users. Use Playwright's built-in locators to find elements on the webpage. These locators come with auto waiting and retry-ability, ensuring that Playwright performs a range of actionability checks on the elements before performing any actions.

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

test('test user-visible behavior', async ({ page }) => {
  await page.goto('https://ray.run/');
  const locator = page.locator('.my-element');
  await locator.click();
});

Isolate Tests

Each test should run independently with its own local storage, session storage, data, cookies etc. This improves reproducibility and prevents cascading test failures. Use before and after hooks to avoid repetition.

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

test.beforeEach(async ({ page }) => {
  await page.goto('https://ray.run/');
});

test('test isolation', async ({ page }) => {
  // Your test code here
});

Avoid Testing Third-Party Dependencies

Instead of testing links to external sites or third party servers, use the Playwright Network API to guarantee the response needed.

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

test('avoid testing third-party dependencies', async ({ page, route }) => {
  await route.fulfill({
    response: {
      body: JSON.stringify({ key: 'value' }),
    },
  });
  await page.goto('https://ray.run/');
});

Control Your Data

If working with a database, test against a staging environment and ensure the data doesn't change. For visual regression tests, ensure the operating system and browser versions are consistent.

Configure Debugging

For local debugging in VSCode, install an extension which allows you to run tests in debug mode. For CI failures, use Playwright trace viewer instead of videos/screenshots. This gives a full trace of your tests as a local Progressive Web App (PWA) that can easily be shared.

By following these best practices, you can ensure your automation suite is more resilient than ever before! For more tips, check out Mastering Playwright Test Automation: Your Comprehensive Cheat Sheet.