Vizuálna regresia (porovnávanie screenshotov)

Klasický HTTP monitor povie "server odpovedá 200 OK", ale nevie, že sa nenačítal hlavný CSS súbor a web sa zobrazuje rozbitý. Vizuálna kontrola (anglicky visual regression) urobí snímok stránky a porovná ho so základným snímkom (baseline) - zachytí vizuálne zmeny aj vtedy, keď server hovorí, že je všetko v poriadku.

Vizuálna kontrola je dostupná v pláne Profi a Business.

Ako to funguje

1. Pri prvom zapnutí vizuálnej kontroly sa urobí základný snímok (baseline) - referencia, s ktorou sa neskôr porovnáva.
2. Pri každej ďalšej kontrole urobíme nový snímok a porovnáme ho s baseline pixel po pixeli.
3. Ak rozdiel prekročí nastavený prah (predvolene 5 %), monitor sa označí ako zmenený a dostanete upozornenie.
4. V detaile monitora vidíte baseline aj aktuálny snímok vedľa seba a zvýraznené miesta, kde sa líšia.

Kedy to použiť

• Po nasadeniach novej verzie webu - automaticky zachytí rozbité fonty, CSS alebo layout
• Pre marketingové landing stránky - aby ste vedeli, že GA tag a iné prvky neopustili svoju pozíciu
• Pre e-shopy - kontrola, že tlačidlo "Pridať do košíka" je stále viditeľné
• Pre status stránky - aby ste vedeli, že vaša vlastná status stránka sa správne zobrazí

Nastavenie

1. Pri vytváraní monitora vyberte typ Vizuálna kontrola - prvý snímok sa automaticky uloží ako baseline
2. V detaile monitora v sekcii Vizuálna kontrola vidíte referenčný snímok, aktuálny snímok aj zvýraznené rozdiely
3. Limit zmeny nastavíte posuvníkom Limit vizuálnej zmeny (0,5 až 30 %, predvolene 5 %)
4. Po každom nasadení novej verzie baseline aktualizujte tlačidlom Nastaviť aktuálny ako referenciu

Pozor na falošné poplachy

• Dátum a čas na stránke - každá kontrola ich vykreslí inak. Po nasadení takejto zmeny vždy obnovte baseline.
• Reklamy a bannery - rotujú medzi snímkami a často spôsobia falošný poplach. Najlepšie funguje vizuálna kontrola na stránkach bez reklám.
• Animácie - prvý a ďalší snímok môžu byť odlišné. Vizuálna kontrola počká 1,5 sekundy po načítaní, aby sa animácia ustálila.