playwright-next-issue-reporter

A Playwright reporter and test fixture that automatically captures Next.js runtime errors and reports them directly in your test output.

Installation

npm install --save-dev playwright-next-issue-reporter

Usage

1. Add the reporter to your playwright.config.ts:

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

export default defineConfig({
  reporter: [
    ['line'], 
    ['playwright-next-issue-reporter']
  ],
});

2. Extend your test with the fixture:

Create a tests/fixtures.ts file to extend the base Playwright test. This is a one-time setup that enables automatic error capturing for all tests using this test object.

// tests/fixtures.ts
import { nextJsErrorFixture } from 'playwright-next-issue-reporter';

export const test = nextJsErrorFixture;
export { expect } from '@playwright/test';

Now, in your test files, import test from your fixtures file:

// tests/my-test.spec.ts
import { test } from './fixtures';

test('my test with automatic error capturing', async ({ page }) => {
  await page.goto('http://localhost:3000');
  // Next.js runtime errors are captured automatically!
});

Features

• Double Detection: Captures both the detailed Next.js Dev Tools "red box" and the full-page "Application error" fallback.
• Smart Interaction: Automatically clicks the "Issues" badge to open the detailed overlay for more info.
• Automatic Failure: Fails your test if a Next.js error is detected on the page, even if assertions pass.
• Detailed Evidence: Extracts the error title, description, code frame, and attaches a screenshot to the test result.
• Clean Output: Formats errors directly in your terminal for easy debugging.

License

MIT