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 z position: 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?

Leave a Reply

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *