How to verify a click in an AI-recorded website demo
A 13-second product demo came back from our recorder. The cursor moved, the page scrolled twice, and every frame decoded. It had missed the only step the viewer needed to see. The task was to open Captions from Valmeraβ
A 13-second product demo came back from our recorder. The cursor moved, the page scrolled twice, and every frame decoded. It had missed the only step the viewer needed to see.
The task was to open Captions from Valmeraβs public Getting Started guide and scroll the destination. We recorded three attempts with the same destination. The first two reported zero completed clicks. The third reached the Captions page. Here are the first recording and the successful recording. Both are silent browser captures from the Valmera team.
Give the action a visible outcome
βClick Captionsβ describes an input. βShow the heading AI Captions: Edit Text, Timing & Styles in Valmeraβ gives the person reviewing the recording something to look for. A cursor ring can appear before a navigation finishes. A scroll can move the wrong page.
| Target we asked the recorder to click | Reported clicks | What happened |
|---|---|---|
Text label Captions
|
0 | The video reached 13 seconds. At 10 seconds it showed later steps in Getting Started. |
a[href='/docs/captions'] |
0 | The recorder reported one scroll. We have the event report for this attempt. |
.docs-sidebar a[href='/docs/captions'] |
1 | The click was reported at 3.57 seconds. The Captions heading was visible at 4.00 seconds, before the scroll at 5.72 seconds. |
The page had both mobile and desktop navigation links. Restricting the selector to the visible desktop sidebar worked in this capture. A portrait recording needs its own check because the navigation can collapse into a menu. The three requests and event reports preserve what was actually sent.
Inspect the MP4 you received
With FFmpeg installed, download the successful recording above and run these commands in its folder. They extract one full-resolution PNG on either side of the reported click.
ffmpeg -v error -ss 3.50 -i public-docs-walkthrough.mp4 -frames:v 1 before-click.png
ffmpeg -v error -ss 4.00 -i public-docs-walkthrough.mp4 -frames:v 1 after-click.png
The first frame shows the original heading with the pointer near the sidebar. The second shows the destination heading. The resulting file contains 325 frames at 30 fps, or about 10.83 seconds. We ran the same decode check on the unsuccessful first recording and got 390 readable frames. A media-file check and a check of the recorded task answer different questions.
Use this on your next walkthrough
Give the recorder one public URL, one action and one visible result. For a pricing demo, that might be βOpen Pricing, switch from monthly to annual, then hold on the annual price and billing period.β Play those few seconds before adding zooms or narration. If the control responds but the amount never changes, the footage is still missing the result.
For a public page, start a website demo in Valmera. You can review the URL through sign-in before starting a recording. Recording and AI editing require an eligible subscription. For a private dashboard, record the task in your own session with demonstration data and bring that recording into the editor.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.