Reproduce a headless-only test failure locally

What you’ll end up with

A tracelane-report-<spec>.html produced by a local headless run that reproduces your CI failure. You scrub through the replay and see the missing font, the off-screen modal, or the viewport-dependent layout that only the headless browser hit.

Headless rrweb replay reproducing a CI failure

Prerequisites

An existing WebdriverIO suite with @tracelane/wdio installed
Local Chrome (or Chromium) on your machine
Node >= 22

Steps

1. Confirm the service is wired in

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

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

2. Force the same headless mode CI uses

capabilities: [{
  browserName: 'chrome',
  'goog:chromeOptions': {
    args: ['--headless=new', '--window-size=1280,720'],
  },
}],

Match CI’s --window-size exactly — viewport-dependent regressions hide behind any other resolution.

3. Run the offending spec

npx wdio run wdio.conf.ts --spec specs/checkout.spec.ts

4. Open the report

Open tracelane-report-checkout.html. You can see the rendered DOM the headless browser produced, frame-by-frame, even though there was no display to watch.

Why this works

rrweb captures DOM state from inside the page, so the recording is identical whether the browser had a visible chrome window or not. The HTML report replays that DOM in your normal browser — so you “watch” the headless run after the fact.