Debug a flaky checkout test that only fails in CI

What you’ll end up with

A self-contained tracelane-report.html from the failed CI run with the rrweb replay scrubbable to the failure moment, console errors visible in a synced panel, and a network panel showing the request that broke the test. Open it in any browser; no replay server required.

Tracelane report for a failed checkout test

You can poke at a live example here: acme-shop checkout failure report.

Prerequisites

An existing WebdriverIO project
A GitHub Actions workflow running that suite
Node >= 22

Steps

1. Install the WDIO service

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

2. Register the service in `wdio.conf.ts`

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

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

3. Upload the report from GitHub Actions

Add an upload step to your workflow so the HTML report is downloadable from the failed run.

- name: Upload tracelane report
  if: failure()
  uses: actions/upload-artifact@v4
  with:
    name: tracelane-report
    path: tracelane-report-*.html

4. Open the report

Push the change, wait for the next red build, click into the failed job, and download the tracelane-report artifact. Open the HTML file in any browser and scrub the replay to the failure moment. Console + network panels stay in sync with the replay timeline.

Why this works

The WDIO service hooks afterTest and afterCommand, captures the rrweb event stream plus console + failed-network responses for the failing spec, and inlines the rrweb player + your session data into a single HTML file. There is no SaaS endpoint, no upload, and no replay server — just a static artifact that GitHub Actions can hold onto.