Menu Zamknij

Szybkie testy UI, czyli wprowadzenie do Cypress

Automatyzacja testów UI to temat, z którym QA musi zmierzyć się niemalże w każdym projekcie. Testy UI stanowią wierzchołek piramidy testów, dlatego ich automatyzację powinniśmy dobrze zaplanować i w scenariuszu testowym uwzględnić najbardziej kluczowe dla projektu historyjki. Jednak dobór przypadków to nie jedyny problem, który pojawia się w startującym projekcie. Przed naszym wyborem stoi także spora lista narzędzi, wśród których największą popularnością cieszy się Selenium. W ostatnich latach możemy również zaobserwować rosnącą popularność narzędzia Cypress, któremu postanowiliśmy przyjrzeć się nieco bliżej.

Cypress, czyli o co właściwie tyle szumu?

 Oto kilka zalet, które sprawiają, że Cypress ciągle zyskuje na popularności:

  • Jest szybki, bo testy odpalane są bezpośrednio w przeglądarce.
  • Jest interaktywny, bo po uruchomieniu testu polecenia są wyświetlane na panelu bocznym podczas ich wykonywania, a po zakończeniu testu można z panelu bocznego wybrać dowolne polecenie i zobaczyć jak wygląda zrzut ekranu podczas jego wykonywania, co niesamowicie ułatwia debugowanie.
  • Ma doskonałą dokumentację, o czym możecie przekonać się sami. 😉 Znajdziecie ją tutaj tutaj: Cypress documentation.
Jeśli powyższe zalety sprawiły, że zaciekawiło Cię pisanie testów w Cypress, to poniżej mam dla Ciebie jeszcze kilka faktów:
  • Jest narzędziem wykorzystywanym w głównej mierze do testów end-to-end, ale może być również używamy do testów integracyjnych oraz unit testów.
  • Jest narzędziem, które nie opiera się na Selenium. Podstawowa różnicą jest to, że Selenium działa w procesie poza przeglądarką. Natomiast Cypress jest odpalany wewnątrz tej samej pętli uruchomieniowej co testowana aplikacja, co sprawia, że działa dużo szybciej.
  • Aktualnie wspiera testy w przeglądarkach Chrome, Electron (wbudowana w Cypressa), Chrome Canary, Chromium. Od wersji 4.0 Cypress wspiera również Edge i Firefox.
  • Pozwala na setup, pisanie, odpalanie oraz debugowanie testów.
  • Posiada wbudowane automatyczne waity dzięki czemu testowanie asynchronicznego kodu jest bardzo łatwe. Nie ma potrzeby tworzenia waitów tak jak to było w Selenium.
  • Jest narzędziem prostym w użyciu, jego instalacja jest łatwa i szybka (co postaram się pokazać poniżej ;)).
  • Cypress pierwotnie powstało dla programistów Frontend, aby im ułatwić pisanie własnych testów, dlatego testy są pisane wyłącznie w JavaScripcie (nie wspiera innych języków, tj. Java, C#, Python).

Co do szczęścia nam potrzeba, czyli kilka słów o wymaganych narzędziach.

Aby rozpocząć pracę w Cypressie potrzebować będziemy następujące narzędzia:

    • node.js (link tutaj),
    • Chrome,
    • IDE, w dalszej części artykułu korzystać będziemy z  Visual Studio Code (link tutaj).

Zanim przejdziesz do kolejnego kroku upewnij się, że posiadasz je na swoim komputerze lub dokonaj instalacji.

3, 2, 1... Start! Czas na instalację Cypress!

Dla osób, które miały już do czynienia z instalacją z użyciem npm nie będzie to nic szczególnego. Jednak pokażemy jak to wykonać krok po kroku, dla tych którzy robią to po raz pierwszy.

Zaczynamy od utworzenia katalogu, w którym stworzymy projekt testowy. W tym celu:

    1. Otwieramy Visual Studio Code .
    2. Otwieramy terminal (zakładka View -> Terminal).
    3. W otwartym oknie terminalu wpisujemy komendy:
      mkdir cypress-tutorial
       cd cypress-tutorial
    4. Przechodzimy do stworzenia projektu za pomocą polecenia:
      npm init
    5. W katalogu cypress-tutorial zostanie stworzony plik package.json, który zawiera informacje na temat naszego projektu (nazwa, strona domowa, opis, autorzy).

W kolejnym kroku dokonamy instalacji oraz uruchomienia Cypress.

  1. Aby zainstalować Cypressa skorzystamy z komendy:
    npm install cypress --save-dev
    która zainstaluje najnowszą wersje narzędzia na naszej maszynie lokalnej.
  2. Cypress został zainstalowany w katalogu ./node_modules.
  3. Aby sprawdzić wersję zainstalowanej wersji Cypressa można użyć komendy:
    ./node_modules/.bin/cypress version
    Informacje na temat releasów Cypressa można znaleźć tutaj: Cypress Changelog
  4. Aby uruchomić Cypress należy użyć jedną z komend:
    ./node_modules/.bin/cypress open
    lub
    $(npm bin)/cypress open
    lub
    npx cypress open/code>
  5. Zostanie wyświetlony Cypress Test Runner (screen poniżej).

Test Runner jest narzędziem, które umożliwia podglądanie komend, które są wywoływane podczas odpalania testów oraz samej testowanej aplikacji.

Przy pierwszym wyświetlaniu Test Runner dostaniemy powiadomienie, że do naszego projektu zostały dodane przykładowe testy w katalogu …cypress\integration\examples.

Po kliknięciu w przycisk „Ok, got it!”. W Test Runnerze zostaną wyświetlony przykładowe testy. Aby je odpalić należy kliknąć na wybrany spec.js plik.

Test Runner jest intuicyjny, składa się z następujących elementów (screen poniżej):

  1. Menu testów (tam wyświetlana są informację jakie testy zostały odpalone, ile testów przeszło pomyślnie, ile testów nie przeszło, jakie komendy zawierają testy)
  2. Podglądu testowanej aplikacji (url, rozmiar okna, aplikacja)

Cypress uruchomiony? Zatem piszemy pierwszy test!

Wiesz już jak wygląda Test Runner? Zatem zobacz jak działa w praktyce! Napiszmy wspólnie powitalny test.

Zaczniemy od usunięcia przykładowych testów. W tym celu usuwamy cały katalog …cypress\integration\examples.

Nasz pierwszy test utworzymy w katalogu Integrations utworzymy plik test.spec.js

Plik utworzony. Zatem czas napisać nasz pierwszy test. Będzie on wyglądał następująco:
 
describe('My First Test', () => {

it('Does not do much!', () => {

expect(true).to.equal(true)
})

})

Cypress korzysta ze składni frameworka Mocha, który udostępnia słowa kluczowe:

  • describe() – grupuje testy
  • it() – określa test
W sekcji asercji korzystamy ze słowa expect(), który pochodzi z frameworka Chai.
 

Aby odpalić nasz test należy go zapisać i otworzyć Test Runner za pomocą komendy:

./node_modules/.bin/cypress open

Podsumowanie

W dzisiejszym artykule przygotowaliśmy środowisko oraz w celu zaprezentowania narzędzia napisaliśmy pierwszy test. Jeśli ten temat Cię zainteresował, to już dziś zapraszam Cię do kolejnych artykułów, w których napiszemy bardziej skomplikowane testy, a także pokażemy bardziej złożone zagadnienia, z którymi Cypress doskonale sobie radzi. Jeśli chcesz dowiedzieć się o nich z pierwszej ręki, to zapraszamy do dołączenia do naszego Newslettera oraz grupy Facebook.

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *