Skip to main content

Wizualne testy regresji z przechwytywaniem zrzutów ekranu

Zespoły deweloperskie używają Webshot do wychwytywania błędów, które umykają testom jednostkowym — rozjechanych layoutów, zastępczych czcionek, brakujących ikon, popsutych stanów responsywnych. Przechwyć staging, przechwyć produkcję, porównaj tę parę. Wklej różnicę w komentarzu PR jako dowód, że twoja zmiana jest bezpieczna (albo jako dowód, że właśnie pojawił się nowy błąd).

🖥️ Desktop cała strona (PNG, ostre różnice) 📱 Mobile cała strona ⚙️ Skorzystaj zamiast tego z darmowego API

Wszystkie przyciski otwierają wstępnie skonfigurowany formularz przechwytywania. Format i widok możesz zmienić, gdy strona się załaduje.

Dlaczego Webshot do tego

Zrzuty z dokładnością do piksela

Tryb PNG zachowuje ostry tekst i krawędzie — idealny do narzędzi porównujących piksele (`pixelmatch`, ImageMagick `compare`), gdzie szumy kompresji JPG generowałyby fałszywe trafienia.

Za każdym razem ten sam widok

Webshot przechwytuje przy dokładnie tym samym widoku, pozycji przewijania i czasie oczekiwania na wczytanie czcionek podczas każdego uruchomienia — wyniki porównań są wiarygodne.

Przyjazny dla API

Podłącz darmowe API Webshot do swojego CI: przechwyć stan przed wdrożeniem i po wdrożeniu, porównaj z `pixelmatch`, przerwij build, jeśli liczba zmienionych pikseli przekroczy próg.

Bez boilerplate'u dla headless Chrome

Pomiń konfigurację Puppeteera, instalację czcionek i flagi sandboxa. Webshot ma to wszystko uruchomione na naszej infrastrukturze. Twój CI wykonuje tylko wywołanie HTTP.

Jak przeprowadzić testy regresji wizualnej

  1. Wybierz stronę (lub strony), które chcesz monitorować — stronę główną, kluczowe landing page'e, ścieżkę zakupową, wszędzie tam, gdzie regresja byłaby bolesna.
  2. Przechwyć każdą z nich jako PNG + desktop_full + mobile_full, aby uchwycić bieżący wygląd produkcji jako punkt odniesienia.
  3. Po następnym wdrożeniu przechwyć te same adresy URL ponownie. Porównaj stary ze nowym za pomocą `pixelmatch` lub ImageMagick — wszystko powyżej 1% zmienionych pikseli zasługuje na weryfikację przez człowieka.
  4. Wpnij to w CI: hook przed wdrożeniem przechwytuje staging, hook po wdrożeniu przechwytuje produkcję, a build kończy się niepowodzeniem, gdy różnica przekroczy twój próg.

Najczęściej zadawane pytania

Headless Chrome w CI oznacza instalację Chromium, czcionek i flag jądra dla sandboxa, a do tego utrzymywanie tego wszystkiego w aktualności. Z Webshot całkowicie pomijasz instalację — twój CI wykonuje wywołanie HTTP do naszego API i otrzymuje z powrotem plik PNG. My zajmujemy się aktualizacjami Chrome, buforowaniem czcionek i ochroną przed SSRF.

Tak, o ile używasz PNG + tego samego widoku + tej samej strategii oczekiwania. Webshot ustala stały rozmiar okna i czeka na fonts.ready + brak aktywności sieci + wszystkie animacje zadeklarowane przez zapytanie `prefers-reduced-motion`. Losowe animacje (pętle Lottie, tła oparte na Date.now()) będą dawać inny wynik porównania przy każdym uruchomieniu; zamroź je w swoim środowisku testowym.

Nie w jednym wywołaniu — każdy adres URL przechwytujesz osobno, a następnie porównujesz je oddzielną biblioteką. Świadomie utrzymujemy API skupione na przechwytywaniu; samo porównanie to skrypt na 30 linii. Przykładowy kod znajdziesz w `/developers`.

Tak. Webshot czeka na brak aktywności sieci (brak żądań przez 500 ms) oraz fonts.ready przed przechwyceniem, dzięki czemu aplikacje React, Vue, Svelte i Next.js renderują się w pełni przed wykonaniem zrzutu. W przypadku stron, które nigdy nie osiągają braku aktywności sieci (long polling, websockety), możesz przekazać parametr `maxWait` przez API.

Darmowy formularz publiczny to 5 na 15 minut na IP — zbyt mało dla CI. Darmowy poziom API jest bardziej hojny; zobacz `/developers`. Dla intensywnych testów regresji (ponad 50 zrzutów na build) komercyjny plan API znosi limity per-IP.

Sam Webshot tylko przechwytuje — warstwę porównywania dostarczasz ty. Rozwiązanie w dwóch liniach: `npx pixelmatch baseline.png new.png diff.png`. Albo skorzystaj z zarządzanej usługi visual-diff (Percy, Chromatic, BackstopJS) i podaj do niej pliki PNG z Webshot.

Gotowy na przechwytywanie?

Za darmo, bez rejestracji, bez znaku wodnego. Po prostu wklej adres URL.

📸 Otwórz formularz przechwytywania

Inne zastosowania: Zrzuty Google Maps · Zrzuty WordPress · QA landing page'y · Zrzuty jako dowód prawny · Zrzuty z mediów społecznościowych · Zrzuty w pracy dewelopera · Zobacz wszystkie →

Share: 𝕏 Twitter Facebook LinkedIn