Skip to main content

Testování vizuální regrese se snímky obrazovky

Vývojářské týmy používají Webshot k odhalení chyb, které jednotkové testy neodhalí — rozbité rozložení, náhradní písma, chybějící ikony, nefunkční responzivní stavy. Nasnímejte staging, nasnímejte produkci, porovnejte je. Výsledek porovnání vložte do komentáře k PR jako důkaz, že vaše změna je bezpečná (nebo že se právě objevila nová chyba).

🖥️ Celá stránka na desktopu (PNG, ostré rozdíly) 📱 Celá stránka na mobilu ⚙️ Použít bezplatné API

Všechna tlačítka otevřou formulář pro snímání s přednastavenou konfigurací. Formát a viewport můžete změnit po načtení stránky.

Proč pro tento účel použít Webshot

Snímky s přesností na pixel

Režim PNG zachovává ostrý text a hrany — ideální pro nástroje na porovnávání pixelů (`pixelmatch`, ImageMagick `compare`), kde by šum z JPG komprese vytvářel falešně pozitivní výsledky.

Pokaždé stejný viewport

Webshot snímá pokaždé s naprosto stejným viewportem, pozicí posunutí a dobou čekání na načtení písem — výsledky porovnání jsou spolehlivé.

Připraveno pro API

Napojte bezplatné Webshot API na své CI: snímejte před nasazením a po nasazení, porovnejte pomocí `pixelmatch` a nechte build selhat, pokud počet změněných pixelů překročí prahovou hodnotu.

Žádný boilerplate pro headless Chrome

Přeskočte nastavování Puppeteeru, instalaci písem a sandbox příznaky. To vše běží na naší infrastruktuře. Vaše CI provede pouze jedno HTTP volání.

Jak provádět vizuální regresní testování

  1. Vyberte stránky, které chcete sledovat — domovskou stránku, klíčové landing pages, proces objednávky, zkrátka jakékoli místo, kde by regrese mohla uškodit.
  2. Každou z nich nasnímejte ve formátu PNG + desktop_full + mobile_full, abyste vytvořili základní (baseline) verzi vaší současné produkce.
  3. Po dalším nasazení nasnímejte stejné URL znovu. Porovnejte starou a novou verzi pomocí `pixelmatch` nebo ImageMagick — jakákoli změna > 1 % pixelů si zaslouží lidskou kontrolu.
  4. Zapojte to do CI: hook před nasazením nasnímá staging, hook po nasazení produkci a build selže, pokud rozdíl překročí vaši prahovou hodnotu.

Často kladené otázky

Headless Chrome v CI znamená instalaci Chromia, písem, kernelových příznaků pro sandbox a navíc udržování všeho v aktuálním stavu. S Webshotem se instalaci zcela vyhnete — vaše CI provede HTTP volání na naše API a dostane zpět PNG. My se staráme o aktualizace Chromu, cachování písem a ochranu proti SSRF.

Ano, pokud použijete PNG + stejný viewport + stejnou strategii čekání. Webshot uzamkne velikost viewportu a před pořízením snímku čeká na `fonts.ready` + `network-idle` + dokončení animací deklarovaných přes dotaz `prefers-reduced-motion`. Náhodné animace (smyčky Lottie, pozadí s `Date.now()`) se budou při každém spuštění lišit; ty ve svém testovacím prostředí zmrazte.

Ne v jednom volání — každou URL musíte nasnímat zvlášť a poté je porovnat pomocí samostatné knihovny. Naše API se soustředí na snímání; porovnávání je skript o 30 řádcích. Příklad kódu najdete na `/developers`.

Ano. Webshot před pořízením snímku čeká na stav `network-idle` (žádné síťové požadavky po dobu 500 ms) a `fonts.ready`, takže aplikace v Reactu, Vue, Svelte a Next.js se před snímkováním plně vykreslí. Pro weby, které nikdy nedosáhnou stavu `network-idle` (long polling, websockets), můžete přes API předat parametr `maxWait`.

Veřejný formulář zdarma má limit 5 snímků za 15 minut na IP adresu — to je pro CI příliš málo. Bezplatná úroveň API je štědřejší; viz `/developers`. Pro velkoobjemové regresní testování (50+ snímků na build) komerční plán API odstraňuje limity na IP adresu.

Samotný Webshot pouze pořizuje snímky — porovnávací vrstvu si zajišťujete sami. Dvouřádkové řešení: `npx pixelmatch baseline.png new.png diff.png`. Nebo můžete použít spravovanou službu pro vizuální porovnávání (Percy, Chromatic, BackstopJS) a dodávat jim PNG soubory z Webshotu.

Jste připraveni snímat?

Zdarma, bez registrace, bez vodoznaku. Stačí vložit URL.

📸 Otevřít formulář pro snímání

Další případy užití: Snímky obrazovky z Google Maps · Snímky obrazovky z WordPressu · QA landing pages · Snímky obrazovky jako právní důkaz · Snímky obrazovky ze sociálních sítí · Snímky obrazovky pro vývojářský workflow · Zobrazit vše →

Share: 𝕏 Twitter Facebook LinkedIn