In this video· click a step to jump to it
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 {Checks run
Notes from the demo run
AI-generatedCodeCityApp 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.
- Real coding loop, not a course listA 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 everywhereAn '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 stateA '1 of 5 complete' onboarding checklist gives a brand-new account an obvious next step instead of a blank dashboard.
- Onboarding overlay sits on the dashboardFirst 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 localStorageThe 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
Share this run
Proof your app is not AI slop
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.





























