E2E testlər nə üçündür və piramidada yeri

End-to-end (E2E) test bütün tətbiqi real brauzerdə işə salır və istifadəçinin etdiyini edir: səhifəni açır, mətn yazır, klik edir, nəticəni oxuyur. Unit testlərin görmədiyi problemləri tutur: skriptin yanlış yolu, handler-i olmayan forma, başqa element tərəfindən örtülmüş düymə.

Test piramidası: çoxlu unit, bir qədər integration, az sayda E2E test
Test piramidası: çoxlu unit, bir qədər integration, az sayda E2E test
NövNəyi yoxlayırSürətTipik alət
UnitBir funksiya və ya sinifmillisaniyələrvitest
IntegrationBir neçə modul və ya DB birlikdəyüzlərlə millisaniyəvitest, supertest
E2EBrauzerdə bütün tətbiqsaniyələr@playwright/test

Səviyyə yuxarı qalxdıqca test real vəziyyətə yaxınlaşır, amma bahalaşır: daha yavaş olur, sazlaması çətinləşir və kodunuzla əlaqəsi olmayan səbəblərdən daha tez-tez uğursuz olur. Forma buna görə piramidadır. Məntiqin hər budağını unit testlərlə yoxlayın (bax: Vitest ilə unit testlər), E2E testləri isə bir neçə kritik yol üçün saxlayın: qeydiyyat, səbətə əlavə etmə, ödəniş.

💡 E2E üçün yaxşı namizəd pul gətirən və ya itirən, yaxud sınması nəzərə çarpan ssenaridir. Tooltip rəngi belə ssenari deyil.

Playwright-in quraşdırılması və konfiqurasiyası

Playwright Chromium, Firefox və WebKit-i idarə edən test icraçısıdır (@playwright/test). Onu dev asılılığı kimi qurun və brauzeri yükləyin:

bash
npm init -y
npm i -D @playwright/test http-server
npx playwright install chromium

Konfiqurasiya playwright.config.js faylındadır:

javascript
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  retries: process.env.CI ? 2 : 0,
  forbidOnly: !!process.env.CI,
  use: {
    baseURL: 'http://localhost:4173',
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'npx http-server ./public -p 4173 -s',
    url: 'http://localhost:4173',
    reuseExistingServer: !process.env.CI,
  },
});
  • testDir — *.spec.js fayllarının qovluğudur.
  • webServer testlərdən əvvəl tətbiqi qaldırır və url cavab verənə qədər gözləyir; reuseExistingServer lokal olaraq artıq işləyən dev serveri istifadə etməyə imkan verir.
  • baseURL testlərdə page.goto('/') yazmağa imkan verir.
  • retries uğursuz testi yenidən işlədir, amma yalnız CI-də. forbidOnly kimsə kodda test.only qoyubsa, build-i uğursuz edir.