@playwright-opentelemetry/trace-viewer

Playwright OpenTelemetry Trace Viewer

A SolidJS single-page application for viewing Playwright test execution traces in OpenTelemetry format.

Overview

This trace viewer provides a rich, interactive visualization of Playwright test runs that have been exported to OpenTelemetry format. It displays test steps, timing information, screenshots captured during execution, and additional trace data like HTTP requests.

Run the trace viewer

To boot the trace viewer on localhost:9294:

npx @playwright-opentelemetry/trace-viewer

The viewer can load a local trace zip or a trace-specific API base URL such as /playwright-otel-trace-viewer/v1/{traceId}. Remote API loading fetches {baseUrl}/traces once for the merged OTLP export, derives test metadata from the root playwright.test span, then downloads {baseUrl}/screenshots.zip into the service worker when screenshots are needed.

If the viewer URL includes traceToken, the token is propagated to remote Trace API requests as a query parameter:

https://trace.endform.dev/?traceSource=https%3A%2F%2Fexample.com%2Fplaywright-otel-trace-viewer%2Fv1%2F{traceId}&traceToken={token}

This loads {baseUrl}/traces?traceToken={token} and {baseUrl}/screenshots.zip?traceToken={token}.

The token can also be embedded in the traceSource URL, or in a Trace API URL entered in the load form. The viewer normalizes those forms back to the canonical top-level traceToken query parameter.

The remote API contract is:

• GET {baseUrl}/traces returns { "resourceSpans": [...] } or 404 when the trace does not exist
• GET {baseUrl}/screenshots.zip returns a ZIP with root manifest.json and screenshots/*, or 404 when there are no screenshots

The service worker exposes internal per-screenshot URLs to the viewer after loading the ZIP.

Deploy Your Own

Cloudflare

You can deploy a copy of the trace viewer to Cloudflare:

git clone https://github.com/endformdev/playwright-opentelemetry.git
cd playwright-opentelemetry/trace-viewer

pnpm install
pnpm build
pnpm deploy

Custom Base Path (Optional)

If you want to build with absolute paths for a specific deployment location:

TRACE_VIEWER_BASE=/trace-viewer/ pnpm build

Local Development

pnpm install
pnpm dev