Cypress dodatki do frameworka

Cypress IO

 1,129 

Cypress dodatki do frameworka – 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-xpath

Jeden z najbardziej popularnych dodatków – czyli selektory za pośrednictwem xpatha. Jeżeli ktoś lubi, korzysta, jest przyzwyczajony, bądź nie potrafi w inny sposób stworzyć selectora wystarczy instalacja.

npm install -D @cypress/xpath
yarn add @cypress/xpath --dev

W pliku support dodajemy:

require('@cypress/xpath');
Cypress-Mochawesome-reporter

Drugi z najbardziej popularnych to dodatek do tworzenia raportów w Cypressie. Więcej informacji o tym dodatku pisaliśmy tutaj.

npm i --save-dev cypress-mochawesome-reporter
yarn add -D cypress-mochawesome-reporter
Cypress-Audit

Narzędzie dzięki któremu będziemy mogli dokonywać audytu naszej strony, np. sprawdzać wartości lighthousowe, czy też sprawdzać jej dostępność.

yarn add -D cypress-audit
npm install --save-dev cypress-audit

Cypress-Real-events

Przedmiotowy dodatek to super pomoc przy testowaniu elementów np. nawigacyjnych / menu. Dzięki temu dodatkowi w łatwy sposób możemy dokonać „najechania” myszką na element, by wyświetlić sub-menu i wiele innych.

npx install -D cypress-real-events

Cypress-Iframe

Cypress by default nie lubi się z iframe. Z pomocą przychodzi nam dodatek dzięki któremu możemy pracować z Iframe.

npm install -D cypress-iframe

Następnie w pliku commands.js.

import 'cypress-iframe';
require('cypress-iframe');
Cypress-file-upload

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

npm install --save-dev cypress-file-upload

Następnie w pliku commands.js.

import 'cypress-file-upload';
Cypress-Accessibility

Chcesz sprawdzać automatycznie dostępność cyfrową i weryfikować czy nasze elementy na pewno nadal takie są? Wypróbuj ten dodatek

npm install -D cypress-accessibility-audit
Cypress-Cucumber-preprocessor

Lubicie korzystać z języka Gherkin. Tworzyć testy gdzie biznes będzie miał swój wkład. Zaistaluj ten dodatek.

npm install --save-dev cypress-cucumber-preprocessor
Cypress-drag-drop

Bardzo przydatny dodatek, jeżeli chcemy zasymulować ruch przeciągania elementów. Dzięki niemu w łatwy sposób poradzicie sobie z takimi testami.

npm install --save-dev @4tw/cypress-drag-drop
yarn add --dev @4tw/cypress-drag-drop

Następnie w pliku commands.js.

require('@4tw/cypress-drag-drop')
import '@4tw/cypress-drag-drop'

Cypress-wait-until

Dodatek wspierające oczekiwanie na zdarzenia w Cypressie. Dzięki niemu nie musimy korzystać ze sztywnego cy.wait().

npm i -D cypress-wait-until
yarn add -D cypress-wait-until

Następnie w pliku commands.js.

import 'cypress-wait-until';

Podsumowanie

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