Jak pisać kompleksowe testy przy użyciu Cypress w aplikacjach React?

Frontend development obejmuje tworzenie atrakcyjnych wizualnie, funkcjonalnych aplikacji skierowanych do klienta. Jest jednak pewien haczyk: aplikacje te muszą zapewniać użytkownikom płynne działanie.

Aby kompleksowo zweryfikować działanie aplikacji, konieczne jest przeprowadzenie zarówno testów jednostkowych, jak i integracyjnych, które służą do potwierdzenia jej funkcjonalności. Jednak te rodzaje testów mogą nie w pełni obejmować wszystkie aspekty typowych doświadczeń użytkownika. Aby dokładnie odtworzyć podróż użytkownika, konieczne jest przeprowadzenie kompleksowych testów, które wiernie naśladują jego rzeczywiste interakcje z systemem. W ten sposób można mieć pewność co do wydajności aplikacji na każdym etapie jej procesu.

Pierwsze kroki z testami end-to-end przy użyciu Cypress

Jednym z głównych celów testowania end-to-end w aplikacjach front-end jest zapewnienie, że pożądane wyniki zostaną osiągnięte, a nie analizowanie szczegółów działania logiki biznesowej.

Rozważmy formularz logowania jako przykład. Optymalnie byłoby ocenić, czy ekran logowania wyświetla się poprawnie i spełnia zamierzoną funkcję bez względu na skomplikowane specyfikacje technologiczne. Ostatecznie celem jest przyjęcie perspektywy użytkownika i zbadanie jego kompleksowego doświadczenia.

Cypress to świetny framework do automatyzacji testów, który jest kompatybilny z niektórymi z najpopularniejszych frameworków JavaScript. Jego zdolność do uruchamiania testów bezpośrednio w przeglądarce i wszechstronny zestaw funkcji testowych sprawiają, że testowanie jest płynne i wydajne. Obsługuje również różne podejścia do testowania, w tym:

⭐Testy jednostkowe

⭐Testy całościowe

⭐Testy integracyjne

Aby opracować kompleksowe przypadki testowe, które obejmują wszystkie aspekty funkcjonalności aplikacji React, należy ocenić jej zachowanie z perspektywy użytkownika końcowego, biorąc pod uwagę następujące narracje:

Osoba jest w stanie dostrzec pole wprowadzania tekstu, któremu towarzyszy przycisk do wysłania.

Osoba jest w stanie wpisać pytanie lub frazę w puste miejsce przeznaczone do tego celu, znane jako “pole wprowadzania”.

Po kliknięciu przycisku “wyślij” oczekuje się, że bezpośrednio pod odpowiednim polem pojawi się lista elementów.

Postępując zgodnie z tymi historyjkami użytkownika, można zbudować prostą aplikację React, która pozwala użytkownikowi wyszukiwać produkty. Aplikacja pobierze dane produktu z interfejsu API DummyJSON i wyrenderuje je na stronie.

Kod źródłowy tego projektu znajduje się na koncie GitHub dewelopera, do którego można uzyskać dostęp, odwiedzając powiązane repozytorium.

Konfiguracja projektu React

Aby zainicjować proces, można utworzyć projekt React przy użyciu Vite lub użyć polecenia “create-react-app”, aby skonfigurować podstawową aplikację React. Po zakończeniu fazy konfiguracji należy pobrać bibliotekę Cypress jako zasób zależny od rozwoju w ramach projektu.

 npm install cypress --save-dev 

Rzeczywiście, konieczne jest zrewidowanie pliku package.json poprzez włączenie wspomnianego skryptu w jego obrębie.

 "test": "npx cypress open" 

Utwórz komponent funkcjonalny

W katalogu źródłowym utwórz podfolder i przypisz mu etykietę “components”. W tym podzielonym obszarze zainicjuj proces tworzenia nowego dokumentu tekstowego o nazwie “products.jsx” i włącz dostarczony kod do jego zawartości.

 import React, { useState, useEffect } from 'react';
import "./style.component.css"

export default function Products(prop) {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);
   const { searchInput } = prop;


  return (
    <div className="product-catalogue">
      {error ? (
        <p>Product not found</p>
      ) : (
        <div className="product-list">
          {products.slice(0, 6).map((product) => (
            <div className="product" key={product.id}>
              <h2>Title: {product.title}</h2>
              <p>Price: ${product.price}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

W ramach danego scenariusza konieczne jest zaimplementowanie haka useEffect w komponencie funkcjonalnym. Ten hak będzie odpowiedzialny za wykonanie asynchronicznej operacji, która pobiera dane produktu w odpowiedzi na zapytanie użytkownika.

  useEffect(() => {
    const fetchProducts = async () => {
      if (searchInput) {
        const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
        try {
          const response = await fetch(apiUrl);
          if (!response.ok) {
            throw new Error('Error fetching products');
          }
          const json = await response.json();
          setProducts(json.products);
          setError(null);
         } catch (error) {
          setError(error.message);
        }
      }
    };
    fetchProducts();
  }, [searchInput]); 

Zaktualizuj plik App.jsx

Zaktualizuj plik App.js poprzez włączenie dostarczonego fragmentu kodu poniżej:javascriptimport React from ‘react’;import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;import LoginPage from ‘. /LoginPage/LoginPage"; // zaimportuj komponent strony logowania tutajimport HomePage from ‘./HomePage/HomePage’; // zaimportuj komponent strony głównej tutajimport ServiceListPage from ‘. /ServiceListPage/ServiceListPage’; // zaimportuj komponent strony listy usług tutajimport CreateAccountForm from ‘./CreateAccountForm/CreateAccountForm’; // zaimportuj komponent formularza tworzenia konta tutajimport { useHistory } from ‘react-router-dom’;function App() { const history = useHistory();return (

 import React, { useState,useRef } from 'react'
import './App.css'
import Products from './components/Products'

function App() {
  const [searchInput, setSearchInput] = useState('')
  const searchInputRef = useRef('');

  const handleSubmit = (e) => {
    setSearchInput(searchInputRef.current.value);
  }

  return (
    <div>
      <h1>Cypress Testing Library tutorial</h1>
        <label htmlFor="input">Input</label>
      
        <input
          id="text"
          type="text"
          ref={searchInputRef}
        />

        <button id="btn" type="button" onClick={handleSubmit}>Submit</button>
      <Products data-testid="products-component" searchInput={searchInput} />
     </div>
  )
}

export default App 

Śmiało i uruchom serwer deweloperski.

 npm run dev 

Rzeczywiście, powinieneś teraz mieć możliwość łatwego pobierania określonych informacji z mock JSON API.

Konfiguracja środowiska testowego

W pierwszej kolejności wykonaj skrypt testowy za pomocą polecenia terminala:

 npm run test 

Wykonaj określoną akcję, która zainicjuje framework testowy Cypress. Kontynuuj, klikając przycisk “Testowanie E2E” znajdujący się poniżej.

Kontynuuj, klikając “Kontynuuj” w celu włączenia plików konfiguracyjnych Cypress.

Po zakończeniu tej procedury należy zaobserwować pojawienie się nowego folderu testów Cypress w swoim przedsiębiorstwie. Co więcej, klient Cypress autonomicznie dołącza dokument cypress.config.js. Użytkownicy mają prawo do zmiany tego rekordu w celu dostosowania szeregu niuansów związanych ze środowiskiem testowym, kompilacją i konfiguracją.

Pisanie testów end-to-end przy użyciu Cypress

Aby wykonać początkowy test, konieczne jest wybranie przeglądarki internetowej, która będzie hostować badanie. Z szeregu opcji dostępnych w interfejsie Cypress wybierz wersję, która odpowiada Twoim preferencjom.

Cypress zainicjuje usprawnioną iterację wybranej przeglądarki internetowej, ustanawiając zaaranżowane środowisko testowe do celów ewaluacyjnych.

Aby wygenerować nowy plik testowy, wybierz opcję “Utwórz nową specyfikację” z dostępnych opcji.

Przejdź do preferowanego edytora kodu, uzyskaj dostęp do pliku “cypress/e2e/App.spec.cy.js” i dokonaj niezbędnych modyfikacji jego zawartości, włączając dostarczony kod.

 describe('App Tests', () => {
  beforeEach(() => {
    cy.visit('http://127.0.0.1:5173/');
   });

  it('Renders input field and submit button', () => {
     cy.get('#text').should('exist').should('be.visible');
    cy.get('#btn').should('exist').should('be.visible').contains('Submit');
  });

  it('Enters a search query', () => {
    const searchQuery = 'laptops';
    cy.get('#text').type(searchQuery);
  });
}); 

Obecne ramy testowe weryfikują wiele aspektów wyżej wymienionych narracji użytkownika, zapewniając, że system zachowuje się zgodnie z przeznaczeniem w różnych scenariuszach, przy jednoczesnym uwzględnieniu kryteriów wejściowych określonych w każdej indywidualnej fabule.

Interfejs użytkownika aplikacji internetowej powinien zawierać pole wejściowe i przycisk przesyłania, które są wyświetlane przez przeglądarkę na stronie internetowej.

Użytkownik ma możliwość wprowadzenia zapytania wyszukiwania za pomocą dostarczonego pola tekstowego lub funkcji poleceń głosowych, umożliwiając mu łatwe i skuteczne zlokalizowanie żądanych informacji.

Cypress jest podobny do innych popularnych frameworków testowych JavaScript, takich jak Jest i Supertest, ponieważ wykorzystuje deklaratywne podejście i specyficzny język do tworzenia scenariuszy testowych.

Aby wykonać test, wróć do usprawnionego środowiska przeglądarki nadzorowanego przez Cypress i wybierz konkretny skrypt testowy, który chcesz wykonać.

Cypress został zaprojektowany do wykonywania testów i prezentowania ich wyników w lewym panelu interfejsu, zapewniając użytkownikom wygodny sposób monitorowania postępu testów.

Symulacja procesów aplikacji

Aby zweryfikować pełne doświadczenie użytkownika w tym konkretnym scenariuszu, kluczowe jest potwierdzenie, że aplikacja jest w stanie zaakceptować dane wejściowe użytkownika, pobrać niezbędne informacje i ostatecznie wyświetlić te informacje w interfejsie przeglądarki.

Aby zapewnić przejrzystość, możliwe jest utworzenie oddzielnego pliku testowego, który obejmuje alternatywny zestaw testów w katalogu end-to-end. Ponadto istnieje inna opcja, w której wiele przypadków testowych badających określony scenariusz jest skonsolidowanych w jednym pliku testowym.

Wygeneruj nowy plik Products.spec.cy.js w katalogu e2e , korzystając z dostarczonego fragmentu kodu.

 describe('Products Tests', () => {
    it(' fetches and displays the data', () => {
      const searchQuery = 'laptops';
      cy.visit('http://127.0.0.1:5173');
   
      cy.get('#text').type(searchQuery);
      cy.get('#btn').contains('Submit').click();
  
      cy.get('.product').should('have.length.greaterThan', 0);
  
      cy.get('.product').first().should('contain', 'Title');
       cy.get('.product').first().should('contain', 'Price: $');
    });

  }); 

Niniejszy zbiór testów sprawdza, czy po wprowadzeniu przez użytkownika określonego zapytania aplikacja pobiera i wyświetla odpowiednie informacje w interfejsie przeglądarki internetowej.

Narzędzie symuluje proces wyszukiwania produktów w witrynie e-commerce poprzez przesłanie zapytania i sprawdzenie, czy wynikowa strona zawiera odpowiednie informacje, takie jak tytuły i ceny produktów. Umożliwia to ocenę całego procesu przeglądania strony przez użytkownika z jego punktu widzenia.

Symulowanie błędów i reakcji

Masz możliwość odtworzenia szeregu sytuacji błędów i odpowiadających im reakcji w przypadkach testowych Cypress, zapewniając większą elastyczność podczas testowania potencjalnych problemów.

Utwórz nowy plik JavaScript o nazwie “Error.spec.cy.js” w katalogu “e2e” i dołącz poniższy fragment kodu:

 describe('Error Handling Tests', () => {
    it('Displays error message for incorrect search query', () => {
  
      cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
        statusCode: 404, // Not Found
        body: 'Product not found'
      }).as('fetchProducts');

      cy.visit('http://127.0.0.1:5173');

      const incorrectSearchQuery = 'rocket';
      cy.get('#text').type(incorrectSearchQuery);
      cy.get('#btn').click();

      cy.wait('@fetchProducts');

      cy.contains('Product not found').should('be.visible');
    });
  }); 

Obecna implementacja tego zestawu testów koncentruje się na zapewnieniu, że dostrzegalny komunikat o błędzie jest generowany za każdym razem, gdy użytkownik wprowadzi nieprawidłowe zapytanie wyszukiwania, w celu szybkiego poinformowania go o problemie i ułatwienia podjęcia odpowiednich działań naprawczych.

Aby przypadek testowy został uznany za udany, wykorzystuje on funkcję przechwytywania Cypress do imitowania błędów sieciowych poprzez symulację wadliwego połączenia sieciowego. Następnie, po wprowadzeniu nieprawidłowego zapytania wyszukiwania w wyznaczonym polu wejściowym i zainicjowaniu procesu pobierania danych, test sprawdza, czy widoczny komunikat o błędzie “Nie znaleziono produktu” pojawia się w widocznym miejscu na stronie internetowej.

Obecny wynik sugeruje, że system zarządzania błędami działa zgodnie z zamierzonym projektem.

Korzystanie z Cypress w rozwoju opartym na testach

Testowanie jest istotnym aspektem tworzenia oprogramowania, który wymaga znacznej uwagi, aby zapewnić jakość i niezawodność produktu. Chociaż testowanie może pochłaniać znaczną ilość czasu i zasobów, wykorzystanie narzędzi takich jak Cypress może zapewnić poczucie spełnienia poprzez usprawnienie procesu testowania i ułatwienie wydajnego wykonywania przypadków testowych.

Cypress oferuje imponującą gamę narzędzi ułatwiających rozwój aplikacji w oparciu o testy, obejmującą zarówno szeroki zakres funkcji testowych, jak i wsparcie dla różnych metodologii testowania. Aby w pełni docenić wszystko, co Cypress ma do zaoferowania, zagłęb się w jego autorytatywną dokumentację, gdzie odkryjesz wiele dodatkowych możliwości testowania.