Test pikslene: skjermbilde-QA for et lite team
Testene våre var grønne og nedtrekksmenyen kunne ikke klikkes. Enhetstester ser ikke stablingsfeil, ødelagt mørkt tema eller overflyt på mobil. Her er den lille skjermbilderiggen som nå ser på hver flate for oss, og de visuelle feilene den fanger som tester aldri kommer til å fange.
Vi tok dette i bruk på den ærlige måten: etter å ha sluppet visuelle regresjoner som ett eneste skjermbilde ville fanget. Et frostet panel som kom ut blekt på mørk bakgrunn. En meny som tegnet seg, men ikke kunne klikkes. Et søkefelt som fantes på mobilbredde som en 65 piksler tynn strimmel. Hver eneste av dem seilte gjennom en grønn testpakke, fordi pakken testet funksjoner og feilene bodde i piksler.
Riggen er mindre enn du tror
Vår er et lokalt miljø fullt av overbevisende oppdiktede data, én hodeløs innlogging med økten lagret til disk så ingenting strupes, og en løkke: sider ganger temaer ganger skjermstørrelser. PC og mobil, lyst og mørkt, hver flate som betyr noe. Det hele er et kort script, og et fullt sveip lager en mappe med bilder på noen minutter.
import { chromium } from 'playwright'; const browser = await chromium.launch();const ctx = await browser.newContext({ storageState: 'auth.json', // login once, reuse everywhere viewport: { width: 1440, height: 900 },});const page = await ctx.newPage(); for (const [name, url] of PAGES) { await page.goto(BASE + url, { waitUntil: 'load' }); for (const theme of ['light', 'dark']) { await page.evaluate((t) => document.documentElement.setAttribute('data-theme', t), theme); await page.screenshot({ path: `shots/${name}-${theme}.png`, fullPage: true }); }}Skjermbilder pluss bevis
Bilder fanger det øyne fanger. For feil i samspillet vil du at nettleseren skal vitne. To enlinjere gjør mesteparten av jobben: elementFromPoint i midten av en kontroll forteller deg hva som virkelig ville tatt imot klikket, og getBoundingClientRect forteller deg om kontrollen faktisk får plass på den skjermstørrelsen den påstår å støtte. Nå sjekker vi begge deler for alt som har brent oss.
// Is the menu item really clickable, or is something invisible covering it?const hit = await page.evaluate(() => { const el = document.querySelector('[role="menuitem"]'); const r = el.getBoundingClientRect(); const top = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2); return el === top || el.contains(top);}); // Does the search input actually fit a 390px phone?const fits = await page.evaluate(() => { const r = document.querySelector('input[name="q"]').getBoundingClientRect(); return r.right <= window.innerWidth && r.width > 200;});Begge temaer, hver gang
Feil i mørk modus er en kategori for seg, fordi de gjemmer seg for utviklere som jobber i ett tema. Et hardkodet nesten-hvitt fyll ser tilsiktet ut på en lys side og radioaktivt ut på en mørk. Å snu temaattributtet inne i det samme sidebesøket koster én linje og dobler dekningen din. Vi behandler enhver flate som ikke er fotografert i begge temaer som utestet.
Hva den fanger
- Feil med stablingskontekst: tegnet, synlig og umulig å klikke. Bare en trefftest ser disse.
- Temalekkasjer: lyse flater som gløder på mørke sider, grafer som forsvinner, illustrasjoner med innbakt bakgrunn.
- Overflyt på mobil: faste linjer som dekker innhold, felt beskåret til strimler, overskrifter kuttet midt i setningen.
- Tekst i sammenheng: avkortingen, selvmotsigelsen, setningen ingen linter noen gang kommer til å flagge.
Ingenting av dette erstatter enhetstestene. Pakken beviser at pengeregningen stemmer, skjermbildene beviser at et menneske kan nå knappen som utløser den. Et lite team har ingen QA-avdeling, men en mappe med ferske skjermbilder gjennomgått før hver lansering er en brukbar etterligning av en. Testen er det å se.
Testene er grønne er en påstand om funksjonene dine. Skjermbildet er en påstand om produktet ditt.
