Cypress dodatki do frameworka cz. 2

Cypress dodatki do frameworka cz. 2 – to wpis pokazujący w jaki sposób rozszerzyć możliwości Cypressa. Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wprowadzenie

Tworząc testy automatyczne z wykorzystaniem Cypressa może spotkać się z sytuacjami, że będziemy potrzebowali dodatkowego wsparcia by napisać nasze testy. Czasami będzie to spowodowane faktem niemożności obsłużenia w inny sposób danego przypadku, czasami też po prostu skorzystanie z pluginów będzie dla nas łatwiejsze.

Jako Ambasador Cypressa mam na celu rozpowszechnianie wiedzy o tym narzędziu, promowanie wartości jakie nam przyświecają.

Instalacja

Elementy będziemy instalować poprzez npma, także zgodnie z dobrymi praktykami czytelnik winien mieć stworzony projekt za pośrednictwem npma (lub yarn).

cypress-cucumber-preprocessor

Jak nazwa wskazuje, dla fanów cucumbera – opcja do wykorzsytania z Cypressem.

npm install --save-dev cypress-cucumber-preprocessor

W pliku plugin dodajemy

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

Cypress-allure-plugin

Kolejny po mochawesome reporterze plugin pozwalający na raportowanie w Cypressie.

yarn add -D @shelex/cypress-allure-plugin
npm i -D @shelex/cypress-allure-plugin

W pliku support dodajemy (do v. 9.7.0):

const allureWriter = require('@shelex/cypress-allure-plugin/writer');
// import allureWriter from "@shelex/cypress-allure-plugin/writer";

module.exports = (on, config) => {
    allureWriter(on, config);
    return config;
};

Lub w wersji 10+

const allureWriter = require('@shelex/cypress-allure-plugin/writer');
// import allureWriter from "@shelex/cypress-allure-plugin/writer";

module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            allureWriter(on, config);
            return config;
        }
    }
});

Cypress-delete-downloads-folder

Narzędzie dzięki któremu możemy usuwać foldery – przydatne gdy testujemy pobieranie elementów – by nie zaśmiecać określonego miejsca.

npm i -D cypress-delete-downloads-folder

Wystarczy dodać require w postaci:

require('cypress-delete-downloads-folder').addCustomCommand();

Cypress-slack-reporter

Przedmiotowy dodatek to pomoc dla teamów korzystających ze Slacka chcących otrzymywać powiadomienia o procesie testów automatycznych.

npm install cypress-slack-reporter --save-dev
yarn add cypress-slack-reporter --dev

Wymagane stworzenie webhooków, co opisane jest na stronie npmjs.

Cypress ESLint Plugin

Ten dodatek służy dla osóch chcących dokonywać statycznej analizy kodu.

npm install eslint-plugin-cypress --save-dev
yarn add eslint-plugin-cypress --dev

Następnie dodaj plik .eslintrc.json

{
  "plugins": [
  "cypress"
 ]
}

Trzeba też dodać reguły

{
  "rules": {
    "cypress/no-assigning-return-values": "error",
    "cypress/no-unnecessary-waiting": "error",
    "cypress/assertion-before-screenshot": "warn",
    "cypress/no-force": "warn",
    "cypress/no-async-tests": "error",
    "cypress/no-pause": "error"
  }
}

Cypress-web-vitals

Dodawanie plików w naszych testach? Z Cypress file upload to nic trudnego.

$ yarn add -D cypress-web-vitals cypress-real-events
$ npm install --save-dev cypress-web-vitals cypress-real-events

Następnie w pliku commands.js.

import "cypress-web-vitals";

Cypress-gmail-tester

Chcesz korzystać z gmaila przy testach z CY – sprawdź ten dodatek.

npm install --save cypress-gmail-tester

Cypress-plugin-playwright

UWAGA – to tylko POC rozwiązania. W jakimś zakresie pozwala na uruchomienie testów Playwright w środowisku CY. Pamiętajcie o ograniczeniach – raczej to przetestowania. npm i cypress-plugin-playwright

npm install --save-dev cypress-cucumber-preprocessor

Dodatkowo w Cypress config js

// cypress.config.js


import {defineConfig} from 'cypress';
import playwrightPlugin from "cypress-plugin-playwright/playwrightPlugin.js";

export default defineConfig({
    // ...
    e2e: {
        setupNodeEvents(on, config) {
            // ...
            playwrightPlugin(on, config);
            // ...
        },
        // ...
    },
    // ...
});

Cypress-filters

Bardzo przydatny dodatek, jeżeli chcemy w inny sposób zarządzać i uruchamiać nasze testy automatyczne.

npm i cypress-filters --save-dev

Następnie w pliku e2e.js.

const CypressFilters = require('cypress-filters');
new CypressFilters().register();

Następnie dodanie tagu do testów

it('My super cool test @smoke @usability', () => {
    // ...
    // ... 
})

I uruchamianie testów

# run with 1 tag
cypress run --env filters="@smoke"

# run with 2 tags (OR condition)
cypress run --env filters="@smoke @usability"

# run with 2 tags (AND condition)
cypress run --env filters="@smoke+@usability"

# run with 3 tags (AND + OR condition)
cypress run --env filters="@smoke+@usability @regression"

# run with 4 tags (2x AND condition)
cypress run --env filters="@smoke+@usability @regression+@functional"

Cypress-testrail

Integracja z jednym z najpopularniejszych narzędzi

npm i cypress-testrail --save-dev

Cały opis znajduje się na stronie npmjs.com lub na oficjalnym githubie.

Podsumowanie

Cypress dodatki do frameworka cz. 2 – 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.