Visual regression (porovnávání screenshotů)

Klasický HTTP monitor řekne "server odpovídá 200 OK", ale neví, že se nenačetl hlavní CSS soubor a web se zobrazuje rozbitý. Vizuální kontrola (anglicky visual regression) udělá snímek stránky a porovná ho se základním snímkem (baseline) - zachytí vizuální změny i tehdy, když server tvrdí, že je vše v pořádku.

Vizuální kontrola je dostupná v tarifu Pro a Business.

Jak to funguje

1. Při prvním zapnutí vizuální kontroly se udělá základní snímek (baseline) - reference, se kterou se později porovnává.
2. Při každé další kontrole uděláme nový snímek a porovnáme ho s baseline pixel po pixelu.
3. Pokud rozdíl překročí nastavený práh (výchozí 5 %), monitor se označí jako změněný a dostanete upozornění.
4. V detailu monitoru vidíte baseline i aktuální snímek vedle sebe a zvýrazněná místa, kde se liší.

Kdy to použít

• Po nasazení nové verze webu - automaticky zachytí rozbité fonty, CSS nebo layout
• Pro marketingové landing stránky - abyste věděli, že GA tag a další prvky neopustily svou pozici
• Pro e-shopy - kontrola, že tlačítko "Přidat do košíku" je stále viditelné
• Pro status stránky - abyste věděli, že se vaše vlastní status stránka správně zobrazí

Nastavení

1. Při vytváření monitoru vyberte typ Vizuální kontrola - první snímek se automaticky uloží jako baseline
2. V detailu monitoru v sekci Vizuální kontrola vidíte referenční snímek, aktuální snímek i zvýrazněné rozdíly
3. Limit změny nastavíte posuvníkem Limit vizuální změny (0,5 až 30 %, výchozí 5 %)
4. Po každém nasazení nové verze baseline aktualizujte tlačítkem Nastavit aktuální jako referenci

Pozor na falešné poplachy

• Datum a čas na stránce - každá kontrola je vykreslí jinak. Po nasazení takové změny vždy obnovte baseline.
• Reklamy a bannery - rotují mezi snímky a často způsobí falešný poplach. Nejlépe funguje vizuální kontrola na stránkách bez reklam.
• Animace - první a další snímek mohou být odlišné. Vizuální kontrola počká 1,5 sekundy po načtení, aby se animace ustálila.