Testy wizualne
Poza klasycznymi testami wymienionymi w poprzedniej lekcji, w kontekście UI istnieją jeszcze dwa popularne podejścia do testowania: snapshot testing i visual regression testing.
Snapshot Testing 📸
Testowanie to polega na przechwytywaniu i porównywaniu “migawki” (snapshot
) renderowanego komponentu z wcześniej zapisaną wersją. Tymi snapshotami nie są tutaj grafiki, tylko cały kod HTML stojący za komponentem (kod HTML, który znajdzie się w przeglądarce). Jest to szybki sposób na upewnienie się, że zmiany w kodzie nie wprowadziły niezamierzonych modyfikacji w wyglądzie i strukturze komponentu. Jak wygląda flow takiego testowania?
- Tworzenie snapshotów: Podczas pierwszego uruchomienia testu tworzone są snapshoty dla każdego testowanego komponentu.
- Porównywanie snapshotów: Przy kolejnych uruchomieniach testów, nowe snapshoty są porównywane z zapisanymi wcześniej. Jeśli są różnice, test nie przechodzi.
- Aktualizowanie snapshotów: Jeśli zmiany są zamierzone, snapshoty można zaktualizować, aby odzwierciedlały nowy wygląd komponentów.
Zalety testowania migawkowego:
- Szybkie i łatwe do wdrożenia.
- Automatycznie wykrywa niezamierzone zmiany w wyglądzie komponentów.
Wady:
- Czasem może prowadzić do fałszywych alarmów, gdy nieistotne zmiany wprowadzają różnice w snapshotach.
- Nie zawsze wychwytuje subtelne wizualne regresje.
- Częste zmiany w komponentach mogą doprowadzić do tego, że developer przyzwyczajony do tego, że często aktualizuje snapshoty, “z automatu” będzie aktualizował również te snapshoty, które zawierają regresję.
Visual Regression Testing 👀
Wizualne testowanie regresyjne idzie krok dalej niż testowanie “migawkowe”. Zamiast porównywać kod renderowanego komponentu, porównuje zrzuty ekranu (screenshots
) komponentów. Dzięki temu można wykryć nawet najmniejsze wizualne różnice.
- Tworzenie zrzutów ekranu: Podczas pierwszego uruchomienia testów, dla każdego komponentu tworzony jest zrzut ekranu.
- Porównywanie zrzutów ekranu: Nowe zrzuty ekranu są porównywane z zapisanymi wcześniej wersjami. Narzędzia do wizualnego testowania regresyjnego zazwyczaj pokazują różnice, co ułatwia ich identyfikację.
- Raportowanie różnic: W przypadku wykrycia różnic, generowane są raporty z podglądem zmian, co ułatwia decyzję, czy zmiany są zamierzone, czy nie.
Zalety wizualnego testowania regresyjnego:
- Dokładniejsze niż testowanie snapshotów.
- Wykrywa subtelne wizualne zmiany, które mogą być trudne do zauważenia.
Wady:
- Zajmuje więcej czasu niż testowanie snapshotów.
- Może wymagać więcej zasobów do uruchamiania i porównywania zrzutów ekranu.
Narzędzia
Kilka popularnych narzędzi, które warto znać:
Jest
z dodatkiem react-test-renderer lub jest-image-snapshot. Sprawdź docs.Storybook
z dodatkiem StoryShots.Percy
lubChromatic
dla zaawansowanego wizualnego testowania regresyjnego. Płatne z darmowym limitem.