Visual regression (screenshot porovnávanie)

5 min čítania

Klasický HTTP monitor povie "server odpovedá 200", ale nevie že hlavný CSS súbor sa neload-ol a web sa zobrazuje rozbitý. Visual regression robí screenshot a porovnáva ho s baseline-om - detekuje vizuálne zmeny aj keď server hovorí OK.

Ako to funguje

1. Pri prvom enable-e visual regression sa urobí baseline screenshot (referencia).
2. Pri každom ďalšom checku sa urobí nový screenshot a porovná pixel-by-pixel s baseline.
3. Ak rozdiel prekročí prah (default 5%), monitor sa označí ako changed a dostanete alert.
4. V detaile monitora vidíte baseline aj aktuálny screenshot vedľa seba + diff overlay.

Kedy to použiť

• Po deploy-och - automaticky detekuje rozbité fonty, CSS, layout
• Pre marketing landing pages - aby ste vedeli, že GA tag nestratil pozíciu
• Pre e-shopy - kontrola, že "Pridať do košíka" tlačidlo je stále viditeľné
• Pre status pages - aby ste vedeli, že vlastná status page sa renderuje

Nastavenie

1. V monitor detaile prejdite na záložku Visual regression
2. Kliknite Enable - urobí sa baseline (10-30 sekúnd)
3. Voliteľne nastavte threshold (1-20%, default 5%)
4. Po deploy-i si baseline aktualizujte cez Refresh baseline

Pozor na false positives

• Dátum / čas na stránke - každý check ich vyrenderuje inak. Buď ignorujte, alebo nastavte CSS selector mask.
• Reklamy / banners - rotujú medzi nákladkami. Mask doménu reklamného providera.
• Animácie - prvý frame vs. ďalší. Visual regression čaká 2 s po load aby sa animácia ustálila.
• Cookie banner - vždy auto-accepted, ale niekedy zostane viditeľný. Pridajte CSS rule cez user-config.