Visual regression (porównywanie zrzutów ekranu)

5 min czytania

Klasyczny monitor HTTP powie "serwer odpowiada 200", ale nie wie, że główny plik CSS się nie załadował i strona wyświetla się rozbita. Visual regression robi zrzut ekranu i porównuje go z baseline - wykrywa zmiany wizualne, nawet jeśli serwer mówi OK.

Jak to działa

1. Przy pierwszym enable visual regression robiony jest baseline screenshot (referencja).
2. Przy każdym kolejnym checku robiony jest nowy zrzut i porównywany pixel-by-pixel z baseline.
3. Jeśli różnica przekroczy próg (domyślnie 5%), monitor zostaje oznaczony jako changed i otrzymasz alert.
4. W szczegółach monitora widzisz baseline i aktualny screenshot obok siebie + diff overlay.

Kiedy to użyć

• Po deployach - automatycznie wykrywa rozbite fonty, CSS, layout
• Dla landing pages marketingowych - abyś wiedział, że tag GA nie zgubił pozycji
• Dla e-shopów - kontrola, że przycisk "Dodaj do koszyka" jest wciąż widoczny
• Dla status pages - abyś wiedział, że własna status page się renderuje

Ustawienie

1. W szczegółach monitora przejdź do zakładki Visual regression
2. Kliknij Enable - utworzy się baseline (10-30 sekund)
3. Opcjonalnie ustaw threshold (1-20%, domyślnie 5%)
4. Po deployu zaktualizuj sobie baseline przez Refresh baseline

Uwaga na false positives

• Data / czas na stronie - każdy check zrenderuje je inaczej. Albo zignoruj, albo ustaw CSS selector mask.
• Reklamy / banery - rotują między ładowaniami. Mask domenę providera reklam.
• Animacje - pierwszy frame vs. kolejny. Visual regression czeka 2 s po load, aby animacja się ustabilizowała.
• Cookie banner - zawsze auto-accepted, ale czasem pozostaje widoczny. Dodaj CSS rule przez user-config.