Docker w naszym projekcie, czyli tworzymy odizolowane środowisko dla testów w Cypress

Czy zdarzyło się Wam, że podczas lokalnego wykonywania testów zostały one zakłócone? Czy wiecie jak utworzyć odizolowane środowisko dla testów w Cypress? W tym artykule postaramy się odpowiedzieć na powyższe pytania i połączyć dwa słowa Cypress i Docker. A dokładniej będziemy odpalać testy napisane przy użyciu Cypressa wewnątrz kontenera dockerowego.
Zapraszam do lektury. 🙂

Kilka słów wstępu przed rozpoczęciem konfiguracji

Zanim rozpoczniemy zabawę z konfiguracją naszego środowiska przydałoby się krótkie wprowadzenie do Dockera. Aby jednak zbytnio nie odbiegać od głównego tematu artykułu zakładam, że jesteście zaznajomiony z koncepcją konteneryzacji i samego Dockera. Jeśli nie, to polecam obejrzeć tutorial Getting started with docker, the step by step tutorial [ with examples ], gdzie autor w jasny i rzetelny sposób przedstawia Dockera na przykładach. Jeśli jednak pomimo obejrzenia filmu nadal będziecie mieć problem ze zrozumieniem głównej idei konteneryzacji, to dajcie znać w komentarzach, a stworzę z tej tematyki oddzielny wpis.

W tym artykule pokażę krok po kroku, jak wewnątrz kontenera odpalić testy napisane w Cypress. Od wersji 4.0 Cypress, poza przeglądarką Chrome, wspiera również przeglądarki Microsoft Edge oraz Mozilla Firefox.

W dalszej części artykułu postaramy się odpalić nasze testy wewnątrz kontenera na Firefoxie (Cypress changelog). Twórcy Cypress na platformie Docker Hub zamieścili obrazy, które dla nas będą stanowić podstawę do uruchomienia kontenerów, wewnątrz których będziemy odpalać testy.

My skorzystamy z obrazu, który zawiera zainstalowaną przeglądarkę Chorme oraz Firefox: cypress/browsers:node12.13.0-chrome80-ff74.

Aby nie odbiegać od głównego tematu artykułu i nie skupiać się na tworzeniu nowych testów wykorzystamy te, które napisaliśmy w ramach poprzednich wpisów (Szybkie testy UI, czyli wprowadzenie do Cypress). Dla przypomnienia testy, które chcemy odpalić możecie znaleźć w naszym GitHub w katalogu Integration.

Krok pierwszy: tworzymy i konfigurujemy Dockerfile

tutaj

FROM cypress/browsers:node12.13.0-chrome80-ff74 

COPY package.json /e2e/package.json 
COPY cypress.json /e2e/cypress.json 

RUN cd /e2e &amp;&amp; npm install 

WORKDIR /e2e 

ENTRYPOINT ["npm", "run"]

Utwórzmy plik Dockerfile oraz przeanalizujmy jego zawartość krok po kroku.

W IDE (w naszym przypadku Visual Studio Code) tworzymy plik Dockerfile w głównym katalogu projektu.
Wskazujemy bazowy image, z którego będziemy korzystać. My skorzystamy z image dostępnego na platformie Docker Hub, który posiada zainstalowaną przeglądarkę Chrome oraz Firefox. W tym celu w utworzonym pliku wprowadzamy:
FROM cypress/browsers:node12.13.0-chrome80-ff74
Aby skopiować do naszego kontenera pliki package.json oraz cypress.json wprowadzamy polecenia:
COPY package.json /e2e/package.jsonCOPY cypress.json /e2e/cypress.json
Aby zainstalować wszystkie potrzebne zależności wymagane do uruchomienia naszego projktu w Cypress używamy polecenia:
RUN cd /e2e && npm install
Katalog e2e określamy jako katalog roboczy. W tym celu dodajemy:
WORKDIR /e2e
Aby w łatwy sposób używać skyptów zdefiniowanych w package.json ustawiamy entrypoint na npm run. W tym celu dodajemy:

ENTRYPOINT ["npm", "run"]

Wizualny obraz wykonanych kroków wiodczny jest na screen’e poniżej.

Krok drugi: budujemy obraz dockerowy

Masz już gotowy plik Dockerfile? To świetnie! 🙂 Na jego podstawie możemy zbudować obraz dockerowy.

W tym celu w terminalu naszego IDE wykonujemy poniższą komendę:

docker build -t zwqa/cypress-tutorial:1.0 .

Po odpaleniu tej komendy w terminalu zobaczymy następujący komunikat:

Skoro sukces pierwszy sukces już za nami, to możemy iść dalej. 😉
Zanim jednak przejdziemy do kolejnego kroku chciałabym Wam jeszcze pokazać jak w prosty sposób wyświetlić listę obrazów uruchomionych dla danego hosta. W tym celu możemy użyć komendy docker images.

Na naszej liście powinien pojawić się obraz, który właśnie zbudowaliśmy oraz obraz, który jest obrazem bazowym, czyli cypress/browsers

Krok trzeci: uruchamiamy kontener

Obraz utworzony? Zatem przydałoby się uruchomić kontener zawierający nasze testy. Gotowi? 🙂

Do uruchomienia kontenera, na podstawie stworzonego wcześniej obrazu, użyjemy komendy:

docker run -it -v ${PWD}\cypress:/e2e/cypress zwqa/cypress-tutorial:1.0 cypress:run:firefox

Po jej wykonaniu nasz kontener powinien zostać uruchomiony oraz wewnątrz tego kontenera powinna zostać uruchomiona komendacypress run --browser firefox, która spowoduje odpalenie naszych testów na przeglądarce Firefox.

Podsumowanie z testów będzie wyglądać następująco:

To zielony teścik już za nami. Przydałoby się teraz coś zepsuć prawda? 🙂

Proponuję, aby w naszym teście dodać asercję, która zwróci błąd. Dodajmy przykładowo asercję expect(true).to.equal(false) (screen poniżej).

Następnie ponownie uruchamiamy kontener za pomocą komendy
docker run -it -v ${PWD}\cypress:/e2e/cypress zwqa/cypress-tutorial:1.0 cypress:run:firefox

Wynik testów jaki otrzymamy będzie następujący:

CIEKAWOSTKA W przypadku, gdy jakiś test nie przejdzie Cypress posiada wbudowaną funkcjonalność robienia screenshotów. W naszym ostatnim przykładzie mamy właśnie taką sytuację. Bez względu na to czy testy zostaną Nasze testy odpalone wewnątrz kontenera, czy też lokalnie to screenshoty z testów, które nie przeszły znajdziemy w katalogu cypress/screenshots. Podobnie jest w przypadku plików video, które są automatycznie zapisywane w katalogu cypress/video.

Podsumowanie

W tym artykule udało nam się utworzyć nasze pierwsze odizolowane środowisko dla testów w Cypress.

Całe zagadnienie podzieliliśmy na następujące kroki:

Mam nadzieję, że informację zawarte w tym artykule były dla Was przydatne. Zapraszam Was również do śledzenia informacji o kolejnych artykułach. Jeśli chcecie dowiedzieć się o nich z pierwszej ręki zapraszamy do dołączenia do naszego Newslettera oraz grupy Facebook.