Cypress tips and tricks

Cypress tips and tricks – to wpis pokazujący kilka ciekawych możliwości wykorzystania Cypressa w ramach naszej pracy Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wtyczki do VSC

Tworząc testy automatyczne z wykorzystaniem Cypressa jest szansa, że korzystasz z Visual Studio Code. Jeżeli tak, to możesz zapoznać się z dodatkami – dedykowanymi dla Cypressa.

Cypress Helper to wtyczka pomaga nam w tworzeniu testów automatycznych

Cypress Snippets to rozszerzenie pomagające w tworzeniu kodu dla naszych testów automatycznych. Wpisując polecenie beforeEach (be) otrzymamy w rezutalcie:

beforeEach(() => {
    $1
});
$0

Wtyczka wspiera:

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

Cypress-cucumber-generator – rozszerzenie wspierające Cucumbera. Obecnie jest na wczesnym etapie – zgodnie z informacją z Readme może zawierać błędy. 

QA Extension pack by Shelex – paczka zawierająca wiele różnych dodatków dla QA.

Obrazy dockerowe

Chcąc uruchamiać testy np. na Gitlabie – możemy korzystać z obrazów dockerowych by w szybki sposób uruchomić testy automatyczne w takiej formie. Z pomocą przychodzą nam obrazy. Pierwszym z nich jest:

• Cypress/base
• Przeglądarki

Xpath

Jeżeli masz potrzebę stworzenia selektora w postaci xpath – domyślnie w Cypressie nie jest to możliwe. Z pomocą przychodzi biblioteka, która nam to umożliwia. Wszystko poprzez wpisanie komendy i dodanie ustawień.

npm install -D cypress-xpath

W ramach projektu w pliku cypress/support/index.js dodaj:

require('cypress-xpath')

Szybka aktualizacja z poziomu terminala

Jeżeli wychodzi nowa wersja Cypressa i instalowałeś go za pomocą npma to równie szybko możesz podnieść wersję.

npm install cypress --save-dev

Możesz też podbić do konkretnej wersji:

npm install --save-dev cypress@9.2.0

Jeżeli masz potrzebę możesz wyczyścić cache z wersjami:

cypress cache clear

Cypress.env.json

W tym pliku możemy przechowywać nasze hasła, loginy tak aby nie były widoczne z poziomu kodu testowego, np:

{
    "auth_username": "admin",
    "auth_password": "admin",

    "login": "admin",
    "password": "password",
}

Później wystarczy wywołać sobie żądane dane w ramach testu, np. auth:

cy.visit('/', {
      auth: {
        username: Cypress.env('auth_username'),
        password: Cypress.env('auth_password')
      }

Cypress.json

Temu plikowi poświęcimy szerszy wpis, natomiast w tym miejscu możesz zadeklarować swój adres URL, timeouty, nagrywanie filmów, czy tworzenie raportów. Aby skorzystać z możliwości z odwiedzania strony ze wszystkich klas testowych jak powyżej, wystarczy zadeklarować adres url:

{
    "baseUrl" : "https://twoj-adres.pl",
}

Odwiedzaj npmjs.com

Odwiedzaj tą witrynę i poszukuj czy nie pojawiły się nowe dodatki do Cypressa. Już dzisiaj możesz skorzystać z zewnętrznych dodatków do – porównywania wyglądu, testowania dostępności, sprawdzania wartości lighthousowych, czy tworzenia raportów.

Podsumowanie

Cypress tips and tricks – to kolejny wpis rozwijający temat testów automatycznych z wykorzystaniem tego narzędzia. Z racji popularyzacji narzędzia i dużego wsparcia które otrzymał Cypress na rozwój, będziemy tworzyć dla Was kolejne wpisy na ten temat. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.

+3