Mondjon a kliens oldali tesztelésről az…

Az ügyféloldali tesztelés (frontend tesztelés) arra irányul, hogy ellenőrizze a felhasználói felület helyes működését és interakcióját vele. A fő cél az, hogy megbizonyosodjunk arról, hogy az alkalmazás különböző eszközökön és böngészőkben helyesen néz ki, viselkedik és működik a végfelhasználó szempontjából.

Az ügyféloldali tesztelés típusai:

Vizuális tesztelés: Az interfész elemeinek megjelenésének ellenőrzése, a maketteknek és a dizájnnak való megfelelés, átfedések, elmozdulások és egyéb vizuális hibák hiánya.
Funkcionális tesztelés: Az összes interaktív elem (gombok, űrlapok, linkek stb.) helyes működésének és az ügyfél oldali üzleti logika ellenőrzése.
Kereszt böngészős tesztelés: Az alkalmazás megjelenítésének és funkcionalitásának ellenőrzése különböző webböngészőkben (Chrome, Firefox, Safari, Edge stb.) és azok verzióiban.
Kereszt platformos tesztelés: Az alkalmazás működésének ellenőrzése különböző operációs rendszereken (Windows, macOS, Linux) és azok verzióiban.
Teljesítmény tesztelés: Az oldalak betöltési sebességének, az interfész reakcióképességének, a memória- és processzorhasználatnak a értékelése az ügyfél oldalon.
Használhatósági tesztelés: Az interfész könnyűségét és intuitív használhatóságát értékelése a felhasználó számára, az általánosan elfogadott UX/UI szabványoknak való megfelelés.
Hozzáférhetőségi tesztelés: Az alkalmazás hozzáférhetőségi szabványoknak (pl. WCAG) való megfelelőségének ellenőrzése fogyatékkal élő felhasználók számára.
Reszponzív tesztelés: Az alkalmazás helyes megjelenítésének és működésének ellenőrzése különböző képernyőméretekkel rendelkező eszközökön (asztali, tablet, mobiltelefon).
Biztonsági tesztelés: A kliens oldali sebezhetőségek, például Cross-Site Scripting (XSS) vagy Cross-Site Request Forgery (CSRF), felhasználói hitelesítés és jogosultság ellenőrzése.

Az automatizált tesztelés eszközei:

E2E (End-to-End) és integrációs tesztekhez: Selenium, Cypress, Playwright.
Egység- és komponens tesztekhez (a keretrendszertől függően): Jest, Mocha, Jasmine, Testing Library, Enzyme.
Vizuális teszteléshez: Applitools, Percy.
Teljesítmény teszteléshez: Lighthouse, WebPageTest.
Hozzáférhetőség teszteléshez: Axe DevTools, WAVE.

Példa Cypress használatával végzett tesztre:

// cypress/integration/example.spec.js
describe('Főoldal tesztelése', () => {
  beforeEach(() => {
    cy.visit('/'); // Navigálás a főoldalra
  });

  it('Az oldal címének ellenőrzése', () => {
    cy.title().should('eq', 'Alkalmazás neve'); // A böngészőfül címe
  });

  it('Kulcsfontosságú elem meglétének ellenőrzése', () => {
    cy.get('h1').should('contain', 'Üdvözlünk'); // Ellenőrzés, hogy van-e h1 elem adott szöveggel
  });

  it('A gomb működésének tesztelése', () => {
    cy.get('button#myButton').click(); // A 'myButton' azonosítójú gomb megnyomása
    cy.get('.success-message').should('be.visible'); // Sikerüzenet láthatóságának ellenőrzése
  });
});

Jest és React Testing Library használatával React komponenshez példa tesztre:

// src/components/Button/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button komponens tesztelése', () => {
  it('A gomb helyes szöveggel jelenik meg', () => {
    render(<Button text="Kattints rám" />);
    const buttonElement = screen.getByText(/Kattints rám/i);
    expect(buttonElement).toBeInTheDocument(); // Elem létezésének ellenőrzése
  });

  it('A kattintási kezelő hívódik', () => {
    const handleClick = jest.fn(); // Mock függvény
    render(<Button text="Kattints rám" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Kattints rám/i);
    fireEvent.click(buttonElement); // Kattintás szimulálása
    expect(handleClick).toHaveBeenCalledTimes(1); // Hívás ellenőrzése
  });
});

Az ügyféloldali tesztelési stratégia az alkalmazás architektúrájától, a használt technológiáktól és az igényektől függ. Általában a tesztelési piramis alkalmazandó: több egységteszt, kevesebb integrációs és E2E teszt. A manuális tesztelés továbbra is fontos a használhatóság és a vizuális aspektusok ellenőrzésében, amelyeket nehéz teljes mértékben automatizálni.

Mondjon a kliens oldali tesztelésről az alkalmazásban.