Vizual və komponent testing

Funksional test "düymə işləyirmi?" sualına cavab verir; vizual test "düymə düzgün GÖRÜNÜRMÜ?" sualına. CSS regressiyaları (sürüşmüş layout, itmiş ikon, oxunmaz kontrast) funksional testdən tam sağ çıxır — çünki DOM-da hər şey yerindədir.

Playwright-da mexanizm sadədir: await expect(page).toHaveScreenshot().

• İlk icrada baseline yaradılır və repo-da saxlanılır (__screenshots__ qovluğu)
• Sonrakı icralarda cari şəkil baseline ilə piksel-piksel müqayisə olunur
• Fərq varsa test sınır və üç fayl verilir: expected, actual, diff
• Dəyişiklik niyyətlidirsə: npx playwright test --update-snapshots

Mühüm nüans: baseline platformadan asılıdır. macOS-da yaradılan şəkil Linux CI-da şrift rendering-i səbəbindən sınacaq. Ona görə baseline-lar CI-ın işlədiyi mühitdə (adətən Docker) yaradılmalıdır — bu, mövzunun ən çox rast gəlinən tələsidir.

Vizual testlərin əsas problemi flakiness-dir — və səbəbləri proqnozlaşdırıla biləndir:

• Dinamik məzmun: tarix/saat, istifadəçi adı, sifariş nömrəsi, təsadüfi banner
• Animasiya və keçidlər — şəkil animasiyanın ortasında çəkilir
• Şəkil yüklənməsi — lazy loading səbəbindən bəzən görünür, bəzən yox
• Scrollbar, cursor, focus halqası

Müdafiə vasitələri:

• mask: [page.getByTestId('order-date')] — dinamik sahələri örtür (üstünü rənglə doldurur)
• animations: 'disabled' — CSS animasiyalarını dayandırır (Playwright default olaraq bunu edir)
• maxDiffPixelRatio: 0.01 — kiçik anti-aliasing fərqlərinə tolerantlıq
• Bütün səhifə əvəzinə komponent şəkli: expect(locator).toHaveScreenshot() — sahə nə qədər kiçikdirsə, o qədər stabildir
• Şəbəkə mock-u ilə datanı sabitləmək — ən etibarlı yol

Strategiya məsləhəti: bütün səhifələri vizual test etmək tələdir — saxlanma xərci partlayır və komanda --update-snapshots-u düşünmədən basmağa başlayır (bu, vizual testin ölümüdür). Dizayn sistemi komponentləri və 5-10 kritik səhifə kifayətdir.

Komponent testing — ayrıca qatdır: bütöv tətbiqi işə salmadan tək React/Vue/Svelte komponentini brauzerdə render edib test etmək (@playwright/experimental-ct-react).

Dəyəri: E2E-dən qat-qat sürətlidir, komponentin bütün variantlarını (disabled, loading, error, uzun mətn, boş data) asanlıqla gəzir və fail dəqiq lokallaşır. Dizayn sistemi və ya çoxlu yenidən istifadə olunan komponenti olan layihələrdə xüsusilə güclüdür.

Məhdudiyyət: real inteqrasiyanı, routing-i, backend ilə əlaqəni yoxlamır — E2E-ni əvəz etmir, piramidanın orta qatını genişləndirir.

İnterview üçün kifayət olan mövqe: nə olduğunu, nə vaxt dəyər verdiyini və nəyi əvəz etmədiyini bilmək. Playwright-ın component testing dəstəyi hələ experimental-dır — bunu bilmək və demək dürüstlük siqnalıdır.