Playwright testing observability: navigation timelines, network analytics, and CI metadata
TestRelic Team
If you run Playwright in CI, you already have pass/fail signals. Testing observability means capturing the execution story around each failure: which URLs you touched, how the SPA navigated, what the network layer did, and which build or branch produced the run. The @testrelic/playwright-analytics reporter is designed for that workflow—it runs locally, writes structured JSON and HTML, and can feed the TestRelic cloud platform when you add an API key. This guide consolidates the official docs into one narrative for teams standardizing on Playwright.
Why Playwright teams adopt execution-level observability
Playwright excels at deterministic automation, but flaky timing, third-party dependencies, and routing bugs often show up only as a single failed assertion. The Playwright overview describes how TestRelic enriches runs with navigation timelines, network stats, console output, failure diagnostics, and CI metadata so reviewers can answer: what did the browser actually do before the expect() failed? That is distinct from screenshot-on-failure or trace zip alone—it is a structured analytics model aligned to navigations and tests, which you can diff across runs once data reaches the cloud.
Requirements (from the overview): Node.js ≥ 18 and Playwright ≥ 1.40.
End-to-end browser testing: automatic navigation tracking
When tests import the page fixture from @testrelic/playwright-analytics/fixture, the reporter tracks:
- Navigation timeline — timing around page load, DOM content loaded, network idle-style signals where applicable.
- Network statistics — request counts, byte transfers, and response-time style signals per navigation.
- Navigation types —
goto, link clicks, back/forward, SPA route changes, and hash changes.
That combination helps teams distinguish "the app never loaded" from "the app loaded but the wrong route rendered" without re-running the suite locally.
API-only tests and combined reports
Not every suite drives a browser for every test. TestRelic's reporter supports an API testing path: configure the reporter with options such as trackApiCalls, captureRequestBody, and captureResponseBody, and compose tests with an API fixture.
When you mix browser and API coverage, a single JSON report can contain:
- Navigation timeline entries (URLs, navigation types, durations, network statistics).
- Pass/fail/flaky/skipped results for every test, including those that used only the request API.
- Failure diagnostics and CI metadata in the same schema family as other TestRelic reports.
Install paths: local-only vs cloud-backed
The Playwright overview outlines two onboarding tracks:
- Local reporting — install the package, add the reporter to
playwright.config.ts, run tests; artifacts land under paths like./test-results/. - With the cloud platform — sign up at testrelic.ai, complete onboarding, add your API key to reporter configuration, and uploads happen automatically on subsequent runs.
Configuration as the single source of truth
Every tuning knob for the Playwright reporter lives with the Playwright SDK: output location, stack traces, code snippets around failures, network capture toggles, streaming vs batched reporting, redaction rules, custom testRunId, custom metadata, and more.
From JSON to dashboards and AI
Once runs reach the cloud, the Cloud Platform Overview describes how the same underlying data powers the test runs dashboard, session workspace (timeline, console, network, video where available), AI & intelligence features, test navigation maps, monitoring (smoke, regression, nightly), and integrations (GitHub Actions, Jira, Grafana Loki, Amplitude, TestMu AI, BrowserStack). Your Playwright reporter remains the producer; the platform is the consumer for org-wide analytics.
Related documentation
FAQ: Where do I set the analytics JSON output path?
Use the reporter options object in playwright.config.ts. The Playwright overview documents outputPath and related fields.
FAQ: How do I enable automatic navigation tracking in specs?
Switch imports to @testrelic/playwright-analytics/fixture as shown in the Playwright overview.
FAQ: Can I run Playwright analytics without sending data to the cloud?
Yes. The Playwright overview "Local reporting only" path installs the reporter and generates local reports without requiring cloud signup.