Testa pixlarna: skärmbildstestning för ett litet team
Vår testsvit var grön och menyn gick inte att klicka på. Enhetstester kan inte se stacking-buggar, trasigt mörkt tema eller överflöd på mobilen. Här är den lilla skärmbildsriggen som nu tittar på varje yta åt oss, och de visuella buggar den fångar som tester aldrig kommer att göra.
Vi tog till det här på det ärliga sättet: efter att ha släppt visuella regressioner som en enda skärmbild hade fångat. En frostad panel som blev blek mot mörka bakgrunder. En meny som renderades men inte gick att klicka på. Ett sökfält som på mobilbredd existerade som en 65 pixlar smal strimma. Varenda en seglade igenom en grön testsvit, för sviten testade funktioner och buggarna bodde i pixlarna.
Riggen är mindre än du tror
Vår är en lokal miljö full av trovärdig påhittad data, en headless-inloggning vars session sparas på disk så att ingenting bromsas, och en slinga: sidor gånger teman gånger skärmstorlekar. Dator och mobil, ljust och mörkt, varje yta som betyder något. Alltihop är ett kort skript, och en full genomgång ger en mapp med bilder på några minuter.
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 }); }}Skärmbilder plus bevis
Bilder fångar det ögat fångar. För interaktionsbuggar vill du att webbläsaren vittnar. Två enradare gör det mesta av jobbet: elementFromPoint mitt på en kontroll talar om vad som verkligen skulle ta emot klicket, och getBoundingClientRect talar om huruvida kontrollen faktiskt får plats i den skärmstorlek den påstår sig stödja. Nu kontrollerar vi båda för allt som har bränt 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;});Båda temana, varje gång
Buggar i mörkt läge är en egen kategori, för de gömmer sig för utvecklare som jobbar i ett enda tema. En hårdkodad nästan vit yta ser genomtänkt ut på en ljus sida och radioaktiv på en mörk. Att växla temaattributet inom samma sidbesök kostar en rad och fördubblar din täckning. Vi behandlar varje yta som inte har fotograferats i båda temana som otestad.
Vad den fångar
- Stacking-buggar: renderade, synliga och omöjliga att klicka på. Bara ett träfftest ser dem.
- Temaläckor: ljusa ytor som lyser på mörka sidor, diagram som försvinner, illustrationer med inbakad bakgrund.
- Överflöd på mobilen: fasta rader som täcker innehåll, fält som klipps till strimmor, rubriker som huggs av mitt i meningen.
- Texten i sitt sammanhang: avhuggningen, motsägelsen, meningen som ingen linter någonsin flaggar.
Inget av det här ersätter enhetssviten. Sviten bevisar att pengarna räknas rätt, skärmbilderna bevisar att en människa kan nå knappen som sätter igång det. Ett litet team har ingen QA-avdelning, men en mapp med färska skärmbilder som granskas före varje release är en hyfsad efterlikning. Testet är att titta.
Testerna är gröna säger något om dina funktioner. Skärmbilden säger något om din produkt.
