Automation Replay Dashboard

From raw QA footage to trustworthy Playwright specs

This page takes real browser recordings, slices them into keyframes, aligns them with AI reasoning, and rebuilds each journey as a deterministic Playwright test you can inspect, download, and run. Scroll for benchmarks, visual evidence, and the full scripts behind every video.

Benchmarks

How to replicate: pipeline, file structure & commands

Below is the three-stage pipeline that keeps every Playwright script faithful to the recordings while remaining resilient to UI drift.

Capture & Curate

Scene-detection finds motion spikes, then we hand-trim to the decisive UI states while preserving aspect ratio and ≤30 KB budgets.

  • Frame similarity + OCR to confirm the URL bar.
  • Visual entropy score keeps only meaningful pauses.
  • Every saved frame pairs with its timestamp + action label.

Interpret & Align

Vision + UI models narrate deltas between frames so we can map each pause to a DOM element, selector strategy, and assumption.

  • Frame findings table links evidence → reasoning.
  • Selectors are dry-run on the live app for stability.
  • Conflicts trigger a manual revisit with the footage.

Automate & Verify

Specs replay the action order with 2–3 s pacing, adaptive waits, and safety nets for ad skips, modal dismissals, or dice re-rolls.

  • Reusable helpers enforce slow-mo + retry logic.
  • Scripts assert the same copy highlighted in frames.
  • Final run compares screenshots to ensure parity.

Run The Playwright Script

We validated these commands using the existing playground-pro/script.spec.ts in the repo. Replace playground-pro with any other folder that contains a spec you created.

  • Install Playwright (one-time)
    npx playwright install --with-deps chromium
    Need local dependencies? Run npm install -D @playwright/test, otherwise npx works fine.
  • Execute the automation
    npx playwright test playground-pro/script.spec.ts --browser=chromium --headed
    Swap playground-pro with your own folder (e.g., my-test/script.spec.ts).
  • Optional: slow things down for demo mode
    PWDEBUG=1 npx playwright test playground-pro/script.spec.ts --browser=chromium --headed
    Setting PWDEBUG=1 replays the script step-by-step (useful when you just need to watch it, no video required).