Nowoczesne testowanie GUI z Cypress – dogłębna analiza

Dawno minęły czasy, gdy testowanie aplikacji internetowych było zadaniem czasochłonnym i żmudnym. W zapewnieniu płynnej obsługi użytkownika w świecie nowoczesnych aplikacji webowych krytyczne znaczenie miało wprowadzenie zautomatyzowanego testowania GUI. Znaczącym graczem, wśród wielu dostępnych narzędzi z tego zakresu, został Cypress oferujący potężniejsze możliwości niż konkurenci, np. Selenium. W tym wpisie przyjrzymy się korzyściom płynącym z używania Cypress do automatycznego testowania GUI. Sprawdzimy też funkcjonalności jego najnowszej wersji.

Czym jest Cypress?

Cypress to narzędzie do testowania end-to-end, które zaprojektowane zostało pod kątem aplikacji webowych. Zapewnia programistom kompleksową platformę do pisania i wykonywania testów interfejsów użytkownika ich aplikacji. Dzięki prostej składni, przeładowywaniu w czasie rzeczywistym i łatwemu debugowaniu Cypress szybko zyskał popularność wśród programistów.

Cypress vs Selenium – kluczowe różnice

1. Architektura – Selenium wykorzystuje oddzielny serwer „WebDriver” do interakcji z przeglądarkami, a Cypress działa bezpośrednio w samej przeglądarce. Eliminuje to potrzebę dodatkowych warstw komunikacji, co skutkuje szybszymi i niezawodnymi testami.
2. Obsługa języków – Selenium obsługuje wiele języków programowania, w tym Java, C# i Python. Wymaga to jednak od programistów utrzymywania oddzielnych wiązań i interfejsów API dla każdego języka. Z drugiej strony, Cypress jest zbudowany na JavaScript, zapewniając jedno, ujednolicone środowisko testowe.
3. Przeładowywanie w czasie rzeczywistym – funkcja przeładowywania w czasie rzeczywistym Cypress jest przełomowa. Automatycznie przeładowuje ona testy, gdy tylko zostaną wprowadzone zmiany w plikach testowych. Umożliwia to szybszą walidację testów i skraca czas ich wytworzenia.
4. Debugowanie – w Cypress jest ono bardzo proste dzięki integracji z Chrome DevTools. Programiści mogą łatwo weryfikować swoje testy i kod aplikacji, co ułatwia wykrywanie oraz naprawianie błędów. Możliwości debugowania Selenium są mniej przyjazne dla użytkownika i często wymagają dodatkowych narzędzi lub rozszerzeń.
5. Niestabilność testów – projekt architektoniczny Cypress zmniejsza niestabilność testów spowodowaną kwestiami czasowymi i asynchronicznością. Narzędzie automatycznie czeka, aż elementy staną się dostępne, a działania zostaną zakończone przed przejściem dalej. Eliminuje to potrzebę wprowadzania ręcznych limitów czasu i ponawiania prób. Efektem są też stabilniejsze i spójniejsze wyniki testów w porównaniu do Selenium.

Tworzenie i uruchomianie pierwszego testu Cypress

Gdy znasz już zalety korzystania z Cypress do automatycznego testowania GUI, przejdźmy przez proces tworzenia i uruchomiania pierwszego przykładowego testu. Aby rozpocząć pracę z Cypress, wykonaj poniższe kroki.

• Zainstaluj Cypress

Przed rozpoczęciem upewnij się, że masz zainstalowany w swoim systemie Node.js. Następnie przejdź do katalogu głównego projektu i uruchom poniższe polecenie, aby zainstalować Cypress:

npm install cypress --save-dev

• Przeprowadź inicjalizację Cypress

Po zainstalowaniu Cypress zainicjuj go, uruchamiając następujące polecenie:

npx cypress open

Spowoduje to utworzenie w katalogu projektu folderu „cypress” zawierającego kilka przykładowych plików i folderów. Najważniejsze foldery to: „integration” (gdzie będą przechowywane pliki testowe), „fixtures” (zawierający dane statyczne do Twoich testów), „plugins” (przechowujący wtyczki Cypress) i „support” (z niestandardowymi poleceniami i funkcjami wielokrotnego użytku).

• Napisz swój pierwszy test

Aby utworzyć pierwszy test, przejdź do folderu „integration” i utwórz nowy plik o nazwie „example_spec.js”. Następnie otwórz utworzony plik i wprowadź następujący kod:

describe('My First Test', () => {
  it('Visits the example page', () => {
    cy.visit('https://example.com')

    cy.contains('Welcome to Example.com!')
    cy.title().should('include', 'Example Page')
  })
})

Test ten wykonuje następujące czynności:

1. Odwiedza adres URL „https://example.com”.
2. Sprawdza, czy strona zawiera tekst „Welcome to Example.com!”.
3. Sprawdza, czy tytuł strony zawiera „Example Page”.

Page Object Factory poprawia organizację i łatwość utrzymania pakietu testów poprzez centralizację tworzenia i inicjalizacji obiektów stron.

• Uruchom testu

Wykonaj polecenie „npx cypress open” w katalogu projektu. Spowoduje to otwarcie Cypress Test Runnera, który zawiera listę wszystkich plików testowych.

Kliknij „example_spec.js”, aby uruchomić test. Zostanie on wykonany w nowym oknie przeglądarki, umożliwiając obserwację testu i wyświetlenie wyników.

Podsumowanie

Rozpoczęcie pracy z Cypress i stworzenie pierwszego testu jest tak proste, jak przedstawiłem to w powyżej opisanych krokach. Dzięki rozbudowanym funkcjom i łatwej obsłudze narzędzie to doskonale nadaje się do zautomatyzowanego testowania GUI. Zapewnia ono, że aplikacje webowe działają płynnie i niezawodnie. W miarę jego dalszego poznawania z pewnością odkryjesz jeszcze więcej możliwości i technik usprawniających proces testowania.