Dev.to WebDev πŸ›  Dev πŸ‘ 0 πŸ“– 2 min read

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’

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’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.

Successful run at 3.50 and 4.00 seconds. The heading switches from Getting Started to the Captions guide.

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.

πŸ“° Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.