Testujte pixely: kontrola přes snímky obrazovky pro malý tým
Testy nám svítily zeleně a na rozbalovací nabídku nešlo kliknout. Jednotkové testy neuvidí chyby ve vrstvení, rozbitý tmavý motiv ani přetékání na mobilu. Tady je malá aparatura na snímky obrazovky, která se za nás dívá na každou obrazovku, a vizuální chyby, které testy nikdy nechytí.
Došli jsme k tomu poctivou cestou: až po tom, co jsme vypustili vizuální chyby, které by jediný snímek obrazovky odhalil. Panel z matného skla, který na tmavém pozadí vyšel bledě. Nabídka, která se vykreslila, ale nešlo na ni kliknout. Vyhledávací pole, které na šířce telefonu existovalo jako 65 pixelů široký proužek. Každá z nich prošla zelenou sadou testů, protože sada testovala funkce a chyby žily v pixelech.
Ta aparatura je menší, než si myslíte
Ta naše je lokální prostředí plné přesvědčivých vymyšlených dat, jedno přihlášení v headless prohlížeči, jehož relace se ukládá na disk, aby nás nic neomezovalo, a smyčka: stránky krát motivy krát šířky obrazovky. Počítač a telefon, světlý a tmavý motiv, každá obrazovka, na které záleží. Celé je to krátký skript a jeden průchod vyrobí složku obrázků za pár minut.
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 }); }}Snímky a k nim důkaz
Obrázky zachytí to, co zachytí oko. U chyb v ovládání chcete, aby svědčil prohlížeč. Většinu práce udělají dva jednořádkové příkazy: elementFromPoint uprostřed ovládacího prvku vám řekne, co by kliknutí opravdu dostalo, a getBoundingClientRect vám řekne, jestli se prvek do slibované šířky obrazovky vejde. U všeho, co nás už spálilo, teď kontrolujeme obojí.
// 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;});Oba motivy, pokaždé
Chyby v tmavém režimu jsou kategorie sama pro sebe, protože se schovávají před vývojáři, kteří pracují jen v jednom motivu. Natvrdo zapsaná téměř bílá výplň vypadá na světlé stránce záměrně a na tmavé jako radioaktivní. Přepnout atribut motivu během jedné návštěvy stránky stojí jeden řádek a zdvojnásobí vám pokrytí. Každou obrazovku, která nebyla vyfocená v obou motivech, považujeme za neotestovanou.
Co to chytí
- Chyby ve stacking kontextu: vykreslené, viditelné a neklikatelné. Ty odhalí jedině test zásahu.
- Prosakující motiv: světlé plochy zářící na tmavých stránkách, mizející grafy, ilustrace s napečeným pozadím.
- Přetékání na telefonu: fixní lišty zakrývající obsah, pole oříznutá na proužky, titulky useknuté uprostřed věty.
- Texty v kontextu: useknutí, protimluv, věta, kterou vám žádný linter nevytkne.
Nic z toho nenahrazuje jednotkové testy. Ty dokazují, že sedí počítání peněz, snímky dokazují, že se člověk dostane k tlačítku, které je spustí. Malý tým nemá oddělení kvality, ale složka čerstvých snímků prohlédnutá před každým vydáním je slušná náhražka. Test je to dívání.
Testy prošly je výrok o vašich funkcích. Snímek obrazovky je výrok o vašem produktu.
