Testa i pixel: controllo qualità a screenshot per un piccolo team

Ci siamo arrivati nel modo onesto: dopo aver rilasciato regressioni visive che un solo screenshot avrebbe intercettato. Un pannello smerigliato che veniva slavato sugli sfondi scuri. Un menu che si disegnava ma non si poteva cliccare. Un campo di ricerca che alla larghezza di un telefono esisteva come una scheggia da 65 pixel. Ognuno di questi è passato indenne da una suite di test verde, perché la suite testava funzioni e i bug vivevano nei pixel.

La macchina è più piccola di quanto pensi

La nostra è un ambiente locale popolato di dati finti ma credibili, un accesso headless la cui sessione è salvata su disco così niente ci rallenta, e un ciclo: pagine per temi per dimensioni dello schermo. Computer e telefono, chiaro e scuro, ogni schermata che conta. È tutto uno script breve, e una passata completa produce una cartella di immagini in pochi minuti.

1import { chromium } from 'playwright';2 3const browser = await chromium.launch();4const ctx = await browser.newContext({5  storageState: 'auth.json', // login once, reuse everywhere6  viewport: { width: 1440, height: 900 },7});8const page = await ctx.newPage();9 10for (const [name, url] of PAGES) {11  await page.goto(BASE + url, { waitUntil: 'load' });12  for (const theme of ['light', 'dark']) {13    await page.evaluate((t) =>14      document.documentElement.setAttribute('data-theme', t), theme);15    await page.screenshot({ path: `shots/${name}-${theme}.png`, fullPage: true });16  }17}

Screenshot più prove

Le immagini colgono quello che colgono gli occhi. Per i bug di interazione vuoi che sia il browser a testimoniare. Due righe fanno quasi tutto il lavoro: elementFromPoint al centro di un comando ti dice cosa riceverebbe davvero il clic, e getBoundingClientRect ti dice se quel comando entra davvero nello schermo che dichiara di supportare. Adesso li verifichiamo entrambi per qualsiasi cosa ci abbia già scottato.

1// Is the menu item really clickable, or is something invisible covering it?2const hit = await page.evaluate(() => {3  const el = document.querySelector('[role="menuitem"]');4  const r = el.getBoundingClientRect();5  const top = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2);6  return el === top || el.contains(top);7});8 9// Does the search input actually fit a 390px phone?10const fits = await page.evaluate(() => {11  const r = document.querySelector('input[name="q"]').getBoundingClientRect();12  return r.right <= window.innerWidth && r.width > 200;13});

Tutti e due i temi, ogni volta

I bug del tema scuro sono una categoria a sé, perché si nascondono agli sviluppatori che lavorano in un tema solo. Un riempimento quasi bianco scritto a mano sembra voluto su una pagina chiara e radioattivo su una scura. Cambiare l'attributo del tema durante la stessa visita alla pagina costa una riga e raddoppia la copertura. Trattiamo come non testata qualsiasi schermata che non sia stata fotografata in entrambi i temi.

Cosa intercetta

• Bug di contesto di impilamento: disegnato, visibile e non cliccabile. Solo un test sul clic li vede.
• Fughe di tema: superfici chiare che brillano su pagine scure, grafici che spariscono, illustrazioni con lo sfondo cotto dentro.
• Traboccamento sul telefono: barre fisse che coprono i contenuti, campi ridotti a schegge, titoli tagliati a metà frase.
• Il testo nel suo contesto: il troncamento, la contraddizione, la frase che nessun linter segnalerà mai.

Niente di tutto questo sostituisce la suite unitaria. La suite dimostra che i conti sul denaro tornano, gli screenshot dimostrano che una persona arriva al pulsante che li fa partire. Un piccolo team non ha un reparto di controllo qualità, ma una cartella di screenshot freschi rivisti prima di ogni rilascio è una discreta imitazione. Il test è il guardare.

I test passano è un'affermazione sulle tue funzioni. Lo screenshot è un'affermazione sul tuo prodotto.