Cypress uruchamianie testów na Bitbuckecie

Cypress IO

Loading

Cypress uruchamianie testów na Bitbuckecie – to wpis pokazujący w jaki sposób w kilku krótkich krokach dokonać integracji i uruchamiać testy Cypressa na  Bitbuckecie. Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wprowadzenie

Tworząc testy automatyczne z wykorzystaniem Cypressa, bardzo ważnym aspektem jest aby wykorzystywać nasze testy w codziennej pracy. Jaki sens jest jednak tworzyć testy automatyczne a później uruchamiać je tylko w środowisku lokalnym? Oczywiście stworzone testy pomogą szybciej sprawdzić czy nie mamy do czynienia z regresją, natomiast winniśmy zmierzać w kierunku tworzenia testów i uruchamiania ich w naszym środowisku w sposób automatyczny. 

Tworzenie bitbucket-pipelines.yml

Chcąc uruchamiać testy z poziomu Bitbucketa nasze testy będą opierać się o stworzenie pliku bitbucket-pipelines.yml, który będzie naszym centrum dowodzenia i zarządzania. Do uruchomienia naszych testów konieczne będzie:

  • runner na Bitbuckecie, na podstawie którego testy będą uruchamiane (pytaj Devopsów o tag)
  • obraz dockerowy cypressa – dostępne na dockerhub.com
I. Prosta wersja

W naszym projekcie testowym tworzymy plik bitbucket-pipelines.yml, a następnie uzupełniamy go w najprostszy sposób:

image: cypress/browsers

pipelines:
default:
- step:
name: Before_Tests
script:
- |
npm install
export CYPRESS_CACHE_FOLDER=$HOME/.cache/Cypress
npm i --save-dev cypress-mochawesome-reporter
sed -i "s/const VERIFY_TEST_RUNNER_TIMEOUT_MS.*/const VERIFY_TEST_RUNNER_TIMEOUT_MS = 400000;/g" node_modules/cypress/lib/tasks/verify.js
npx cypress verify
npx cypress run --spec "cypress/e2e/Standard/**" --browser chrome
artifacts:
- cypress/report/**
- cypress/reports/**
- cypress/videos/**
- cypress/screenshots/**
II. Tworzenie stage

W ramach naszych testów może zachodzić konieczność tworzenia faz egzekucji testów. W takiej sytuacji tworzymy step i potem odpowiednie elementy są uruchamiane tak jak chcemy:

pipelines:
default:
- step:
name: Before_Tests
script:
- *common_script
- npx cypress run --spec "cypress/e2e/Before/**" --browser chrome


- parallel:
- step:
name: Standard_Tests
script:
- *common_script
- npx cypress run --spec "cypress/e2e/Standard/**" --browser chrome

 

III. Wybór przeglądarki

W ramach tworzenia bitbucket-pipelines.yml, możemy wybierać przeglądarkę na której będą przeprowadzane testy 

- npx cypress run --spec "cypress/e2e/Standard/**" --browser chrome

Dzięki temu odpalimy testy na przeglądarce Chrome. Wykorzystanie Firefox czy Edge będzie analogiczne – poprzez zmianę flagi. 

IV. Raporty i artefakty

Jeżeli masz zainstalowany mochawesome-reporter – możesz dodawać tworzenie raportów. Standardowo musicie dodać informację w cypress.json, zaś w ramach bitbucket-pipelines.yml,

artifacts:
- cypress/report/**
- cypress/reports/**
- cypress/videos/**
- cypress/screenshots/**
V. Refactoryzacja

Przy rozbudowanych plikach bitbucket-pipelines.yml, może zachodzić konieczność tworzenie dużych i skomplikowanych poleceń. Warto wówczas uwspólnianie rzeczy przesuwać by były re-używalne.

image: cypress/browsers

definitions:
common_script: &common_script |
npm install
export CYPRESS_CACHE_FOLDER=$HOME/.cache/Cypress
npm i --save-dev cypress-mochawesome-reporter
sed -i "s/const VERIFY_TEST_RUNNER_TIMEOUT_MS.*/const VERIFY_TEST_RUNNER_TIMEOUT_MS = 400000;/g" node_modules/cypress/lib/tasks/verify.js
npx cypress verify


pipelines:
default:
- step:
name: Before_Tests
script:
- *common_script
- npx cypress run --spec "cypress/e2e/Before/**" --browser chrome
artifacts:
- cypress/report/**
- cypress/reports/**
- cypress/videos/**
- cypress/screenshots/**

- parallel:
- step:
name: Standard_Chrome
script:
- *common_script
- npx cypress run --spec "cypress/e2e/Standard/**" --browser chrome
artifacts:
- cypress/report/**
- cypress/reports/**
- cypress/videos/**
- cypress/screenshots/**

- step:
name: Standard_Edge
script:
- *common_script
- npx cypress run --spec "cypress/e2e/Standard/**" --browser edge
artifacts:
- cypress/report/**
- cypress/reports/**
- cypress/videos/**
- cypress/screenshots/**

- step:
name: Standard_Firefox
script:
- sleep 60
- *common_script
- npx cypress run --spec "cypress/e2e/Standard/**" --browser firefox
artifacts:
- cypress/report/**
- cypress/reports/**
- cypress/videos/**
- cypress/screenshots/**
 

Schedules

Jeżeli chcemy tak przygotowane testy w ramach naszego repozytorium, możemy uruchamiać cyklicznie. Z pomocą przychodzi nam Bitbucket i zakładka CI/CD – Schedules:

Tutaj pełna dowolność, ważne jest abyście uruchamiali testy wtedy – kiedy jest wam potrzebne. 

Podsumowanie

Cypress uruchamianie testów na Bitbuckecie – to kolejny wpis mający zachęcić Was do instalacji i sprawdzenia narzędzia. Z racji popularyzacji narzędzia i dużego wsparcia które otrzymał Cypress na rozwój, będziemy poszerzać wpisy na ten temat. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.