Príklad:
Predstav si e-shop, ktorý spustil novú verziu katalógu produktov. Dizajnér zmenil farby tlačidiel, upravil font nadpisov a pridal viac miesta medzi jednotlivé položky filtrov. Tester má preveriť, či sa tieto zmeny prejavili presne podľa návrhu a či sa nezmenilo nič, čo sa meniť nemalo – napríklad rozbité zarovnanie textu, posunuté obrázky alebo neviditeľné tlačidlá.
Ako otestovať:
- Príprava baseline (referenčných screenshotov)
- Pred spustením testov si ulož snímky obrazovky aktuálnej (starej) verzie.
- Použi rovnaké podmienky pre snímkovanie: rozlíšenie obrazovky, prehliadač, zoom, téma (dark/light).
- Ulož ich v štruktúre podľa stránok, aby sa dali ľahko spárovať s novými screenshotmi.
- Porovnanie screenshotov
- Urob snímky novej verzie a porovnaj ich pixel po pixeli s baseline.
- Nástroje ako Pixelmatch, Resemble.js alebo Wraith dokážu vizuálne vyznačiť odlišné miesta.
- Vyhodnoť, či ide o plánovanú zmenu alebo chybu (napr. posun textu kvôli inému fontu).
- Kontrola layoutu a responzivity
- Over umiestnenie, veľkosť a zarovnanie prvkov (menu, tlačidlá, obrázky, formuláre).
- Testuj v rôznych rozlíšeniach a zariadeniach – zmena CSS môže spôsobiť chyby len na mobile alebo tablete.
- Farebné a typografické zmeny
- Porovnaj farby s návrhom (hex/RGB hodnoty).
- Skontroluj font (typ, veľkosť, hrúbku) podľa dizajn manuálu.
- Pozor na rozdiely v renderovaní fontov medzi prehliadačmi.
- Nástroje na vizuálne regresné testovanie
- Applitools Eyes, Percy, Chromatic, BackstopJS umožňujú automatizované porovnania a integráciu do CI/CD pipeline.
- Nastav ignorovanie dynamických častí (napr. dátum, reklamy), aby testy nepadali na nepodstatných zmenách.
- Dynamický obsah a animácie
- Pri porovnávaní screenshotov animácie a časovo závislé prvky môžu spôsobiť falošné rozdiely.
- Použi „freeze“ stav alebo maskovanie týchto oblastí.
- Výstup a report
- Každú odchýlku zdokumentuj – pridaj screenshot „pred“ a „po“.
- V reporte jasne označ, či ide o očakávanú zmenu alebo chybu.
- Uveď aj podmienky testu (verzia prehliadača, rozlíšenie, dátum porovnania).
Vizuálne regresné testy sú silným nástrojom, ktorý pomáha odhaliť zmeny, ktoré by inak unikli. Najlepšie fungujú, keď sú spustené automaticky po každom nasadení a majú dobre udržiavanú baseline.