Visual regression (screenshot összehasonlítás)

5 perc olvasás

A klasszikus HTTP monitor azt mondja "a szerver 200-ast válaszol", de nem tudja, hogy a fő CSS fájl nem töltődött be és a web összetörve jelenik meg. A visual regression screenshotot készít és összehasonlítja egy baseline-nal - észleli a vizuális változásokat akkor is, ha a szerver OK-t mond.

Hogyan működik

1. A visual regression első bekapcsolásakor baseline screenshot (referencia) készül.
2. Minden további ellenőrzésnél új screenshot készül és pixel-by-pixel összehasonlítódik a baseline-nal.
3. Ha a különbség túllép egy küszöbértéket (alapértelmezett 5%), a monitor changed-ként jelölődik és riasztást kap.
4. A monitor részleteinél a baseline-t és az aktuális screenshotot egymás mellett látja + diff overlay.

Mikor használja

• Deploy-ok után - automatikusan észleli az összetört fontokat, CSS-t, layoutot
• Marketing landing page-ekhez - hogy tudja, a GA tag nem vesztette el a pozícióját
• Webshopokhoz - ellenőrzés, hogy a "Kosárba" gomb még látható-e
• Status oldalakhoz - hogy tudja, a saját status oldal renderelődik

Beállítás

1. A monitor részleteinél menjen a Visual regression fülre
2. Kattintson az Enable gombra - elkészül a baseline (10-30 másodperc)
3. Opcionálisan állítsa be a threshold-ot (1-20%, alapértelmezett 5%)
4. Deploy után frissítse a baseline-t a Refresh baseline gombbal

Figyelem a false positive-okra

• Dátum / idő az oldalon - minden ellenőrzés másképp rendereli őket. Vagy hagyja figyelmen kívül, vagy állítson be CSS selector maskot.
• Reklámok / banners - rotálódnak a hirdetések között. Maskolja a hirdetési provider domainjét.
• Animációk - első frame vs. következő. A visual regression 2 másodpercet vár load után, hogy az animáció megnyugodjon.
• Cookie banner - mindig auto-accepted, de néha látható marad. Adjon hozzá CSS szabályt user-configon keresztül.