Get Started with Playwright Analytics

TestRelic is free to use and published under the MIT license. Get up and running with @testrelic/playwright-analytics in minutes.

Appium / mobile testing

For Appium/WDIO setup, see the Appium Installation guide.

Purpose

This guide installs the Playwright reporter and fixture so each run produces structured analytics JSON you can inspect locally or sync with the TestRelic cloud.

Prerequisites

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

---

Concept: local reporter data path

What the reporter captures (orientation)

The chart below groups the main signal channels the Playwright reporter can populate in your analytics JSON. Values are indexed for comparison only, not timings from your machine.

Loading chart…

---

For AI agents

How do I set up TestRelic using an AI assistant?

Copy one of the prompts below and paste it into your AI coding assistant. Each prompt is self-contained and tells the AI exactly what to install and configure.

---

Full setup (one prompt, does everything)

Use this if you want the AI to handle the entire setup in one go:

AI Prompt — Full setup (copy & paste into your AI assistant)

Install @testrelic/playwright-analytics in this project and set it up completely:

1. Run: npm install @testrelic/playwright-analytics
2. Open playwright.config.ts and add the TestRelic reporter to the reporter array:
   ['@testrelic/playwright-analytics', {
     outputPath: './test-results/analytics-timeline.json',
     includeStackTrace: true,
     includeCodeSnippets: true,
     includeNetworkStats: true,
   }]
3. In all test files that currently import from '@playwright/test', change the import
   to '@testrelic/playwright-analytics/fixture' so navigation is tracked automatically.

Keep the existing 'list' reporter if it is already there. Do not change any test logic.

---

Step-by-step prompts (one at a time)

Use these if you prefer to guide the AI step by step.

Step 1 — Install the package:

AI Prompt — Step 1: Install

Run the following in my project terminal:
npm install @testrelic/playwright-analytics

Step 2 — Configure the reporter:

AI Prompt — Step 2: Configure reporter

Open playwright.config.ts and add @testrelic/playwright-analytics to the reporter array.
Use this configuration:

['@testrelic/playwright-analytics', {
  outputPath: './test-results/analytics-timeline.json',
  includeStackTrace: true,
  includeCodeSnippets: true,
  includeNetworkStats: true,
}]

Keep any existing reporters (like 'list'). Show me the updated file.

Step 3 — Switch the test fixture:

AI Prompt — Step 3: Switch fixture

In my test files, replace:
  import { test, expect } from '@playwright/test';
with:
  import { test, expect } from '@testrelic/playwright-analytics/fixture';

This enables automatic navigation tracking. Do not change any test logic.

Step 4 — Run the tests:

AI Prompt — Step 4: Run tests

Run my Playwright tests with:
npx playwright test

Then tell me where the analytics report was written.

---

Prompt for API testing setup

Use this if you are writing API-only tests (no browser):

AI Prompt — API testing setup

Set up @testrelic/playwright-analytics for API testing in this project:

1. Install: npm install @testrelic/playwright-analytics
2. Update playwright.config.ts to include the reporter with trackApiCalls: true,
   captureRequestBody: true, captureResponseBody: true.
3. In my API test files, extend the base test fixture using testRelicApiFixture:

   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);

Show me the updated config and one example test file.

For Human

How do I install the package?

Install the TestRelic Playwright analytics package from npm:

npm install @testrelic/playwright-analytics

---

How do I add the reporter to my Playwright config?

Open playwright.config.ts and add the TestRelic reporter to the reporter array:

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

---

How do I use the TestRelic fixture in my tests?

Import test and expect from @testrelic/playwright-analytics/fixture instead of the default Playwright import. This enables automatic navigation tracking with no other changes required:

my-test.spec.ts

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

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

The fixture is fully compatible with Playwright's API — existing test logic does not need to change.

---

How do I run my tests?

Run your Playwright tests as you normally would:

npx playwright test

The JSON analytics report is written to ./test-results/analytics-timeline.json after the run completes.

---

Troubleshooting

Symptom	What to try
No JSON report after the run	Confirm the reporter array in playwright.config.ts includes @testrelic/playwright-analytics and that outputPath is writable by the process.
Cannot find module '@testrelic/playwright-analytics/fixture'	Run npm install @testrelic/playwright-analytics in the same package where Playwright runs.

FAQ

Do I have to change every test assertion when I switch to the TestRelic fixture?

No. The fixture re-exports Playwright `test` and `expect` with navigation tracking layered in. Keep your existing assertions and flows.

Can I keep the default list reporter while using TestRelic?

Yes. Add TestRelic next to any existing reporters (for example `list` or `html`) in the `reporter` array.

Where is the analytics file written?

By default to `./test-results/analytics-timeline.json` when you use the `outputPath` shown in this guide. Change `outputPath` to suit your CI artifacts folder.

---

What should I do next?

• Learn about the JSON report structure
• Explore Playwright configuration options
• Check out examples