What are the steps to troubleshoot a failing test in Playwright Test?

Answer

To troubleshoot a failing test in @playwright/test, follow these steps:

1. Understand the cause: Tests can be "passed", "flaky", or "failed". A flaky test fails on the first run but passes when retried. A failed test fails on all retries.

2. Detect retries at runtime: Use testInfo.retry to access retry information in tests, hooks, or fixtures. This helps you clear server-side state before a retry if needed.

3. Specify retries for specific tests: Use test.describe.configure() to control retries for a group of tests or a single file.

4. Debug locally in VSCode: Install the VS Code extension and run tests in debug mode by right-clicking on the line next to the test you want to run. Live debug by clicking or editing locators while running in debug mode.

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

test('basic test', async ({ page }) => {
  await page.goto('https://ray.run/');
  const title = await page.title();
  expect(title).toBe('Ray');
});

5. Debug on CI failures: Use Playwright's trace viewer to view a full trace of your tests as a local Progressive Web App (PWA). Inspect DOM snapshots, view timelines, and use dev tools for each action.

By following these steps and using Playwright's debugging tools, you'll be able to identify and resolve issues efficiently.