Visual regression (porównanie screenshotów)

Klasyczny monitor HTTP powie "serwer odpowiada 200 OK", ale nie wie, że nie wczytał się główny plik CSS i strona wyświetla się rozbita. Kontrola wizualna (po angielsku visual regression) wykonuje zrzut strony i porównuje go ze zrzutem bazowym (baseline) - wychwyci zmiany wizualne nawet wtedy, gdy serwer twierdzi, że wszystko jest w porządku.

Kontrola wizualna jest dostępna w planach Profi i Business.

Jak to działa

1. Przy pierwszym włączeniu kontroli wizualnej wykonywany jest zrzut bazowy (baseline) - punkt odniesienia, z którym później następuje porównanie.
2. Przy każdym kolejnym sprawdzeniu wykonujemy nowy zrzut i porównujemy go z baseline piksel po pikselu.
3. Jeśli różnica przekroczy ustawiony próg (domyślnie 5 %), monitor zostaje oznaczony jako zmieniony i otrzymujesz powiadomienie.
4. W szczegółach monitora widzisz baseline i aktualny zrzut obok siebie oraz podświetlone miejsca, w których się różnią.

Kiedy tego użyć

• Po wdrożeniu nowej wersji strony - automatycznie wychwyci rozbite czcionki, CSS lub układ
• Dla marketingowych stron landingowych - aby wiedzieć, że tag GA i inne elementy nie zmieniły swojej pozycji
• Dla sklepów internetowych - sprawdzenie, czy przycisk "Dodaj do koszyka" jest nadal widoczny
• Dla stron statusu - aby wiedzieć, że Twoja własna strona statusu wyświetla się poprawnie

Konfiguracja

1. Podczas tworzenia monitora wybierz typ Kontrola wizualna - pierwszy zrzut zostaje automatycznie zapisany jako baseline
2. W szczegółach monitora w sekcji Kontrola wizualna widzisz zrzut referencyjny, aktualny zrzut oraz podświetlone różnice
3. Limit zmiany ustawiasz suwakiem Limit zmiany wizualnej (od 0,5 do 30 %, domyślnie 5 %)
4. Po każdym wdrożeniu nowej wersji zaktualizuj baseline przyciskiem Ustaw aktualny jako referencję

Uważaj na fałszywe alarmy

• Data i godzina na stronie - każde sprawdzenie renderuje je inaczej. Po wdrożeniu takiej zmiany zawsze odśwież baseline.
• Reklamy i banery - rotują między zrzutami i często powodują fałszywy alarm. Kontrola wizualna działa najlepiej na stronach bez reklam.
• Animacje - pierwszy i kolejny zrzut mogą się różnić. Kontrola wizualna czeka 1,5 sekundy po załadowaniu, aby animacja się ustabilizowała.