{"id":10709,"date":"2021-07-12T13:14:20","date_gmt":"2021-07-12T11:14:20","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=10709"},"modified":"2023-03-29T12:11:59","modified_gmt":"2023-03-29T10:11:59","slug":"cypress-dlaczego-warto-zainteresowac-sie-tym-frameworkiem","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/cypress-dlaczego-warto-zainteresowac-sie-tym-frameworkiem\/","title":{"rendered":"Cypress \u2013 dlaczego warto zainteresowa\u0107 si\u0119 tym frameworkiem?"},"content":{"rendered":"\n

Cypress jest narz\u0119dziem wykorzystywanym do automatyzacji test\u00f3w<\/strong>. Pozwala automatyzowa\u0107 testy interfejsu u\u017cytkownika, umo\u017cliwia automatyzowanie test\u00f3w integracyjnych, a tak\u017ce \u0142\u0105czy oba podej\u015bcia np. tworz\u0105c dane testowe poprzez API i sprawdzaj\u0105c, czy poprawne dane wy\u015bwietlaj\u0105 si\u0119 u\u017cytkownikowi na interfejsie graficznym.<\/p>\n\n\n\n

Od jakiego\u015b czasu coraz cz\u0119\u015bciej mo\u017cna spotka\u0107 Cypressa w\u015br\u00f3d narz\u0119dzi wymaganych przez pracodawc\u00f3w w og\u0142oszeniach o prac\u0119. Wynika to z faktu, \u017ce wi\u0119cej zespo\u0142\u00f3w i firm nie tylko przygl\u0105da si\u0119 temu narz\u0119dziu, ale tak\u017ce korzysta z niego na co dzie\u0144, dzi\u0119ki czemu jego popularno\u015b\u0107 ro\u015bnie bardzo szybko.<\/p>\n\n\n\n

W dzisiejszym wpisie poka\u017c\u0119 Ci, dlaczego warto nim si\u0119 zainteresowa\u0107<\/strong>. Opowiem o jego zaletach i wadach<\/strong>, a tak\u017ce przedstawi\u0119, jak wygl\u0105da przyk\u0142adowy test<\/strong>. Po przeczytaniu poni\u017cszego artyku\u0142u b\u0119dziesz mia\u0142 wi\u0119ksze rozeznanie, czy to narz\u0119dzie mo\u017ce si\u0119 u Ciebie sprawdzi\u0107 i mam nadziej\u0119, zach\u0119ci Ci\u0119 do jego wypr\u00f3bowania.<\/p>\n\n\n\n

Jak dzia\u0142a Cypress?<\/strong><\/h2>\n\n\n\n
\"Jak<\/a>
Ryc. 1 Jak dzia\u0142a Cypress?<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

Tw\u00f3rcy narz\u0119dzia wyszli z za\u0142o\u017cenia, \u017ce Cypress ma by\u0107 frameworkiem zawieraj\u0105cym wszystkie komponenty potrzebne do sprawnego pisania test\u00f3w automatycznych. Zamiast instalacji kilku r\u00f3\u017cnych bibliotek, tak ja w przypadku Selenium<\/a>, Cypress oferuje rozwi\u0105zanie, kt\u00f3re od zainstalowania jest w pe\u0142ni funkcjonalne i nie wymaga dodatkowych komponent\u00f3w.<\/p>\n\n\n\n

Oczywi\u015bcie istnieje mo\u017cliwo\u015b\u0107 rozszerzania Cypressa np. poprzez u\u017cycie r\u00f3\u017cnego rodzaju plugin\u00f3w, kt\u00f3re pozwalaj\u0105 na realizacj\u0119 dodatkowych zada\u0144 m.in. dokonywanie podczas test\u00f3w wizualnej regresji.<\/p>\n\n\n\n

Rosn\u0105ca popularno\u015b\u0107 i rozw\u00f3j narz\u0119dzia<\/strong><\/h2>\n\n\n\n

Wa\u017cnym czynnikiem przy doborze nowego narz\u0119dzia do projektu jest sprawdzenie, czy istniej\u0105 organizacje, kt\u00f3re obecnie korzystaj\u0105 z tego narz\u0119dzia komercyjnie. Jest to kluczowy aspekt zw\u0142aszcza w kwestii nowych narz\u0119dzi, dlatego wymaga weryfikacji. Im wi\u0119cej podmiot\u00f3w korzysta z danego narz\u0119dzia, tym jego rozw\u00f3j okazuje si\u0119 bardziej stabilny.<\/p>\n\n\n\n

Lista firm, kt\u00f3re korzystaj\u0105 z Cypressa w spos\u00f3b komercyjny, stale powi\u0119ksza si\u0119<\/strong>. Na poni\u017cszej grafice znajduje si\u0119 kilka z nich. <\/p>\n\n\n\n

\"Kto<\/a>
Ryc. 2 Kto korzysta z Cypressa?<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

Informacje pochodz\u0105ce z GitHuba pozwalaj\u0105 dostrzec, \u017ce wok\u00f3\u0142 Cypressa gromadzi si\u0119 bardzo liczna i aktywna spo\u0142eczno\u015b\u0107.<\/strong><\/p>\n\n\n\n

\"Rosn\u0105ca<\/a>
Ryc. 3 Rosn\u0105ca spo\u0142eczno\u015b\u0107 Cypressa<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

Kolejnym wa\u017cnym aspektem, kt\u00f3ry decyduje, czy dane narz\u0119dzie warto bra\u0107 pod uwag\u0119, jest jego rozw\u00f3j komercyjny<\/strong>. Pod koniec 2020 roku Cypress otrzyma\u0142 finansowanie w wysoko\u015bci 40 milion\u00f3w dolar\u00f3w. Wybieraj\u0105c narz\u0119dzie, zw\u0142aszcza typu open source, warto zwr\u00f3ci\u0107 uwag\u0119 na to, czy narz\u0119dzie jest dost\u0119pne w poszerzonej (p\u0142atnej) wersji oraz czy posiada finansowanie. Dlaczego to jest tak wa\u017cne? Rozw\u00f3j narz\u0119dzi jest bardzo kosztowny, a brak finansowania z funduszy b\u0105d\u017a od klient\u00f3w uniemo\u017cliwi jego rozw\u00f3j i utrzymanie. Oczywi\u015bcie nasze prognozy nie musz\u0105 si\u0119 zawsze sprawdzi\u0107. Warto jednak zdawa\u0107 sobie spraw\u0119 z potencjalnego zagro\u017cenia.<\/p>\n\n\n\n

Jakie przegl\u0105darki s\u0105 wspierane?<\/strong><\/h2>\n\n\n\n

Od pocz\u0105tku dzia\u0142ania, Cypress oferowa\u0142 wsparcie tylko i wy\u0142\u0105cznie dla Chrome’a. Z czasem jednak, zacz\u0105\u0142 wspiera\u0107 r\u00f3wnie\u017c inne popularne przegl\u0105darki, w tym Firefoxa, co jest najwa\u017cniejsz\u0105 zmian\u0105. Dzi\u0119ki temu, \u017ce Cypress pokrywa Firefoxa, Chrome’a oraz Edge’a mo\u017cemy automatyzowa\u0107 testy dla oko\u0142o 84% u\u017cytkownik\u00f3w w Polsce<\/strong>. Odsetek pokrycia rynku mo\u017ce si\u0119 r\u00f3\u017cni\u0107 pomi\u0119dzy krajami, jednak warto\u015bci oscyluj\u0105 w okolicy 85% i obejmuje r\u00f3wnie\u017c Electrona, Brave\u2019a.<\/p>\n\n\n\n

Zalety Cypressa<\/strong><\/h2>\n\n\n\n

Jasna dokumentacja i aktywna spo\u0142eczno\u015b\u0107<\/strong><\/h3>\n\n\n\n

Wa\u017cnym czynnikiem, na kt\u00f3ry warto zwr\u00f3ci\u0107 uwag\u0119 jest to, \u017ce Cypress ma bardzo jasno opisan\u0105 dokumentacj\u0119 u\u017cycia tego narz\u0119dzia. Du\u017ca liczba przyk\u0142ad\u00f3w, kt\u00f3re pokrywaj\u0105 realne, komercyjne sytuacje, pomagaj\u0105 szybciej wdro\u017cy\u0107 si\u0119 i zrozumie\u0107, jak korzysta\u0107 z narz\u0119dzia. Dodatkowo spo\u0142eczno\u015b\u0107 Cypressa jest aktywna, czego efektem jest m.in. stworzenie do\u015b\u0107 zaawansowanego projektu do nauki automatyzacji, kt\u00f3ry znajduje si\u0119 na Githubie<\/a>.<\/p>\n\n\n\n

Przyja\u017aniejsza obs\u0142uga Wait\u00f3w<\/strong><\/h3>\n\n\n\n

Cypress posiada mechanizm, obs\u0142uguj\u0105cy dynamiczne czekanie (waity) na elementy, akcje znajduj\u0105ce si\u0119 na stronie, kt\u00f3r\u0105 testujemy. W wi\u0119kszo\u015bci sytuacji jest to mechanizm, kt\u00f3ry z sukcesem spe\u0142nia swoj\u0105 rol\u0119. Dost\u0119pne s\u0105 r\u00f3wnie\u017c metody, kt\u00f3re pozwalaj\u0105 nam wskaza\u0107 okre\u015blone warunki, gdy z jakiego\u015b powodu potrzebujemy poczeka\u0107 na element lub akcj\u0119.<\/p>\n\n\n\n

Istnieje mo\u017cliwo\u015b\u0107 ustawienia globalnego maksymalnego czasu oczekiwania na okre\u015blone elementy, domy\u015blnie s\u0105 to 4 sekundy. Nie b\u0119dzie to czekanie \u201ena sztywno\u201d, ale czekanie dynamiczne, w zale\u017cno\u015bci od tego, jak strona b\u0119dzie si\u0119 \u0142adowa\u0107. Poza domy\u015blnym waitem mamy mo\u017cliwo\u015b\u0107 na poczekanie np. na to jak okre\u015blone zapytanie si\u0119 zako\u0144czy.<\/p>\n\n\n\n

Obs\u0142uga zapyta\u0144 HTTP<\/strong><\/h3>\n\n\n\n

Cypress pozwala na obs\u0142ug\u0119 zapyta\u0144 HTTP podczas naszej pracy. Funkcjonalno\u015bci pozwalaj\u0105 na modyfikacj\u0119 zapytania, pobieranie danych, dodawanie mock\u00f3w i stub\u00f3w, a nawet na op\u00f3\u017anianie okre\u015blonych odpowiedzi. Jest to bardzo przydatne, gdy\u017c podczas wykonywania test\u00f3w, mo\u017cemy korzysta\u0107 z API, strony czy np. generowa\u0107 potrzebne dane testowe z API, a nie przy pomocy UI.<\/p>\n\n\n\n

Raporty z test\u00f3w \u2013 zrzuty ekranu \/ Video \/ Logi<\/strong><\/h3>\n\n\n\n

Cypress dostarcza kilku mechanizm\u00f3w, pozwalaj\u0105cych na wyb\u00f3r sposobu logowania akcji, podczas uruchamiania naszych test\u00f3w. Mamy mo\u017cliwo\u015b\u0107 dodawania zrzut\u00f3w ekran\u00f3w z test\u00f3w. Co wi\u0119cej, w uruchamianym te\u015bcie zrzut ekranu zawiera informacje na temat wykonanych akcji do momentu jego utworzenia.<\/p>\n\n\n\n

\"Raporty<\/a>
Ryc. 4 Raporty z test\u00f3w Cypress<\/figcaption><\/figure><\/div>\n\n\n\n

Poza zrzutem ekranu, kt\u00f3ry zawiera wi\u0119cej informacji ni\u017c standardowy zrzut ekranu np. z Selenium, istnieje mo\u017cliwo\u015b\u0107 nagrywania wideo z test\u00f3w. Cypress oferuje sw\u00f3j Cypress Dashboard, w kt\u00f3rym logi i rezultaty z test\u00f3w mog\u0105 by\u0107 prezentowane. Jest to funkcjonalno\u015b\u0107 dost\u0119pna w komercyjnej cz\u0119\u015bci Cypressa<\/strong>. Przy darmowym koncie dost\u0119p do dashboardu jest w wersji okrojonej (obowi\u0105zuj\u0105 limity na u\u017cytkowanie narz\u0119dzia).<\/p>\n\n\n\n

Wady Cypressa<\/strong><\/h2>\n\n\n\n

Utrudnienia z Iframe’ami<\/strong><\/h3>\n\n\n\n

Praca z iframe\u2019ami rzeczywi\u015bcie jest utrudniona. Cypress ma znacznie wi\u0119cej problem\u00f3w ni\u017c Selenium. Mamy mo\u017cliwo\u015b\u0107 skorzystania z dodatkowych bibliotek, kt\u00f3re pomagaj\u0105 w pracy z iframe\u2019mi np. „cypress-iframe”, jednak nie zawsze te rozwi\u0105zania dzia\u0142aj\u0105 prawid\u0142owo.<\/p>\n\n\n\n

Sam automatyzowa\u0142em jeden z element\u00f3w w WordPressie poprzez Cypressa i Selenium. W Cypressie by\u0142o to znacznie bardziej skomplikowane, jednak potrafi\u0142em znale\u017a\u0107 rozwi\u0105zanie. Sam problem z iframemami poruszony jest w tym w\u0105tku na githubie.<\/a><\/p>\n\n\n\n

Zach\u0119cam do \u015bledzenia tego forum, je\u017celi sami automatyzujecie aplikacj\u0119, kt\u00f3ra korzysta z iframe’a. Problem nie jest oficjalnie rozwi\u0105zany, a w tym w\u0105tku wiele os\u00f3b dzieli si\u0119 swoimi sposobami na poradzenie sobie z t\u0105 kontrolk\u0105.<\/p>\n\n\n\n

Wsparcie tylko dla JS\/TS<\/strong><\/h3>\n\n\n\n

Nie dla ka\u017cdego jest to wada. Ja umieszczam to jako wad\u0119 dlatego, \u017ce Selenium WebDriver wspiera praktycznie wszystkie j\u0119zyki programowania. Inn\u0105 rzecz\u0105 wart\u0105 wspomnienia jest to, \u017ce cz\u0119sto JS jest trudniejszym j\u0119zykiem programowania dla os\u00f3b pocz\u0105tkuj\u0105cych. Z innej strony to, \u017ce JS\/TS jest u\u017cywany mo\u017ce r\u00f3wnie\u017c by\u0107 odebrane jako zaleta, a to dlatego, \u017ce wi\u0119kszo\u015b\u0107 full stack developer\u00f3w korzysta z tych j\u0119zyk\u00f3w programowania na co dzie\u0144 i skorzystanie z ich pomocy b\u0119dzie jak najbardziej mo\u017cliwe. Innym trendem jest to, \u017ce to w\u0142a\u015bnie programi\u015bci pisz\u0105 testy w Cypressie z powodu znajomo\u015bci w\u0142a\u015bnie JS lub TS. Reasumuj\u0105c, dla jednych mo\u017ce by\u0107 to wada, a dla jeszcze innych zaleta.<\/p>\n\n\n\n

Instalacja Cypressa<\/strong><\/h2>\n\n\n\n

Do instalacji Cypressa potrzebujemy npm lub yarna i node js. Podczas tworzenia tego artyku\u0142u mia\u0142em nast\u0119puj\u0105c\u0105 wersj\u0119:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Zawsze zach\u0119cam w miar\u0119 mo\u017cliwo\u015bci do korzystania z najnowszej, aktualnie dost\u0119pnej wersji.<\/p>\n\n\n

\"\"<\/p>\n

npm install cypress --save-dev<\/pre>\n
Po zainstalowaniu Cypressa przechodzimy do folderu \u201eintegration\\examples\u201d, kt\u00f3ry zawiera kilkana\u015bcie przyk\u0142ad\u00f3w, prezentuj\u0105cych mo\u017cliwo\u015bci korzystania z Cypressa.<\/p>\n\n\n
\"Mo\u017cliwo\u015bci<\/a>
Ryc. 6 Mo\u017cliwo\u015bci korzystania z Cypressa<\/figcaption><\/figure><\/div>\n\n\n\n
W tym miejscu znajduj\u0105 si\u0119 przyk\u0142ady, kt\u00f3re pokrywaj\u0105 wi\u0119kszo\u015b\u0107 standardowych, codziennych akcji, kt\u00f3re potrzebujemy obs\u0142u\u017cy\u0107 podczas automatyzacji test\u00f3w.<\/p>\n\n\n\n
Uruchamianie Cypressa<\/strong><\/h2>\n\n\n\n
\u017beby uruchomi\u0107 Cypressa, korzystamy z nast\u0119puj\u0105cej komendy: .\/node_modules\/.bin\/cypress open<\/p>\n\n\n\n
Po tym kroku, uka\u017ce si\u0119 nam okno pozwalaj\u0105ce r\u00f3wnie\u017c na r\u0119czne uruchamianie test\u00f3w. Naturalnie, istnieje r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 uruchomienia test\u00f3w wprost z konsoli np. w Jenkinsie, czy podczas codziennej pracy, gdy nie chcemy korzysta\u0107 z okienkowego sposobu uruchamiania test\u00f3w.<\/p>\n\n\n\n
\"Uruchamianie<\/a>
Ryc. 7 Uruchamianie Cypressa<\/figcaption><\/figure><\/div>\n\n\n\n
\"Cypress<\/a>
Ryc. 8 Cypress first demo<\/figcaption><\/figure><\/div>\n\n\n\n
Pierwszy test<\/strong><\/h2>\n\n\n\n
Zaczn\u0119 od om\u00f3wienia dosy\u0107 prostego przyk\u0142adu, kt\u00f3ry znajduje si\u0119 w pliku actions.spec.js. Zawiera on test, kt\u00f3ry wype\u0142nia formularz i go wysy\u0142a. Na ko\u0144cu test sprawdza, czy komunikat, kt\u00f3rego si\u0119 spodziewali\u015bmy, pojawi\u0142 si\u0119.<\/p>\n\n\n\n
\"fragment<\/a><\/figure><\/div>\n\n\n\n
Na potrzeby artyku\u0142u, usun\u0105\u0142em pozosta\u0142e przyk\u0142ady z tego pliku, \u017ceby m\u00f3c na jednym zrzucie ekranu, zaprezentowa\u0107 ca\u0142y dzia\u0142aj\u0105cy test.<\/p>\n\n\n\n