Cypress IO – wprowadzenie do javascriptowego frameworka do przeprowadzania testów end-to-end. Poznaj to narzędzie do testów. Zgodnie z informacjami zawartymi na stronie wydawcy, tworzenie, konfigurowanie, debugowanie i uruchamianie testów jest proste.
Instalacja
Są dwie metody instalacji Cypressa. Wybór metody należy oczywiście do użytkownika. Pierwsza poprzez użycie npma, drugi zaś poprzez pobranie i rozpakowanie pliku zip.
nmp
Przejdź do swojego projektu i zainstaluj cypressa poprzez polecenie:
npm install cypress --save-dev
Po instalacji w folderze projektu pojawi się katalog o nazwie node_modules oraz plik package-lock.json.
Uruchomienie Cypressa jest niezwykle proste, gdyż wystarczy wpisać komendę: node_modules\\.bin\cypress open.
Jeżeli chcesz, poniżej oficjalny tutorial ze strony cypress.io
plik zip
Możesz pobrać plik spakowany w formacie zipa np. tutaj pobierz i wypakować w dowolnym miejscu by przetestować – zapoznać się z narzędziem.
Struktura
Wewnątrz widzimy 4 katalogi zawierające pliki które w swoim zamyśle są ułożone by łatwiej było się poruszać po tworzonym projekcie:
- Plugin files – umożliwiają korzystanie, modyfikowanie, rozszerzanie funkcji. Domyślnie Cypress korzysta z pluginów zawartych w katalogu plugins w pliku index.js. Jeżeli jesteś zainteresowany cypress oferuje na swojej stronie dużo pluginów które są tworzone przez społeczność cypressa.
- Fixtures – w tym katalogu znajdują się pliki które zawierają statyczne dane, które mogą być użyte podczas testów. Jeżeli chcemy z nich skorzystać, odwołujemy się do nich poprzez polecenie cy.fixture().
- Test files – pliki testów są domyślnie umiejscowione w folderze integration. Cypress generuje folder examples z przykładami użycia, które można odpalić w runnerze i zobaczyć jak to wygląda na przeglądarce (o tym później).
- Support files – tutaj można wrzucać funkcje, niestandardowe polecenia itp które mają być dostępne dla wszystkich plików testowych.
Test Runner
Miejsce do uruchamiania testów, jest tutaj wykaz wszystkich plików z danego miejsca w katalogu. Możemy oczywiście wskazać żądane miejsce docelowe, by zmniejszyć ilość testów, lub też użyć zakładki Search by wyszukać konkretny scenariusz.
Wspierane przeglądarki to Canary, Chrome, Chromium, Electron. Jak widać brak jest pozostałej grupy przeglądarek Firefox, Safari, Edge czy IE 11.
Runner posiada trzy zakładki:
– Tests – lista testów do wykonania, użytkownik może sobie konfigurować które testy mają zostać przeprowadzone.
– Runs – sekcja która jest używana po podpięciu Cypress Dashboard. W tej sekcji będą widoczne testy które zostały nagrane.
– Settings – w tej zakładce jest konfiguracja używana podczas testów, którą możemy oczywiście modyfikować za pomocą pliku cypress.json.
Jeżeli chcesz, poniżej oficjalne video ze strony cypress.io
Nowe przeglądarki Cypress IO
Cypress na początku swojego istnienia nie miał zbyt wielu przeglądarek, co stanowiło spory minus. Obecnie sytuacja uległa zmianie na lepsze i Cypress poszerzył swoje grono przeglądarek znacznie. Na chwilę tworzenia niniejszego posta, Cypress pozwala nam na uruchamianie testów na wielu przeglądarkach:
- Canary
- Chrome
- Edge
- Edge Beta
- Chromium
- Edge Canary
- Edge Dev
- Firefox (Beta support)
- Firefox Developer Edition (Beta support)
- Electron
- Firefox Nightly (Beta support)
Takie okoliczności na pewno skuszą użytkowników do weryfikacji Cypressa pod kątem testowania swoich aplikacji webowych.
W kolejnych wpisach pojawią się:
- przykładowe testy;
- napotkane w praktyce problemy;
- szerszy tutorial i odnośniki do cypress.io;
Podsumowanie
Cypress IO – wprowadzenie to tylko pierwszy wpis mający zachęcić Was do instalacji i sprawdzenia narzędzia. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.
