Playwright

The Playwright plugin sets up Playwright for end-to-end browser testing. It activates automatically when the e2e/ template directory is included in your project.

Dev dependencies:

• @playwright/test - Playwright test runner
• fluent-ffmpeg - Video processing for test recordings
• ffmpeg-static - Static ffmpeg binary for video conversion
• glob - File pattern matching for test utilities

The plugin runs npx playwright install --with-deps to download browser binaries (Chromium) before your project dependencies are installed.

export default defineConfig({
  testDir: './e2e',
  globalTeardown: './e2e/utils/convert-videos.mjs',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : 4,
  timeout: 60000,
  reporter: [['html'], ['list']],
  use: {
    baseURL: process.env.FRONTEND_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'on',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  webServer: [
    {
      command: 'npm run start',
      url: 'http://localhost:3000',
      timeout: 60000,
      reuseExistingServer: !process.env.CI,
    },
  ],
});

Key settings:

• Base URL - Reads from FRONTEND_URL env var, defaults to http://localhost:3000
• Video recording - All tests are recorded; videos are converted during global teardown
• Web server - Starts your Next.js production server before tests run
• CI mode - Single worker, 2 retries, fails on .only calls

The e2e/ directory includes these test files:

Conditional test suites (based on configuration):

Build and test against a production server:

npm run build
npx playwright test

Run a specific test file:

npx playwright test e2e/smoke.spec.ts

Run in headed mode to see the browser:

npx playwright test --headed

View the HTML test report:

npx playwright show-report

All tests record video by default. After the test run, the globalTeardown script (e2e/utils/convert-videos.mjs) converts raw WebM recordings to MP4 using ffmpeg for easier sharing and playback.