W tym poście pokrótce opiszę, w jaki sposób prosty w instalacji plugin do Cypressa pozwoli nam rozszerzyć nasze testy E2E o weryfikację wizualną aplikacji.
Plugin Cypress Image Snapshot pozwala nam dodać testy, które weryfikują wygląd całej lub fragmentu strony ze screenem bazowym zapisanym wcześniej. Dzięki temu oprócz standardowych testów związanych z logiką aplikacji jesteśmy w stanie porównać położenie i kolory wszystkich elementów na stronie.
Umiejętne spięcie tego rodzaju testów z mechanizmami CI/CD pozwoli nam natomiast na automatyczne wizualne podglądnięcie każdej zmiany, jaka została wprowadzona w kodzie – np. w formie automatycznie tworzonego Pull Requestu ze zmodyfikowanymi screenami.
Teoretycznie niewielka zmiana w komponencie, która spowodowała złe jego wyświetlenie w innym miejscu aplikacji? Szybka na pierwszy rzut oka aktualizacja biblioteki UI, która spowodowała sporo drobnych zmian i problemów UXowych? Przy tych i wielu podobnych sytuacjach pomocne będą testy screenowe.
Kolejną zaletą jest możliwość uruchomienia testów za pomocą oficjalnego obrazu dockerowego cypress/included.
Pełną instrukcję instalacji i konfiguracji znajdziecie w Readme repozytorium pluginu, natomiast warto wspomnieć, że opcja capture konfiguracji addMatchImageSnapshotCommand przyjmuje trzy wartości:
'viewport'– widoczny obszar strony w oknie przeglądarki'fullPage'– screen pełnej strony, od góry do samego dołu (drobne przekłamania możliwe dla elementów zposition: fixed;)'runner'– viewport przeglądarki wraz z Cypressowym sidebarem z logami.
Jeżeli ten artykuł pomógł ci w jakikolwiek sposób daj znać w komentarzu. A może jest zbyt ogólny i z chęcią zobaczył(a)byś tu więcej szczegółów?
