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-reporteryarn 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.
; ;
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.
