Tətbiqin müştəri tərəfi testləri haqqında danışın…

İstifadəçi interfeysinin düzgün işləməsini və onunla qarşılıqlı əlaqəni yoxlamağa yönəldilmiş müştəri tərəfi testləri (ön tərəf testi). Əsas məqsəd - tətbiqin müxtəlif cihazlar və brauzerlərdə son istifadəçi baxış bucağından düzgün görünməsini, davranmasını və işləməsini təmin etmək.

Müştəri tərəfi testlərinin növləri:

Vizual Testlər: İnterfeys elementlərinin görünüşünü, maket və dizayna uyğunluğunu, örtüşmələri, kaymaları və digər vizual qüsurları yoxlama.
Funksional Testlər: Bütün interaktiv elementlərin (düymələr, formalar, linklər və s.) düzgün işləməsini və müştəri tərəfində həyata keçirilən biznes məntiqini yoxlama.
Kross-brauzer Testləri: Tətbiqin müxtəlif veb brauzerlərdə (Chrome, Firefox, Safari, Edge və s.) və onların versiyalarında göstərilməsi və funksionallığını yoxlama.
Kross-platforma Testləri: Tətbiqin Windows, macOS, Linux kimi müxtəlif əməliyyat sistemlərində və onların versiyalarında işləməsini yoxlama.
Performans Testləri: Səhifələrin yüklənmə sürətini, interfeys cavabını, yaddaş və prosessor istifadəsini qiymətləndirmək.
İstifadə rahatlığı Testləri: İstifadəçi üçün interfeysin asan və intuitiv olmasını, UX/UI standartlarına uyğunluğunu qiymətləndirmək.
Əlçatanlıq Testləri: Tətbiqin əlçatanlıq standartlarına (məsələn, WCAG) uyğunluğunu yoxlama.
Responsiv Testlər: Müxtəlif ekran ölçülü cihazlarda tətbiqin düzgün göstərilməsi və işləməsini yoxlama.
Təhlükəsizlik Testləri: Cross-Site Scripting (XSS) və Cross-Site Request Forgery (CSRF) kimi zəiflikləri, istifadəçi autentifikasiyası və icazəsini yoxlama.

Avtomatlaşdırma üçün alətlər:

E2E və inteqrasiya testləri üçün: Selenium, Cypress, Playwright.
Modullar və komponent testləri üçün (framework-ə görə): Jest, Mocha, Jasmine, Testing Library, Enzyme.
Vizual testlər üçün: Applitools, Percy.
Performans üçün: Lighthouse, WebPageTest.
Əlçatanlıq üçün: Axe DevTools, WAVE.

Cypress istifadə edilən test nümunəsi:

// cypress/integration/example.spec.js
describe('Əsas səhifənin testləri', () => {
  beforeEach(() => {
    cy.visit('/'); // Əsas səhifəyə keçid
  });

  it('Səhifə başlığını yoxlama', () => {
    cy.title().should('eq', 'Tətbiq adı'); // Brauzer nişanındakı başlıq
  });

  it('Əsas elementin mövcudluğunu yoxlama', () => {
    cy.get('h1').should('contain', 'Xoş gəlmisiniz'); // Xüsusi mətnlə h1 elementinin yoxlanması
  });

  it('Düymənin işləməsini yoxlama', () => {
    cy.get('button#myButton').click(); // 'myButton' id-li düyməni klikləmək
    cy.get('.success-message').should('be.visible'); // Uğurlu mesajının görünməsini yoxlama
  });
});

React komponenti üçün Jest və React Testing Library ilə test nümunəsi:

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

describe('Button komponentinin testləri', () => {
  it('Düymə düzgün mətnlə göstərilir', () => {
    render(<Button text="Məni kliklə" />);
    const buttonElement = screen.getByText(/Məni kliklə/i);
    expect(buttonElement).toBeInTheDocument(); // Elementin mövcudluğunu yoxlama
  });

  it('Klik hadisəsi çağırılır', () => {
    const handleClick = jest.fn(); // Mock funksiyası
    render(<Button text="Məni kliklə" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Məni kliklə/i);
    fireEvent.click(buttonElement); // Klikləməni simulyasiya etmək
    expect(handleClick).toHaveBeenCalledTimes(1); // Çağırılma sayını yoxlama
  });
});

Müştəri tərəfi test strategiyası tətbiqin memarlığından, istifadə olunan texnologiyalardan və tələblərdən asılıdır. Adətən, test piramidası tətbiq olunur: daha çox vahid testlər, daha az inteqrasiya və E2E testləri. Əl ilə test etmə də istifadə rahatlığı və vizual aspektlərin yoxlanması üçün vacibdir.

Tətbiqin müştəri tərəfi testləri haqqında danışın.