Visual regression (screenshot porovnávání)

5 min čtení

Klasický HTTP monitor řekne "server odpovídá 200", ale neví že hlavní CSS soubor se nenahrál a web se zobrazuje rozbitý. Visual regression dělá screenshot a porovnává ho s baseline - detekuje vizuální změny i když server říká OK.

Jak to funguje

1. Při prvním enable visual regression se udělá baseline screenshot (reference).
2. Při každém dalším checku se udělá nový screenshot a porovná pixel-by-pixel s baseline.
3. Pokud rozdíl překročí práh (default 5%), monitor se označí jako changed a dostanete alert.
4. V detailu monitoru vidíte baseline i aktuální screenshot vedle sebe + diff overlay.

Kdy to použít

• Po deployech - automaticky detekuje rozbité fonty, CSS, layout
• Pro marketing landing pages - abyste věděli, že GA tag neztratil pozici
• Pro e-shopy - kontrola, že "Přidat do košíku" tlačítko je stále viditelné
• Pro status pages - abyste věděli, že vlastní status page se renderuje

Nastavení

1. V monitor detailu přejděte na záložku Visual regression
2. Klikněte Enable - udělá se baseline (10-30 sekund)
3. Volitelně nastavte threshold (1-20%, default 5%)
4. Po deploy si baseline aktualizujte přes Refresh baseline

Pozor na false positives

• Datum / čas na stránce - každý check je vyrenderuje jinak. Buď ignorujte, nebo nastavte CSS selector mask.
• Reklamy / banners - rotují mezi nákladky. Mask doménu reklamního providera.
• Animace - první frame vs. další. Visual regression čeká 2 s po load aby se animace ustálila.
• Cookie banner - vždy auto-accepted, ale někdy zůstane viditelný. Přidejte CSS rule přes user-config.