Cypress i Cross Browser Testing teraz już dostępne

Wstęp

Otrzymałem wczoraj mail z doskonałą wiadomością. Cypres właśnie wprowadził wsparcie dla nowych przeglądarek: Firefox i Microsoft Edge. Z tego co wiem wsparcie dla Firefox było jedną z najczęściej zgłaszanych ticketów przez społeczność dlatego fajnie że twórcy dowieźli tą funkcję.

Poprzedni post znajdziesz tutaj: Cypress i poprawne użycie selektorów, atrybut data-cy

Analiza historii użytkownika oparta na AI

Odblokuj pełny potencjał swojego procesu rozwoju oprogramowania dzięki naszemu narzędziu opartemu na sztucznej inteligencji! Znajdziesz je tutaj.

Aktualizacja wersji Cypress

Przede wszystkim sprawdzam czy testy które stworzyłem do tej pory działają poprawnie. Uruchamiam Cypress’a poleceniem:

npx cypress open

Następnie uruchamiam wszystkie testy - weryfikuje output. Wszystko działa jak należy. Więc zamykam narzędzie i przechodzę do aktualizacji. Używam polecenia w terminalu:

npm update cypress

Wykonanie tego polecenia spowodowało jedynie aktualizacje do wersji: 3.8.3. Dopiero polecenie:

npm install cypress@4.0.1

Spowodowało instalacji narzędzia w wersji której oczekiwałem. Sprawdzam instalację:

npx cypress open

Wszystkie testy uruchamiają się w sposób, który oczekiwałem na Google Chrome.

W razie problemów po aktualizacji twórcy przygotowali konkretne przykłady jak sobie z nimi poradzić. Niektóre biblioteki, na których zbudowany jest Cypres zostały zaktauzlizowane, takie jak Mocha i Chai co może spodowować, że niektóre testy, które napisałeś do tej pory będą niekompatybilne:

https://docs.cypress.io/guides/references/migration-guide.html?utm_campaign=Cross%20Browser%20Support&utm_source=hs_email&utm_medium=email&utm_content=83268675&_hsenc=p2ANqtz-80_JWNpbFIL4OXM3x84hJ9YXyUaS_wp6TN571LTimGEl6OgPOrc9Bocc340mjTtyPUjZI-RpEOzxLI-lXhQcju8_hmYg&_hsmi=83268675#Mocha-upgrade

Uruchomianie testów na innych przeglądarkach

Zmiana przeglądarki z poziomu Test Runnera jest dostępna w prawym górnym rogu.

{:alt=“jak-wybrac-przegladarke-cypress”}

Jak widać Firefox i Edge nie jest dostępny z prozaicznego sposobu. Nie mam tych przeglądarek zainstalowanych na dysku. Naprawiam ten problem i uruchamiam ponownie Test Runner’a. Po instalacji przeglądarek spotkałem się z problemem. Polecenie:

npx cypress open

Nie powodowało otwarcia Test Runnera. Polecenie zawieszało się i musiałem anulować je w terminalu. Naprawiłem to w dość prosty sposób. Uruchomiłem testy w terminalu poleceniem:

npx cypress run

Następnie:

npx cypress open

Działał już poprawnie. Po wykonaniu tych operacji mam już dostępne nowe przeglądarki!

Uruchomienie testów przebiegło już bez żadnych problemów. Ich wyniki zbiegają się z tymi z Google Chrome. Oto nagrania z przebiegu testów.

Firefox:

firefox video

Edge:

Edge video

Testy można uruchomić również z poziomu terminalu:

npx cypress run --browser firefox

npx cypress run --browser edge

Podsumowanie

Aktualizacja narzędzia nie przebiegła do końca bez problemów. Udało się jednak rozwiązać je w miarę prostymi sposobami bez kontaktu z supportem. Ostatecznie testy na Firefox i Edge uruchamiają się poprawnie. Korzystanie z nowych funkcji jest fajny.

Kod na github dostępny na branchu:

https://github.com/12masta/react-redux-realworld-example-app/tree/6-cypress

Changeset:

https://github.com/12masta/react-redux-realworld-example-app/pull/7/files