Recording of the visual regression run on devprep.app · DevPrep — app walkthrough.

In this video· click a step to jump to it

D
Passed ✓

Test recording

DevPrep — app walkthrough

76,799 ms · 61,152 pixels changed

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

Take this test with you

This is a real Playwright test, recorded against devprep.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('.png', `-${n}-${slug}.png`);
  const SCROLL_THROUGH = "(async () => { const ease = t => 1 - Math.pow(1 - t, 3); const max = Math.max(0, document.body.scrollHeight - window.innerHeight); if (max < 40) return; const anim = (a, b, ms) => new Promise(res => { const t0 = performance.now(); const step = now => { const p = Math.min(1, (now - t0) / ms); window.scrollTo(0, a + (b - a) * ease(p)); p < 1 ? requestAnimationFrame(step) : res(); }; requestAnimationFrame(step); }); await anim(0, max, 1300); await new Promise(r => setTimeout(r, 300)); await anim(max, 0, 700); })()";

  await page.context().setExtraHTTPHeaders({ 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36' });
  await page.route('**/cdn-cgi/scripts/**', function (r) { r.abort(); }).catch(function () {});

  stepLogger.log('Public: help / how DevPrep works');
  await page.goto(baseUrl + '/help', { waitUntil: 'domcontentloaded' });
  await page.waitForLoadState('networkidle', { timeout: 4000 }).catch(function () {});
  await page.waitForTimeout(2200);
  await page.evaluate(SCROLL_THROUGH).catch(function () {});
+93 more lines — claim the test to get the full code.

Checks run

Run
✓
Visual
49.17%
Text
—
DOM
✓
Network
—
Console
✓
A11y
A
Perf
196 over
URL
✓
Variables
—
Full report
Log in →
61,152
Diff px
1m 17s
Duration
A
Accessible
WCAG 2.2 · 92
C
Fast
Web Vitals · 70

Notes from the demo run

AI-generated

We signed into DevPrep with Google and recorded a complete flashcard study session on the TypeScript deck: open the deck, flip a card, rate it Got it, flip the next one, mark it for Review, step back with Previous, then Finish Session and watch the dashboard fill in. The loop is tight - three clicks per card, no page reloads, and the session lands on the dashboard as a real streak, a heatmap cell and a per-topic average.

Highlights
  • Rating a card is the only state that matters, and you say so
    The pre-session panel spells out that only rated cards affect progress and the Review Deck, and that nothing is saved until Finish Session. A user knows exactly what counts before they start - rare, and it removes the 'did that save?' anxiety completely.
  • The dashboard fills in immediately after finishing
    One finished session turned an empty dashboard into per-topic averages (TypeScript 2/3, 66% all-time), a Flashcard-sessions count, a day-streak and a heatmap cell. The payoff for the work arrives on the very first session rather than after five.
  • The free-plan cap is stated inside the deck, not at checkout
    'You're seeing 20 of 41 cards on the free plan' sits above the card with the upgrade next to it. The limit is visible while the value is being felt, which is the right moment to show it.
  • Previous lets you back out without losing a rating
    Stepping back to a rated card kept the counters intact. Small thing, but it means a mis-click is recoverable and people will rate more honestly.
Friction points
  • Switch to Review Deck is disabled during the session that fills it
    The button is greyed out for the whole session even after cards are marked for Review - it only becomes useful after Finish Session. Right now it reads as broken. Either enable it once the first card is marked, or label it 'Review deck (available after you finish)'.
  • Sign-in has no URL of its own
    Log In opens a panel on the current page rather than a /login route, so a signed-out deep link (a shared deck, a bookmarked topic) cannot send someone to a sign-in page and back. A real route would also give the login screen something to redirect to after auth.
Couldn't reach
  • AI Interview·The voice interview needs a microphone, which a recorded headless browser does not have. Flashcards carried the walkthrough instead.

8 visual changes

Step 210,025 px changed
Before
Before
After
After
Diff
Diff
Step 52,417 px changed
Before
Before
After
After
Diff
Diff
Step 68,243 px changed
Before
Before
After
After
Diff
Diff
Step 71,206 px changed
Before
Before
After
After
Diff
Diff
Step 87,946 px changed
Before
Before
After
After
Diff
Diff
Step 102,149 px changed
Before
Before
After
After
Diff
Diff
Step 1314,583 px changed
Before
Before
After
After
Diff
Diff
Step 1414,583 px changed
Before
Before
After
After
Diff
Diff

Share this run

Earned · Lastest awards

Proof your app is not AI slop

LASTEST
starter
regressions
0
Badges stay live, ratchet upward, only downgrade on confirmed regression.
57,226 test runs recorded · 1,151 products tested with Lastest

This test was built for devprep.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.