Zadania na lekcje

Testowanie nawigacji i sprawdzanie błędów 404 w Cypress

TEST
Priorytet: Normalny Szkic

Zadanie 101: Testowanie nawigacji i sprawdzanie błędów 404 w Cypress

Wstęp

Automatyzacja testów End-to-End (E2E) pozwala na symulowanie zachowań prawdziwego użytkownika w przeglądarce i znacznie przyspiesza proces wyłapywania błędów w aplikacji przed jej wdrożeniem. Framework Cypress to jedno z najpopularniejszych narzędzi do tego celu tworzonych w środowisku JavaScript. Zakładając, że w Zadaniu 100 udało Ci się poprawnie zainstalować to środowisko projektowe, nadszedł czas, aby napisać pierwszy użyteczny skrypt weryfikujący stabilność i prawidłowe wczytywanie konkretnej platformy.

Cel zadania

Twoim głównym zadaniem jest napisanie skryptu w języku JavaScript dla frameworka Cypress, który zautomatyzuje testowanie nawigacji w aplikacji dostępnej pod darmowym adresem https://mdview.t24.ovh. Skrypt ten powinien zasymulować ścieżki i powiązania w serwisie – wejść na główny dashboard, sprawdzić wszystkie dostępne i widoczne kategorie (upewniając się, że można w nie klikać), rozwijać znajdujące się w nich listy zadań oraz potwierdzić, że owe zadania także reagują na akcje. Kluczowym punktem jest sprawdzenie, by powiązane adresy w architekturze m.in zadań nie odsyłały serwera pod zwracany HTTP błąd 404.

Wymagania techniczne

  1. Utworzyć nowy plik z rozszeżeniem dla bloków testowych w strukturze projektu Cypress (np. katalog e2e, plik mdview_navigation.cy.js).
  2. Rozpocząć wizytację z poziomu serwera wykonawczego Cypressa na głównej witrynie określonej w poleceniu pod adresem https://mdview.t24.ovh.
  3. Zidentyfikować elementy DOM odpowiadające za menu prezentujące zebrane Kategorie i sprawdzić czy obiekty te reagują na eventy (w tym kliknięcie i nawigację z nimi związaną).
  4. Przejść głębiej do zrenderowanych warstw dokumentu – do samych udostępnionych Zadań, potwierdzając, że poszczególne akcje odnośnikowe prowadzą od użytkownika w miejsca z zamierzonym rezultatem.
  5. Wykorzystać ugruntowane polecenia asercji z tła tj. np cy.request(), żeby po odczytaniu każdego linka potwierdzać go na status zwrotny "200 OK".

Kroki do wykonania

1. Przygotowanie głównego scenariusza testowego

Test w środowiskach opartych o Mocha (z których wywodzi się Cypress) organizuje się zazwyczaj w dużym uniwersalnym bloku grupującym describe, po czym wyróżnia specyficzne przypadki użyciem słówka it zawierającym tytuły testu. Aby rozpocząć nawigację do aplikacji docelowej, będziemy wywoływać natywną funkcję ładującą cy.visit().

describe('Testy witryny MDVIEW - Weryfikacja działów i zadań', () => {
    
    it('Otwiera główną stronę aplikacji asertywnie', () => {
        // Wchodzimy na zadany adres projektu
        cy.visit('https://mdview.t24.ovh')
        
        // Sprawdzamy, czy aplikacja odpowiada tytułem w przeglądarce
        cy.title().should('not.be.empty')
    })
    
})

2. Sprawdzanie klikalności na liście elementów (np. kategorii)

Cypress w sprytny sposób pozwala na wybranie wszystkich elementów ze strony odwołując się do selektorów, do złudzenia znanych chociażby z biblioteki jQuery – używamy głównego selektora cy.get() powiązanego najczęściej z klasami widoku. W celu zbadania całej długiej puli wprowadzonych bloków iterujemy ich powtórzenia przy pomocy pętli wymuszonej przez .each().

// Test 2: Należy zlokalizować selektor HTML w swoim zbadanym DevTools
it('Potwierdza działanie bloków na każdej obecnej kategorii', () => {
    cy.visit('https://mdview.t24.ovh')
    
    // Szukamy kontenerów powiązanych z menu, dopasuj właściwy selektor do projektu
    cy.get('a.category-link').each(($el) => {
        
        // Zabezpieczenie asertywne dla bytu hiperłącza by wskazywał na jakąkolwiek drogę
        const href = $el.attr('href')
        expect(href).to.not.be.undefined
        
        // Komenda sprawdzająca, czy badany blok kategorialny posiada atrybut klikalności bez asysty zasłaniania
        cy.wrap($el).should('be.visible').and('not.be.disabled')
    })
})

3. Zapobieganie błędom braku połączenia do podstron (404 Not Found)

W teście produkcyjnym często kliknięcia mogłyby poskutkować gwałtowną zmianą adresu domeny do ścieżki i popsuciem testu gdy zapętlamy kroki. Alternatywną, a nierzadko szybszą i bezpieczniejszą drogą na potwierdzenie obecności zadań na weryfikowanych podstronach - jest wydanie odgórnych komend typu cy.request() na każdy znaleziony blok z wbudowanej z linkiem mapy tak, żeby cicho w weryfikatorach potwierdzić brak statusów 404 lub 500 informujących nas o błędach aplikacji.

it('Weryfikuje, że poszczególne linki zadań nie skutkują kodem 404', () => {
    cy.visit('https://mdview.t24.ovh')
    
    // Zbieramy listę wejściową (podlinkowania na zadania)
    cy.get('a.task-link').each(($el) => {
        const path = $el.prop('href')
        
        // Otwarcie zapytań protokołem GET unikając zawieszenia na ewentualnym 404 (w celu późniejszej weryfikacji)
        cy.request({
            url: path,
            failOnStatusCode: false
        }).then((response) => {
            // Skuteczna asercja warunkująca, która musi zakładać iż z serwera nie było wady na żądaniu
            expect(response.status).to.eq(200)
        })
    })
})

Zadania dla chętnych

Opanowanie samych mechanizmów E2E do potwierdzania błędów HTTP i symulowania zdarzeń nie jest kresem nauki Cypressa. Poniżej zostało wyselekcjonowane 5 punktów zadaniowych z którymi radzą sobie zawodowi inżynierowie oprogramowania - wykonaj je samodzielnie w kodzie:

  1. Testowanie w środowisku asynchronicznym: Powszechnym zachowaniem portalu do zbiorów jest dynamiczne doczytywanie zadań z platformy (np. przez JSON). Jeżeli menu i moduły na badanej stronie pojawiają się dopiero z lekkim opóźnieniem wczytwiane przez bibliotekę, użyj koncepcji zwanej intercept capture. Skonfiguruj cy.intercept() pod wskazany wzorzec żądań wyzwalających na backendzie (np. **/api/tasks**), i przetrzymaj test na chwilę wywołaniem na instancji .wait('@alias'), upewniając tym samym że Twoje selektory szukające elementów pojawią się na załadowanym wykazie aplikacji, zanim środowisko E2E podniesie alarm w logach o braku.
  2. Dynamiczna wirtualna nawigacja po warstwach struktury: Opisana instrukcja wykonywała test pasywnym wysyłaniem pakietów protokołu pod link. Tym zadaniem postaraj się zbudować głębszą interakcję symulując zachowanie człowieka - kliknij przez cy.click() w pierwszą dostrzeżoną kategorię, sprawdź po wczytaniu interfejsu nowego zadania od góry, po czym zaprogramuj polecenie wirtualnej wstecznej przeglądarki cy.go('back') jako zwrotny proces żeby powrócić z powrotem na listę.
  3. Pielęgnacja oraz logowanie szczegółowe błędów powiązanych dla cyklu requestu: Rozbuduj poprzedni obieg do funkcji .request() sprawdzający brak statusu 404. W przypadku niepomyślnej walidacji błędu (if (response.status !== 200)), dopisz sprytne generowanie wypisanego stringa komendą cy.log(...) – w sposób taki, by konsola informująca w Twoim wirtualnym runnerze raportowała w oknie dokładny uszkodzony path (adres URl linkowanego rekordu) na którym wystąpił incydent zamiast jedynie zaryglowywać raport główny "spodziewanym błędem".
  4. Weryfikacja wyszukiwarki list i weryfikatora danych wejściowych: Znajdź sekcję przypisaną do poszukiwania fraz. Załaduj skrypt odwołujący domyłkę pod zdarzenie z Cypressa (cy.get('input[type="search"]').type('Twoja Fraza')); Zobacz po sekundzie zachowanie filtra lub odpowiedź aplikacji i przetestuj wywołanie czy panel wypuścił nowe obiekty na warstwę widoku czy zareagował pustostanem.
  5. Responsywność widoku portalu (Mobile test): Dobry serwis powinnien tak samo działać na klasycznym komputerze, jak i smartfonach. Napisz cały proces na domyślnej pętli powtórkowo po raz wtóry, jednak z dodatkiem z góry ustawioną opcją testowania telefonu poprzez nakładające się środowisko na okienko uruchomieniowe poleceniem konfiguracji w locie typu cy.viewport('iphone-x') lub o rozdzielczości standardowych rozmiarów. Jeśli boczne nawigacje chowają się za małym widokiem tzn. Hamburger-Menu, test skryptu po przeładowaniu nie powinien zrażać się błędem braku kategorii przy asercji, a najpierw rozszerzyć dostęp w okienko przed szukaniem.