Recording of the visual regression run on opula.io · opula — app walkthrough.

In this video· click a step to jump to it

O
Passed ✓

Test recording

opula — app walkthrough

59,448 ms · 462 pixels changed

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

Take this test with you

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

export async function test(page, baseUrl, screenshotPath, stepLogger) {
  // Auth is provided by an attached storage_state (setupOverrides) — the runner
  // replays it before this test, so page.goto(baseUrl) starts AUTHENTICATED.
  const APP_ENTRY = '/dashboard/briefing';        // authed landing path
  const NAV_HINTS = ["/dashboard/briefing", "/dashboard/assets", "/dashboard/cash-flow", "/dashboard/retirement", "/dashboard/ledger", "/dashboard/portfolio", "/dashboard/benchmark", "/dashboard/market", "/dashboard/transactions"];          // preferred in-app routes (DOM-verified before use)
  const SEARCH_VALUE = 'What shape are my finances in?';
  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, 1200); 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' });
  for (const pat of ['**/cdn-cgi/scripts/**/email-decode.min.js','**/sentry-cdn.com/**','**/browser.sentry-cdn.com/**','**/cdn.segment.com/**','**/connect.facebook.net/**','**/*.hotjar.com/**']) {
    await page.route(pat, function (r) { r.abort().catch(function(){}); }).catch(function(){});
+103 more lines — claim the test to get the full code.

Checks run

Run
✓
Visual
0.57%
Text
—
DOM
✓
Network
+275 −275
Console
✓
A11y
A
Perf
198 over
URL
✓
Variables
—
Full report
Log in →
462
Diff px
59s
Duration
A
Accessible
WCAG 2.2 · 93
C
Fast
Web Vitals · 70

Notes from the demo run

AI-generated

Opula's authenticated app is a clean, dark-themed personal-finance dashboard. The Briefing screen leads with a fully-populated sample (net worth $312k, market mood, portfolio risk grade, net-worth drivers, upcoming AAPL earnings, FIRE pace) framed as a preview, with a clear 'Connect and see my numbers' CTA and a 'Get set up 0/5' checklist. The left sidebar groups Wealth (Assets, Cash flow, Retirement, Ledger) and Markets (Portfolio, Benchmark, Market, Transactions), plus a USD/KRW toggle and theme switch. Unconfigured sections render tidy empty states that each point to a next action.

Highlights
  • Sample-preview briefing sells the payoff first
    Instead of a blank first-run, the Briefing shows a complete dashboard as a labelled sample (net-worth trend, risk grade in the top tier, FIRE 'ahead of pace', next earnings) so a new user grasps the value before entering any data, then nudges them to 'Connect and see my numbers'.
  • Consistent, guiding empty states
    Retirement ('No data yet') and Benchmark ('Nothing to compare yet') each pair an icon with a single clear next step, keeping the pre-setup app legible rather than looking broken.
Friction points
  • Floating CTA pill overlaps sample cards
    On the Briefing screen the centered 'Connect your AI and fill in your numbers' pill sits on top of the 'Why net worth moved this month' card, partially masking sample content. Fix: anchor the pill to the bottom-right or add bottom scroll padding so it never covers cards.
  • 'Get set up 0/5' hides the next step
    The progress bar shows 0/5 but no label for what step one is, so users can't tell what to do next at a glance. Fix: surface the next-step title under the progress bar.

Visual change

Step 11462 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,421 test runs recorded · 1,174 products tested with Lastest

This test was built for opula.io — 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.