Improve spinner and video mode diagnostics

[mmkal]

Summary

This tightens middlewright's loading-state and video-mode story:

• spinnerWaiter now treats disabled action targets as not ready, so a visible disabled button can still wait behind real progress UI instead of failing early.
• videoMode records dead-air spans and element highlight rectangles as metadata, then renders trimming and annotations in post with ffmpeg.
• page.videoMode exposes runtime helpers for dead air, metadata, output paths, and source range controls like setStartTime() / setEndTime().
• Playwright reports now get raw/rendered video artifacts plus an attached frame-stepper HTML viewer.
• CI publishes pkg.pr.new preview packages for pull requests via pnpm exec pkg-pr-new publish --packageManager=pnpm.

Demo videos

These come from VIDEO_MODE=1 pnpm spec -g list-and-describe --headed in ../iterate. The rendered output shows the pointer guidance, dead-air trimming, action holds, and frame-stepper behavior; the raw video is included for comparison.

Rendered video-mode output:

video-rendered.webm

Raw Playwright recording:

video-raw.webm

Example

await using plugged = await addPlugins({
  page,
  testInfo,
  plugins: [spinnerWaiter(), videoMode({ deadAirThreshold: 300 })],
});

plugged.videoMode.setStartTime();
await plugged.getByRole("button", { name: "Checkout" }).click();
plugged.videoMode.setEndTime();

console.log(plugged.videoMode.outputPaths().rendered);

Validation

• pnpm typecheck
• pnpm build
• pnpm exec publint
• pnpm test

---

Note

Medium Risk
Large behavioral change to videoMode and middleware dispatch (timing, arg rewriting, lifecycle order); ffmpeg is now required in CI and for rendered video output, though coverage is extensive.

Overview
Reworks videoMode from slowing the browser (pre-action pauses and DOM outlines) to recording dead-air spans and highlight metadata during the test, then producing video-raw.webm, video-rendered.webm, video-mode.json, and an HTML frame-stepper via ffmpeg after the run. Tests get page.videoMode controls (deadAir, setStartTime / setEndTime, metadata, outputPaths).

The plugin system gains ActionContext.timing, middleware next(adjustedArgs), typed pageExtension, and afterTestFinalize (so other hooks can still see an open page before video finalize closes it and writes artifacts). spinnerWaiter treats visible disabled action targets as not ready and routes fast-fail through the middleware chain; bundled plugins no-op when PWDEBUG=1.

CI installs ffmpeg for video tests and publishes pkg-pr-new preview packages on pull requests. Docs and specs cover the new video pipeline, debug mode, and plugin boundaries.

^{Reviewed by Cursor Bugbot for commit cbdf837. Bugbot is set up for automated code reviews on this repo. Configure here.}

[pkg-pr-new]

Open in StackBlitz

pnpm add https://pkg.pr.new/middlewright@2

commit: cbdf837

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ac145dd. Configure here.}