TestRelic

A test analytics toolkit that generates structured JSON and HTML reports from your Playwright test runs — capturing navigation timelines, API call tracking, network statistics, failure diagnostics, and CI metadata. Supports browser E2E tests, API-only tests, and unified workflows that combine both.

What It Does

When you run your Playwright tests with the TestRelic reporter and fixture, you get a JSON + HTML report that captures:

• Navigation timeline — Every URL visited during each test, in chronological order, with navigation type detection (goto, link click, back/forward, SPA route changes, hash changes)
• API call tracking — Captures HTTP method, URL, status code, request/response headers and bodies, response times, and assertions for every API call
• Network statistics — Total requests, failed requests, bytes transferred, and resource type breakdowns (scripts, images, stylesheets, fonts, XHR)
• Test results — Pass/fail/flaky status, duration, retry count, and tags for every test
• Failure diagnostics — Error messages, source code snippets pointing to the exact failure line, and optional stack traces
• CI metadata — Auto-detection of GitHub Actions, GitLab CI, Jenkins, and CircleCI with build ID, commit SHA, and branch
• Sensitive data redaction — Automatically scrubs AWS keys, Bearer tokens, private keys, credential URLs, and sensitive API headers/body fields
• HTML report — Self-contained interactive HTML report with test grid, filter bar, and expandable drawer showing navigation timeline, API call details, and artifacts

Quick Start

1. Install

npm install @testrelic/playwright-analytics

2. Add the reporter to your Playwright config

// 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,
    }],
  ],
});

3. Use the fixture in your tests

TestRelic provides two fixture modes depending on your testing needs:

E2E tests (browser) — uses page for navigation tracking:

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

test('homepage loads correctly', { tag: ['@e2e'] }, async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page.locator('h1')).toBeVisible();
});

API tests — uses request for API call tracking:

import { test as base } from '@playwright/test';
import { testRelicApiFixture } from '@testrelic/playwright-analytics/api-fixture';
import { expect } from '@testrelic/playwright-analytics/fixture';

const test = base.extend(testRelicApiFixture);

test('fetch posts', { tag: ['@api'] }, async ({ request }) => {
  const response = await request.get('https://api.example.com/posts');
  expect(response.status()).toBe(200);
});

Unified tests (browser + API) — uses both page and request together:

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

test('API data matches UI', { tag: ['@e2e', '@api'] }, async ({ page, request }) => {
  // API call
  const apiResponse = await request.get('https://api.example.com/user/1');
  const user = await apiResponse.json();

  // Browser navigation
  await page.goto('https://example.com/profile');
  await expect(page.locator('.user-name')).toHaveText(user.name);
});

4. Run your tests

npx playwright test

The JSON report will be written to ./test-results/analytics-timeline.json and the HTML report to ./test-results/analytics-timeline.html.

Output Example

{
  "schemaVersion": "1.0.0",
  "testRunId": "797128f5-c86d-466c-8d6d-8ec62dfc70b6",
  "startedAt": "2026-02-07T10:41:28.759Z",
  "completedAt": "2026-02-07T10:41:36.794Z",
  "totalDuration": 8035,
  "summary": {
    "total": 6,
    "passed": 5,
    "failed": 1,
    "flaky": 0,
    "skipped": 0
  },
  "ci": {
    "provider": "github-actions",
    "buildId": "12345678",
    "commitSha": "abc123def456",
    "branch": "main"
  },
  "timeline": [
    {
      "url": "https://en.wikipedia.org/wiki/Main_Page",
      "navigationType": "goto",
      "visitedAt": "2026-02-07T10:41:29.844Z",
      "duration": 216,
      "specFile": "tests/homepage.spec.ts",
      "domContentLoadedAt": "2026-02-07T10:41:30.200Z",
      "networkStats": {
        "totalRequests": 40,
        "failedRequests": 0,
        "totalBytes": 1289736,
        "byType": {
          "xhr": 0,
          "document": 1,
          "script": 9,
          "stylesheet": 2,
          "image": 27,
          "font": 2,
          "other": 0
        }
      },
      "tests": [
        {
          "title": "homepage.spec.ts > Homepage > loads correctly",
          "status": "passed",
          "duration": 1028,
          "failure": null
        }
      ]
    }
  ]
}

Configuration

All options are passed as the second element of the reporter tuple:

General Options

| Option | Type | Default | Description | |---|---|---|---| | outputPath | string | ./test-results/analytics-timeline.json | Where to write the JSON report | | includeStackTrace | boolean | false | Include full stack traces in failure diagnostics | | includeCodeSnippets | boolean | true | Include source code snippets around the failure line | | codeContextLines | number | 3 | Lines of context above/below the failure line | | includeNetworkStats | boolean | true | Track network requests and bytes per navigation | | includeArtifacts | boolean | true | Include screenshots and video in the report | | navigationTypes | NavigationType[] \| null | null (all) | Filter timeline to specific navigation types | | redactPatterns | (string \| RegExp)[] | Built-in patterns | Additional patterns to redact from error output | | testRunId | string \| null | null (auto UUID) | Override the test run ID | | metadata | Record<string, unknown> \| null | null | Attach custom metadata to the report | | openReport | boolean | true | Auto-open the HTML report after test run | | quiet | boolean | false | Suppress TestRelic banner output |

API Tracking Options

| Option | Type | Default | Description | |---|---|---|---| | trackApiCalls | boolean | true | Enable/disable API call tracking entirely | | captureRequestHeaders | boolean | true | Capture request headers for each API call | | captureResponseHeaders | boolean | true | Capture response headers for each API call | | captureRequestBody | boolean | true | Capture request body/payload for each API call | | captureResponseBody | boolean | true | Capture response body for each API call | | captureAssertions | boolean | true | Track assertion results (pass/fail with expected/actual values) | | redactHeaders | string[] | ['authorization', 'cookie', 'set-cookie', 'x-api-key'] | Header names to redact (case-insensitive) | | redactBodyFields | string[] | ['password', 'secret', 'token', 'apiKey', 'api_key'] | Body field names whose values are replaced with [REDACTED] | | apiIncludeUrls | (string \| RegExp)[] | [] (all URLs) | Only track API calls matching these patterns | | apiExcludeUrls | (string \| RegExp)[] | [] (none excluded) | Exclude API calls matching these patterns |

Configuration Examples

Default (zero config) — captures everything with built-in redaction:

reporter: [
  ['list'],
  ['@testrelic/playwright-analytics', {
    outputPath: './test-results/analytics-timeline.json',
  }],
]

Minimal capture (no bodies) — reduces report size, tracks only method/URL/status/timing:

reporter: [
  ['list'],
  ['@testrelic/playwright-analytics', {
    outputPath: './test-results/analytics-timeline.json',
    captureRequestBody: false,
    captureResponseBody: false,
  }],
]

URL filtering — only track specific endpoints:

reporter: [
  ['list'],
  ['@testrelic/playwright-analytics', {
    outputPath: './test-results/analytics-timeline.json',
    apiIncludeUrls: ['**/api/**'],
    apiExcludeUrls: ['**/health', '**/metrics'],
  }],
]

Custom redaction — add your own sensitive header/body field names:

reporter: [
  ['list'],
  ['@testrelic/playwright-analytics', {
    outputPath: './test-results/analytics-timeline.json',
    redactHeaders: ['authorization', 'cookie', 'set-cookie', 'x-api-key', 'x-custom-secret'],
    redactBodyFields: ['password', 'secret', 'token', 'ssn', 'creditCard'],
  }],
]

Disable API tracking — browser-only report with no API call data:

reporter: [
  ['list'],
  ['@testrelic/playwright-analytics', {
    outputPath: './test-results/analytics-timeline.json',
    trackApiCalls: false,
  }],
]

Merging Shard Reports

When running Playwright with sharding, each shard produces its own report. Merge them with the CLI:

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

Or programmatically:

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

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

Testing Modes

TestRelic supports three testing modes, each with its own fixture:

E2E Testing (Browser)

Use the unified fixture which provides page with navigation tracking — page load timing, DOM content loaded, network idle detection, and network request statistics.

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

test('search works', { tag: ['@e2e'] }, async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('#search', 'query');
  await page.click('button[type=submit]');
});

API Testing

Use the API-only fixture which provides request without any browser dependency — tracks HTTP method, URL, status code, headers, bodies, response times, and assertions.

import { test as base } from '@playwright/test';
import { testRelicApiFixture } from '@testrelic/playwright-analytics/api-fixture';
import { expect } from '@testrelic/playwright-analytics/fixture';

const test = base.extend(testRelicApiFixture);

test('CRUD operations', { tag: ['@api'] }, async ({ request }) => {
  const response = await request.post('https://api.example.com/posts', {
    data: { title: 'New Post', body: 'Content' },
  });
  expect(response.status()).toBe(201);
});

Unified Testing (Browser + API)

Use the unified fixture which provides both page and request — the TestRelic report shows navigation timeline AND API call details for the same test. This is ideal for:

• Contract testing: Verify API data matches what the browser renders
• Setup/teardown via API: Use API calls to set up test data, then verify in the browser
• Full-stack workflows: Test end-to-end flows that span both UI and API layers

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

test('API data matches UI', { tag: ['@e2e', '@api'] }, async ({ page, request }) => {
  // Fetch data via API
  const apiResponse = await request.get('https://api.example.com/user/1');
  const user = await apiResponse.json();

  // Verify it renders correctly in the browser
  await page.goto('https://example.com/profile');
  await expect(page.locator('.user-name')).toHaveText(user.name);
});

Examples

Full working examples for E2E, API, and unified testing are available in the testrelic-sdk-examples repository:

| Example | Type | What It Demonstrates | |---|---|---| | api-testing | API only | CRUD operations, API chaining, response assertions, config options, error handling | | unified-testing | E2E + API | Browser navigation and API calls in the same test | | wikipedia | E2E | Homepage, search, link navigation, media-heavy pages | | flipkart | E2E | Homepage, product search, product pages | | google | E2E | Search queries, results navigation |

Each example is a standalone project — clone and run:

git clone https://github.com/testrelic-ai/testrelic-sdk-examples.git
cd testrelic-sdk-examples/api-testing
npm install
npx playwright test

Prerequisites

• Node.js >= 18
• Playwright >= 1.35.0

License

MIT