Recording of the visual regression run on codecityapp.com · CodeCityApp — app walkthrough.

In this video· click a step to jump to it

C
Passed

Test recording

CodeCityApp — app walkthrough

207,361 ms · 116,266 pixels changed

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

Take this test with you

This is a real Playwright test, recorded against codecityapp.com. 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,s)=>screenshotPath.replace('.png','-'+n+'-'+(String(s).replace(/[^a-z0-9]+/gi,'-').replace(/^-|-$/g,'').toLowerCase().slice(0,22)||'view')+'.png');
  let idx=1;
  const cap=async(s,full)=>{ stepLogger.log('Scenario '+idx+': '+s); await page.screenshot({ path: shot(idx,s), fullPage: full!==false }); idx++; };
  const dismiss=async()=>{ for(const re of [/^skip$/i,/skip for now/i,/got it/i,/dismiss/i,/^close$/i,/maybe later/i,/not now/i,/^next$/i,/let.?s go/i]){ await page.getByRole('button',{name:re}).first().click({timeout:800}).catch(function(){}); } await page.keyboard.press('Escape').catch(function(){}); };
  const slowScroll=async(prefix,frames)=>{ const total=await page.evaluate(function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);}).catch(function(){return 3000;}); const vh=await page.evaluate(function(){return window.innerHeight;}).catch(function(){return 900;}); let y=0,seg=1; while(seg<=frames && y < total){ y+=Math.floor(vh*0.8); await page.evaluate(function(yy){window.scrollTo({top:yy,behavior:'smooth'});},y).catch(function(){}); await page.waitForTimeout(1500); await cap(prefix+'-'+seg,false); seg++; } };

  await page.goto('https://codecityapp.com/',{waitUntil:'domcontentloaded'}).catch(function(){}); await page.waitForLoadState('networkidle',{timeout:6000}).catch(function(){}); await page.waitForTimeout(1700); await dismiss(); await cap('home');
  await page.goto('https://codecityapp.com/your-city',{waitUntil:'domcontentloaded'}).catch(function(){}); await page.waitForLoadState('networkidle',{timeout:8000}).catch(function(){}); await page.waitForTimeout(2400); await dismiss(); await page.waitForTimeout(800); await dismiss(); await cap('your-city');
  await page.goto('https://codecityapp.com/challenge/e27608e5-12ab-4c09-9f04-868bf3c61e07',{waitUntil:'domcontentloaded'}).catch(function(){}); await page.waitForLoadState('networkidle',{timeout:8000}).catch(function(){}); await page.waitForTimeout(3000); await dismiss(); await cap('challenge-problem');
  try {
+21 more lines claim the test to get the full code.

Checks run

Run
Visual
80.76%
Text
DOM
Network
+84 −84
Console
A11y
B
Perf
48 over
URL
Variables
Full report
Log in →
116,266
Diff px
3m 27s
Duration
B
Accessible
WCAG 2.2 · 85
C
Fast
Web Vitals · 70

Notes from the demo run

AI-generated

CodeCityApp gamifies learning to code: you 'build a city' (Base / Explore / Crew / Architect tabs) as you clear 1,334 challenges across 10 languages, with an always-on AI mentor called ARIA. The signed-in surface is a genuine product, not a marketing shell — Your City dashboard, a Learning track, individual Challenge pages, Projects, Certifications, a Leaderboard and Guilds (social), all on a Free plan with a streak (🔥) and XP (V) counter in the header.

Highlights
  • Real coding loop, not a course list
    A challenge opens with a CodeMirror editor, a Problem/Tests split, and Run/Submit — you write Python (e.g. fibonacci returns the first n numbers), Run grades it against the test cases live, and Your City / Galaxy / Guilds wrap it in streaks and XP.
  • ARIA mentor is one click from everywhere
    An 'ARIA' AI-mentor entry sits in the global header, so help is always one tap away rather than buried in a challenge view.
  • Getting-Started checklist seeds the empty state
    A '1 of 5 complete' onboarding checklist gives a brand-new account an obvious next step instead of a blank dashboard.
Friction points
  • Onboarding overlay sits on the dashboard
    First authed load shows a 'Create your account / Getting Started' overlay over Your City — captured both states, but a first-timer sees the checklist before the city itself.
  • Client-side crash log in localStorage
    The app ships a 'cc-crash-log' localStorage key — it's tracking front-end crashes, which is exactly the kind of regression a per-deploy visual test would catch before users hit them.

10 visual changes

Step 140,559 px changed
Before
Before
After
After
Diff
Diff
Step 240,559 px changed
Before
Before
After
After
Diff
Diff
Step 31,648 px changed
Before
Before
After
After
Diff
Diff
Step 41,966 px changed
Before
Before
After
After
Diff
Diff
Step 51,942 px changed
Before
Before
After
After
Diff
Diff
Step 61,954 px changed
Before
Before
After
After
Diff
Diff
Step 72,781 px changed
Before
Before
After
After
Diff
Diff
Step 848 px changed
Before
Before
After
After
Diff
Diff
Step 1148 px changed
Before
Before
After
After
Diff
Diff
Step 1224,761 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.
56,331 test runs recorded · 941 products tested with Lastest

This test was built for codecityapp.com — 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.