Recording of the visual regression run on www.vocalo.app · Vocalo — app walkthrough.

In this video· click a step to jump to it

W
Passed ✓

Test recording

Vocalo — app walkthrough

61,292 ms · 1,186 pixels changed

We built this regression test for www.vocalo.app — it's yours to keep, free.

Take this test with you

This is a real Playwright test, recorded against www.vocalo.app. Claim it into your own workspace and re-run it on every deploy — free.

export async function test(page, baseUrl, screenshotPath, stepLogger) {
  const shot = (n, slug) => screenshotPath.replace('{{step}}', `${n}_${slug}`);
  await page.route('**/*google*analytics*', r => r.abort().catch(() => {}));
  await page.route('**/*googletagmanager*', r => r.abort().catch(() => {}));
  await page.route('**/*hotjar*', r => r.abort().catch(() => {}));

  // Step 1: Home (public, shows logged-in user in nav)
  await page.goto('https://www.vocalo.app/en', { waitUntil: 'domcontentloaded' });
  await page.waitForLoadState('networkidle').catch(() => {});
  await page.waitForTimeout(1500);
  stepLogger.log('Step 1: Home page');
  await page.screenshot({ path: shot(1, 'home'), fullPage: false });
+65 more lines — claim the test to get the full code.

Checks run

Run
✓
Visual
0.79%
Text
—
DOM
✓
Network
+80 −80
Console
30 new
A11y
Review
Perf
20 over
URL
✓
Variables
—
Full report
Log in →
1,186
Diff px
1m 01s
Duration
Review
Accessible
WCAG 2.2
C
Fast
Web Vitals · 70

Notes from the demo run

AI-generated

Vocalo is an AI transcription and translation tool for students, turning YouTube and Zoom recordings into searchable, translatable text. The authenticated experience is clean with a focused sidebar nav (Dashboard, Transcriptions, Billing, Profile). The dashboard shows quota usage stats at a glance; the New Transcription modal is the core action. Billing surface clearly presents the free-vs-paid tiers with a smooth upgrade-plan page. Background Clerk session calls fire 401s after JWT expiry but pages render fully authenticated throughout.

Highlights
  • Core action (New Transcription)
    Prominent CTA from the dashboard; modal opens inline showing YouTube/Zoom URL input.
  • Transcriptions list
    Clean empty state with call-to-action; ready to show recordings as they accumulate.
  • Billing & upgrade
    Two-step billing flow: overview page then dedicated upgrade-plan page with plan comparison.
  • Profile page
    User profile accessible at /en/profile; shows account details and language settings.
  • Auth: Clerk storage-state replay
    Session captured via nodriver + Turnstile CDP click; __client HttpOnly cookie replays on EB. Pages render authenticated; background /api/app quota calls 401 on JWT expiry (expected Clerk behavior, non-blocking).

2 visual changes

Step 3871 px changed
Before
Before
After
After
Diff
Diff
Step 5315 px changed
Before
Before
After
After
Diff
Diff

Share this run

Earned · Lastest awards

Proof your app is not AI slop

LASTEST
starter
tests
all passing
regressions
0
Badges stay live, ratchet upward, only downgrade on confirmed regression.
57,275 test runs recorded · 1,164 products tested with Lastest

This test was built for www.vocalo.app — claim it free

One click copies the test and baseline screenshots into your own Lastest workspace. Re-run on every deploy and catch regressions before your users do — free, no card required.