Cypress konfiguracja cypress.json

Cypress konfiguracja cypress.json – to krótki wpis pokazujący Wam możliwości przeniesienia pewnych elementów do tego pliku w celu tworzenia globalnych zmian.

Wstęp

Każdy korzystający z Cypressa chce by jego kod był czysty i aby nie trzeba było dodawać podobnych komend. Warto zajrzeć do pliku cypress.json gdzie konfigurujemy nasz projekt testowy by później wykorzystywać te informacje globalnie. Rozważając dwie rzeczy – czy wyrzucić wpis do kosza, czy jednak pozostawić go – nawet jako wskazówkę, uznałem, że warto podzielić się tym co zostało sporządzone wcześniej.

Aktualizacja

Wpis dotyczy projektów w wersji do 9.7.0. W zakresie wersji 10+ zostanie wydany odrębny wpis w tym zakresie. Wiele ze wskazanych elementów będzie można w łatwy i szybki sposób przetransferować do cypress.config.js w Cypressie 10+. Z racji sytuacji, że są jeszcze pewne rzecz które nie są stabilne w wersjach 10+ po początkowym uznaniu, że post nie będzie publikowany, uznałem, że jednak na obecnym etapie warto podzielić się tymi informacjami.

Konfiguracja

Przejdźmy do meritum czyli do konfiguracji tego pliku. Dzięki kilku ustawieniom możemy w łatwy i szybki sposób globalnie korzystać z naszych ustawień i nie martwić się by ustalać coś – per klasa testowa.

I. Adres url

Dzięki wpisaniu w tym miejscu adresu naszej strony, na każdej kolejnej klasie testowej będziemy ją wywoływać poprzez cy.visit(’/’)

{
  "baseUrl" : "https://www.dlatesterow.pl"
}

II. Rozmiar ekranu

Jeżeli chcemy testować na jednym określonym rozmiarze ekranu, możemy wpisać jego rozmiary we wskazanym pliku:

  "viewportWidth": 1920,
  "viewportHeight": 1080,

III. Timeouty

Warto też mieć zapisane różnego rodzaju timeouty, które mogą nam się przydać w trakcie testowania aplikacji. Takie podejście pozwoli nam na unikanie wdrażania wielu sleepów.

IV. Powtarzanie

W ramach testów, możemy mieć konieczność powtórzenia testu – np. aplikacja jest jeszcze niestabilna i wolniej się ładuje, tudzież z innych przyczyn potrzeba jest powtórzyć jakiś przypadek mimo faila. Podajecie tylko komendę i za każdym razem test Wam wykonuje ponownie Wasz przypadek.

"retries": 4,

V. experimentalSessionAndOrigin

  "experimentalSessionAndOrigin": true,

Polecenie to zastąpiło od wersji 9.6.0 polecenie experimentalSessionSupport. Pozwala to np. na wykorzystanie zapisywania sesji logowania by co test się nie logować a wykorzystywać już to że użytkownik jest zalogowany – co skraca proces wykonania testów.

VI. Zapisywanie video

Podczas wykonywania testów – gdy uruchamiasz testy w trybie headlees – możemy zapisywać video gdzie będziemy mieli faila. To pomoże w późniejszym debugu i weryfikacji gdzie i jakie problemy napotkał test.

  "video": true,
  "videosFolder": "cypress/videos",
  "videoUploadOnPasses": false,

VII. Raporty

Gdy zainstalujemy Mochawesome-Reporter i chcemy by nasze raporty tworzyły się po testach, ważne jest by umieścić taki wpis w pliku cypress.json.

VIII. Chrome Web Security

"chromeWebSecurity": false/true

Polecenie potrzebne gdy potrzebujemy skorzystać np. z wykorzystywania iframe na stronach i konieczności dostania się tam i wykonania testów.

IX. Nie śledź zmian po zapisie

"watchForFileChanges" : false,

Standardowo przy zapisie klasy testowej którą mamy uruchomioną – test ze zmianami uruchamia się automatycznie. Wpisując taką zmianę, zatrzymujemy taką możliwość.

X. Zapisywanie ScreenShotów

Podczas wykonywania testów – gdy uruchamiasz testy w trybie headlees – możemy zapisywać zdjęcia gdzie będziemy mieli faila. To pomoże w późniejszym debugu i weryfikacji gdzie i jakie problemy napotkał test.

  "screenshotsFolder": "cypress/videos",
  "screenshotOnRunFailure": true,

XI. ShadowDom

Jeżeli mamy styczność z ShadowDom – warto jest dodać wartość do naszego pliku cypress.json.

 "includeShadowDom": true

XII. Usuwanie plików przed testem

Jeżeli mamy konieczność czyszczenia folderów ze zdjęciami, video czy pobranymi plikami wpisz.

 "trashAssetsBeforeRuns": true,

"ignoreTestFiles":"/Test.js",

"redirectionLimit": 20,

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
defaultCommandTimeout: 25000,
execTimeout: 60000,
requestTimeout: 6000,
defalutTimeout: 8000,
pageLoadTimeout: 45000,
viewportWidth: 1920,
viewportHeight: 1080,
retries: 3,

video: true,
videoUploadOnPasses: false,
reporter: "cypress-mochawesome-reporter",

reporterOptions: {
reportDir: "cypress/report/",
charts: true,
reportPageTitle: "dlaTesterow.PL E2E Test",
},

e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
baseUrl: 'https://www.dlatesterow.pl'
},

});

Podsumowanie

Cypress konfiguracja cypress.json 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.

+4