How do you debug a failed test in CI?

The Answer

The key tools are: (1) Trace files (CI artifact), (2) Screenshots on failure, (3) Videos, (4) Console log capture, and (5) Detailed HTML reports. Configure all of these in `playwright.config.ts` for CI environments.

Deep Dive Explanation

The golden rule of CI debugging: if you can't reproduce it locally, the trace file is your only window into what happened. Always upload `playwright-report/` and `test-results/` as CI artifacts with at least 30 days retention.

example.spec.ts

// playwright.config.ts - CI debug configuration
export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  reporter: process.env.CI ? 'github' : 'html',
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

// GitHub Actions - upload artifacts
// .github/workflows/playwright.yml:
// - name: Upload test results
//   if: always()
//   uses: actions/upload-artifact@v3
//   with:
//     name: playwright-report
//     path: playwright-report/
//     retention-days: 30

// Capture console errors in test
test('capture console', async ({ page }) => {
  const errors: string[] = [];
  page.on('console', msg => {
    if (msg.type() === 'error') errors.push(msg.text());
  });
  await page.goto('/app');
  expect(errors).toHaveLength(0);
});