Witajcie, moi drodzy w kolejnym wpisie!
Dzisiaj wpis o Cypress.io czyli frameworku typu node.js.
Jako, że to już, któryś z kolei, w przyszłości zapewne powstanie jakiś wpis podsumowujący, na razie skupiamy się na podstawach i prostych przykładach.
Strona domowa projektu znajduje się tutaj – > https://www.cypress.io/
Do instalacji Cypressa potrzebujemy zainstalowanego noda.
Jeśli go nie macie – > https://gregkaqa.pl/index.php/2020/01/13/automatyzacjapuppeteer01-zapoznanie-sie-z-narzedziem-puppeteer-pobieranie-konfiguracja-prosty-test/
A więc, jeśli macie node.js instalacja Cypressa jest banalna.
Instalacja Cypress.io
npm install cypress
W zależności od łącza i dysku trochę sobie poczekamy.
Zainstalował nam się Cypress, zatem za chwilę przystąpimy do próby pierwszego ‘ślepego’ użycia tego narzędzia.
Tak Cypress na swojej stronie chwali się, faktem, że wszystko co potrzebne jest opakowane w ten jeden framework 🙂
Na górze strony widać, także chwalenie się wsparciem dla Firefoxa od Microsoft Edge.
Znów to nie linux i musimy użyć basha.
W bashu wklejamy następującą komendę: ./node_modules/.bin/cypress open
Wstępnie uruchomimy jakiś test. Klikając na nazwę.js i zezwolimy zaporze na nieblokowanie naszego uruchomienia.
Uruchamiamy przykładowe testy
A testy nam lecą fajnie co? 🙂
Okej mamy przykład tego jak Cypress działa.
Jednak wróćmy się na chwilę do uruchomionego z basha narzędzia, by trocha nad nim podumać. 😀
Sekcja podzielona jest na trzy zakładki : testy z wylistowaniem naszych plików .js z testami.
Runs czyli miejsce, gdzie po zalogowaniu się na konto Cypressa, możemy mieć taki ala. dashboard z screenami, błędami i nagraniami video.
Oka zrobimy to teraz, klikamy na ste up project to record, następnie, w oknie, które wyskoczyło klikamy ‘Log in to dashboard’.
Zalogowalem się kontem od google. 🙂
Do tego wyskakuje nam konfiguracja pierwszego naszego projektu.
Dobra mamy konfiguracje ostatnia sekcja setting to ustawienia.
Gdy mamy podpięty jakiś projekt dodają się tam pozycje Project ID oraz Record key.
Dodatkowo interesującą rzeczą jest wybór przeglądarki, po screenach z pierwszego uruchomienia, mogliście zobaczyć, że domyślną przeglądarką jest, jakżeby inaczej Google Chrome, tutaj w tym miejscu możemy sobie to zmienić. Uruchamiamy Firefoxa, aktualnie jest to oznaczone jako beta.
Ale na pewno lepsza beta niż aktualizacje Windowsa 10, fest stabilne. 😀
Pokazanie testów na Firefoxie
Jak widać na gifie, Firefox śmiga jak szalony. 😀
Jako, że Visual Studio Code fajny nawet, to możemy sobie doinstalować fajne pluginy ja wpisałem Cypress i 4 pierwsze zainstalowałem.
O instalacji Visual Studio Code.
Dobra ogarniemy sobie jeszcze to aby w tym pierwszym projekcie ogarnąć coś aby w zakładce runs cokolwiek nam się pojawiło.
Potrzebujemy basha i komedy: $(npm bin)/cypress open cypress run - -record --key tutajklucz
To co tu napisali u mnie nie działa bo pewnie Windows. 😀
No i widzicie u mnie już 10 z 20 sampli czyli połowa się wykonuje.
Dodatkowa informacja jest taka, że testy uruchamiane w ten sposób są w elektronie.
Jak klikniemy w ten wpis runa to odpali nam się dashboard w przeglądarce.
Są tam screenshoty, video per krok, kolorki itp. wszystko sobie możecie i najlepiej sami sprawdzić.
Macie Visual Studio Code, w następnym wpisie nie będziemy bazować już na gotowcach a zrobimy coś samego.
https://docs.cypress.io/guides/overview/why-cypress.html
Tu sobie poczytajcie jak chcecie, a jak nie to nie.
Do następnego wpis cześć.
p.s. schudnij na lato