Visual Regression Testing with cypress.io

[przemuh]

Jak to jest, że pomimo wysokiego pokrycia testami jednostkowymi, w każdy piątek przed deployem trzęsiesz się ze strachu? Czy jesteś pewien, że Twój test, sprawdzający czy komponent dostał jakąś klasę CSS, sprawdza to co powinien? A jeśli ktoś w innym miejscu napisał bardziej specyficzny selektor, który podpada pod Twój element? 💩

Z pomocą przychodzą Visual Regression Testing (wizualne testy regresyjne). Tylko, że z nimi też nie ma tak hop siup. Dwie różne wersje Chrome'a mogą dać zupełnie inne obrazki pod względem rozłożenia pixeli. I chociaż dla naszego oka oba obrazki wyglądają identycznie to narzędzie do porównywania krzyczy na alarm!

W prezentacji chciałbym pokazać jak wykorzystać narzędzie cypress.io do pisania wizualnych testów regresyjnych.

Dwa podejścia:

• lokalne - poprzez wygenerowanie i porównanie obrazków (snapshot testing)
• cloud - z wykorzystaniem percy.io

Blaski i cienie obu rozwiązań + mały research odnośnie alternatyw.

Co myślicie? Nada się?

[tniezurawski]

Chętnie bym posłuchał.

Osobiście chciałbym zrozumieć jak dużo problemów stwarza update'owanie obrazków referencyjnych albo czegokolwiek na czym opiera się Percy. Innymi słowy, jak uciążliwe jest dodawanie zmian lub "akceptowanie tego że coś się zmienia". Wydaje się, że wizualne testy regresyjne są bardziej przeznaczone dla dużych projektów, które wchodzą w fazę stabilizacji niż dla szybko rosnących i zmieniających się aplikacji.

Ciekawe też jak dużo czasu zajmują na CI.

[erykpiast]

@przemuh czy początek marca to dla Ciebie dobry termin na prezentację?

[przemuh]

@erykpiast Jak najbardziej ;) Początek marca jest ok :)

[erykpiast]

Znamy termin najbliższego meet.js- 12 marca. Jest okej? :)

[przemuh]

@erykpiast jest git :)