@testrelic/playwright-analytics

The main package that provides a custom Playwright reporter and enhanced test fixture for capturing navigation timelines and test analytics.

What does this package include?

What does the reporter capture?

The custom reporter collects comprehensive test data including:

• Test results (pass/fail/flaky/skipped)
• Execution timing and duration
• Failure diagnostics with code snippets
• Network request statistics
• CI environment metadata
• Navigation timeline reconstruction

What does the fixture track?

The enhanced test fixture extends Playwright's default page fixture to automatically track:

• Page navigations (goto, link clicks, browser navigation)
• SPA route changes
• Hash changes
• Navigation timing
• Network requests per navigation

How do I install it?

npm install @testrelic/playwright-analytics

How do I configure the reporter?

Add the reporter to your playwright.config.ts:

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

export default defineConfig({
  reporter: [
    ['list'],
    ['@testrelic/playwright-analytics', {
      outputPath: './test-results/analytics-timeline.json',
      includeStackTrace: true,
      includeCodeSnippets: true,
      includeNetworkStats: true,
    }],
  ],
});

See the Configuration page for all available options.

How do I use the fixture in my tests?

Import the test fixture instead of the default Playwright test:

import { test, expect } from '@testrelic/playwright-analytics/fixture';

test('example test', async ({ page }) => {
  // Navigation tracking happens automatically
  await page.goto('https://example.com');
  
  // All interactions are tracked
  await page.click('a[href="/about"]');
  
  // Assertions work as normal
  await expect(page.locator('h1')).toHaveText('About Us');
});

The fixture is fully compatible with Playwright's API — you don't need to change your existing tests.

How do I merge shard reports using the CLI?

The package includes a CLI for merging shard reports:

npx testrelic merge shard-1.json shard-2.json -o merged.json

See Merging Shard Reports for details.

How do I merge reports programmatically?

import { mergeReports } from '@testrelic/playwright-analytics/merge';

await mergeReports(
  ['shard-1.json', 'shard-2.json'],
  { output: 'merged-report.json' }
);

What TypeScript types does this package export?

import type { 
  AnalyticsReport,
  TimelineEntry,
  TestResult,
  NetworkStats 
} from '@testrelic/playwright-analytics';