Pastāstiet par lietotnes klienta daļas testēšanu…

Klienta daļas testēšana (frontenda testēšana) ir vērsta uz lietotāja saskarnes un tās mijiedarbības pareizas pārbaudi. Galvenais mērķis ir pārliecināties, ka lietojumprogramma izskatās, uzvedas un darbojas pareizi no galīgā lietotāja skatpunkta dažādās ierīcēs un pārlūkprogrammās.

Klienta daļas testēšanas veidi:

Vizuālā testēšana (Visual Testing): Pārbauda saskarnes elementu izskatu, atbilstību maketiem un dizainam, nav pārklāšanos, pārvietojumu un citu vizuālo defektu.
Funkcionālā testēšana (Functional Testing): Pārbauda visu interaktīvo elementu (pogu, formu, saiti u.c.) un biznesa loģikas pareizību, kas īstenota klienta pusē.
Krosbāzura pārlūkprogrammu testēšana (Cross-browser Testing): Pārbauda lietojumprogrammas attēlojumu un funkcionalitāti dažādās pārlūkprogrammās (Chrome, Firefox, Safari, Edge u.c.) un to versijās.
Krosplatformu testēšana (Cross-platform Testing): Pārbauda lietojumprogrammas darbību dažādās operētājsistēmās (Windows, macOS, Linux) un to versijās.
Veiktspējas testēšana (Performance Testing): Novērtē ielādes ātrumu, saskarnes reakciju, atmiņas un procesora izmantošanu klienta pusē.
Lietojamības testēšana (Usability Testing): Novērtē saskarnes vieglumu un intuitivitāti lietotājam, pārbauda atbilstību kopējiem UX/UI standartiem.
Pieejamības testēšana (Accessibility Testing): Pārbauda lietojumprogrammas atbilstību pieejamības standartiem (piemēram, WCAG) lietotājiem ar ierobežotām spējām.
Reaktīvas dizaina testēšana (Responsive Testing): Pārbauda pareizu lietojumprogrammas attēlojumu un darbību dažādu ekrāna izmēru ierīcēs (datoriem, planšetēm, mobilajiem telefoniem).
Drošības testēšana (Security Testing): Pārbauda, vai nav ievainojamību klienta pusē, piemēram, Cross-Site Scripting (XSS) vai Cross-Site Request Forgery (CSRF), lietotāja autentifikācija un autorizācija.

Automatizācijas rīki klienta daļas testēšanai:

E2E (End-to-End) un integrācijas testiem: Selenium, Cypress, Playwright.
Moduļu un komponentu testiem (atkarībā no framework): Jest, Mocha, Jasmine (JavaScript/TypeScript), Testing Library, Enzyme.
Vizuālajam testējumam: Applitools, Percy.
Veiktspējas testējumam: Lighthouse, WebPageTest.
Pieejamības testējumam: Axe DevTools, WAVE.

Piemērs Cypress testam:

// cypress/integration/example.spec.js
describe('Galvenās lapas testēšana', () => {
  beforeEach(() => {
    cy.visit('/'); // Pāreja uz galveno lapu
  });

  it('Lapas virsraksta pārbaude', () => {
    cy.title().should('eq', 'Lietojumprogrammas nosaukums'); // Pārlūkprogrammas cilnes virsraksta pārbaude
  });

  it('Galvenā elementa esamības pārbaude', () => {
    cy.get('h1').should('contain', 'Laipni lūdzam'); // H1 elementa ar noteiktu tekstu pārbaude
  });

  it('Pogas darbības pārbaude', () => {
    cy.get('button#myButton').click(); // Noklikšķināšana uz pogas ar ID 'myButton'
    cy.get('.success-message').should('be.visible'); // Veiksmīgas ziņas redzamības pārbaude
  });
});

Jest un React Testing Library piemērs React komponentam:

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

describe('Button komponenta testēšana', () => {
  it('Poga tiek attēlota ar pareizu tekstu', () => {
    render(<Button text="Klikšķini mani" />);
    const buttonElement = screen.getByText(/Klikšķini mani/i);
    expect(buttonElement).toBeInTheDocument(); // Elementa esamības pārbaude dokumentā
  });

  it('Klikšķa notikums izsauc funkciju', () => {
    const handleClick = jest.fn(); // Moka funkcija
    render(<Button text="Klikšķini mani" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Klikšķini mani/i);
    fireEvent.click(buttonElement); // Simulēts klikšķis
    expect(handleClick).toHaveBeenCalledTimes(1); // Pārbaude, vai funkcija tika izsaukta vienu reizi
  });
});

Klienta daļas testēšanas stratēģija ir atkarīga no lietojumprogrammas arhitektūras, izmantotajām tehnoloģijām un prasībām. Parasti tiek izmantota testēšanas piramīda: vairāk vienību testu, mazāk integrācijas un E2E testu. Rokas tests ir svarīgs, lai pārbaudītu lietošanas ērtumu un vizuālos aspektus, kurus ir grūti pilnībā aptvert ar automatizāciju.

Pastāstiet par lietotnes klienta daļas testēšanu.