End-to-end browser testing with TestRelic captures analytics about page navigation, network activity, and user interactions through the page fixture — automatically, with no extra code.

What does E2E mode track?

Navigation timeline — page load timing, DOM content loaded, network idle detection
Network statistics — request counts, byte transfers, response times per navigation
Navigation types — goto, link clicks, back/forward, SPA route changes, hash changes

Writing E2E tests

tests/homepage.spec.ts

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

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

Test tags

Use { tag: ['@e2e'] } to categorize tests — it makes filtering and organizing runs by mode straightforward.

Navigation is detected and tracked automatically — goto, link clicks, form submissions, and browser back/forward:

tests/navigation.spec.ts

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

test.describe('Navigation Tracking', () => {
  test('tracks link clicks', async ({ page }) => {
    await page.goto('https://example.com');
    await page.click('a[href="/about"]');
    await expect(page).toHaveURL(/about/);
  });

  test('tracks browser navigation', async ({ page }) => {
    await page.goto('https://example.com');
    await page.click('a[href="/about"]');
    await page.goBack();
    await expect(page).toHaveURL('https://example.com');
  });
});

Network statistics

Each navigation's report entry includes a networkStats object:

{
  "networkStats": {
    "totalRequests": 42,
    "failedRequests": 0,
    "totalBytes": 2458672,
    "byType": { "document": 1, "script": 9, "stylesheet": 2, "image": 27, "font": 2, "xhr": 0, "other": 1 }
  }
}

E2E-specific configuration

playwright.config.ts

export default defineConfig({
  reporter: [
    ['@testrelic/playwright-analytics', {
      outputPath: './test-results/analytics-timeline.json',
      includeStackTrace: true,
      includeCodeSnippets: true,
      includeNetworkStats: true,
      navigationTypes: ['goto', 'link_click', 'back', 'forward', 'spa_route', 'hash_change'],
    }],
  ],
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
});

Running E2E tests

Terminal

npx playwright test --grep @e2e     # all E2E tests
npx playwright test --debug         # debug a failing test
npx playwright test --headed        # watch the browser

Best practices

Avoid flaky assertions — wait for critical content before asserting: await page.waitForSelector('.main-content').
Handle dynamic content — wait for network idle: await page.waitForLoadState('networkidle').
Close blocking popups — await page.click('button.close-popup').catch(() => {}).
Structure with Page Object Model for complex flows, and organize tests with tags (@e2e, @smoke, @critical).

E2E Testing (Browser)