spb/countryatlas

1import { chromium } from '/Users/simon-pierreboucher/Desktop/uqo-eval/node_modules/playwright/index.mjs';2const BASE = 'http://localhost:8290';3const OUT = new URL('./screens/compare-rankings/seg/', import.meta.url).pathname;4const b = await chromium.launch();5const errs = [];6async function ctx(w, dark=false){ const c = await b.newContext({ viewport: { width: w, height: w<768?844:900 }, isMobile: w<768, hasTouch: w<768, colorScheme: dark?'dark':'light' }); const p = await c.newPage(); p.on('pageerror',e=>errs.push(String(e))); p.on('console',m=>{if(m.type()==='error')errs.push(m.text())}); return [c,p]; }7// mobile: options sheet on compare8{ const [c,p] = await ctx(390); await p.goto(`${BASE}/compare/canada/united-states/france?tab=economy`, {waitUntil:'networkidle'}); await p.getByRole('button',{name:'Options'}).click(); await p.waitForTimeout(600); await p.screenshot({path:`${OUT}i-options-390.png`}); await c.close(); }9// mobile: add-country picker10{ const [c,p] = await ctx(390); await p.goto(`${BASE}/compare/canada/united-states/france`, {waitUntil:'networkidle'}); await p.getByRole('button',{name:'Add a country'}).first().click(); await p.waitForTimeout(500); await p.locator('dialog input[type=search]').fill('ger'); await p.waitForTimeout(400); await p.screenshot({path:`${OUT}i-picker-390.png`}); await p.locator('dialog button', {hasText:'Germany'}).click(); await p.waitForURL(/germany/); await p.waitForTimeout(1200); await p.screenshot({path:`${OUT}i-added-390.png`}); console.log('after add', p.url()); await c.close(); }11// desktop: custom tab + indicator picker12{ const [c,p] = await ctx(1280); await p.goto(`${BASE}/compare/canada/united-states/france?tab=custom&indicators=gdp-per-capita,life-expectancy`, {waitUntil:'networkidle'}); await p.waitForTimeout(600); await p.screenshot({path:`${OUT}i-custom-1280.png`}); await p.getByRole('button',{name:'Add an indicator'}).click(); await p.waitForTimeout(800); await p.locator('dialog input[type=search]').fill('unemploy'); await p.waitForTimeout(400); await p.screenshot({path:`${OUT}i-indpicker-1280.png`}); await p.locator('dialog li button').first().click(); await p.waitForTimeout(1500); console.log('custom url', p.url()); await c.close(); }13// desktop: snapshot cell provenance + indicator link14{ const [c,p] = await ctx(1280); await p.goto(`${BASE}/compare/canada/united-states/france`, {waitUntil:'networkidle'}); await p.getByRole('button',{name:'Show source and provenance'}).first().click(); await p.waitForTimeout(600); await p.screenshot({path:`${OUT}i-prov-1280.png`}); await p.keyboard.press('Escape'); await p.getByRole('link',{name:'Chart Life expectancy'}).click(); await p.waitForURL(/tab=health/); await p.waitForTimeout(1500); console.log('chart link', p.url()); await p.screenshot({path:`${OUT}i-health-hero-1280.png`}); await c.close(); }15// desktop: ranking highlight + group filter + dark mode16{ const [c,p] = await ctx(1280, true); await p.goto(`${BASE}/rankings/gdp-per-capita?highlight=canada`, {waitUntil:'networkidle'}); await p.waitForTimeout(600); await p.screenshot({path:`${OUT}i-rk-highlight-dark-1280.png`}); await p.locator('select[aria-label="Group"]:visible').selectOption('g20'); await p.waitForTimeout(1500); console.log('group url', p.url()); await p.screenshot({path:`${OUT}i-rk-g20-dark-1280.png`}); await c.close(); }17// mobile: ranking filters sheet + history panel18{ const [c,p] = await ctx(390); await p.goto(`${BASE}/rankings/life-expectancy?group=oecd&highlight=canada`, {waitUntil:'networkidle'}); await p.getByRole('button',{name:'Filters'}).click(); await p.waitForTimeout(600); await p.screenshot({path:`${OUT}i-rk-filters-390.png`}); await p.keyboard.press('Escape'); await p.evaluate(()=>document.getElementById('history')?.scrollIntoView()); await p.waitForTimeout(600); await p.screenshot({path:`${OUT}i-rk-history-390.png`}); await c.close(); }19// mobile dark compare economy20{ const [c,p] = await ctx(390, true); await p.goto(`${BASE}/compare/canada/united-states/france?tab=economy`, {waitUntil:'networkidle'}); await p.evaluate(()=>window.scrollTo(0,700)); await p.waitForTimeout(700); await p.screenshot({path:`${OUT}i-eco-dark-390.png`}); await c.close(); }21await b.close(); console.log('errors', errs.length, errs.slice(0,5));22