Add a replayable HTML report to your WebdriverIO suite in 5 minutes

What you’ll end up with

A tracelane-report-<spec>.html next to your existing WDIO reporter output, generated automatically whenever a spec fails. The file is self-contained — open it in any browser to scrub the rrweb replay, inspect the console, and see failed network requests. On HTTPS pages the report also includes an advisory Security-hygiene panel (see the security-hygiene recipe) flagging things like missing security headers and insecure cookies.

Tracelane HTML report from a WebdriverIO suite

Prerequisites

An existing WebdriverIO project (v8 or v9)
Node >= 22

Steps

1. Install the service

npm i -D @tracelane/wdio@0.1.0-alpha.14

2. Add it to `wdio.conf.ts`

import { tracelaneService } from '@tracelane/wdio';

export const config = {
  services: [tracelaneService()],
  // ... your existing config
};

That’s the entire integration. No reporter changes, no spec rewrites, no environment variables.

3. Run your suite

npx wdio run wdio.conf.ts

When a spec fails, the service writes a tracelane-report-<spec>.html into your project root.

4. Open the report

Open the file in any browser. The rrweb player lives at the top; console and network panels below it are time-synced to the replay scrubber.

Why this works

The service subscribes to WDIO’s beforeSession / afterTest lifecycle, attaches the framework-agnostic @tracelane/core recorder to the running browser, and hands the captured events to @tracelane/report to inline into a single HTML file. Pass-tests are discarded immediately; only failures keep their event stream.