Görsel Regresyon Testi Nedir ve Nasıl Uygulanır?

Görsel regresyon testi, geleneksel fonksiyonel testlerin gözden kaçırdığı hataları yakalar. Bir düğme tıklanabilir olmasına rağmen ekran dışında konumlanmış olabilir. Bir CSS güncellemesi metni okunaksız hale getirebilir. Bir düzen değişikliği mobil cihazlarda duyarlı tasarımınızı bozabilir. Görsel Regresyon Testi, uygulamanızın zaman içindeki ekran görüntülerini karşılaştırarak, istenmeyen görsel değişiklikleri kullanıcılarınıza ulaşmadan önce otomatik olarak algılar.

Bu kılavuz, görsel regresyon testi tekniklerine pratik bir bakış ve Playwright kullanarak basitleştirilmiş bir uygulamasını sunar, böylece UI hatalarını hemen yakalamaya başlayabilirsiniz.

Görsel Regresyon Testi Nedir?

Görsel Regresyon Testi, uygulamanızın kullanıcı arayüzünün (UI) ekran görüntülerini yakalayan ve bunları temel (baseline) görüntülerle karşılaştıran otomatik bir tekniktir. Yeni bir ekran görüntüsü, bir düzen kayması, renk değişikliği, yazı tipi sorunu veya bozuk bir resim nedeniyle temel görüntüden farklılık gösterdiğinde, test başarısız olur ve farklılıkları vurgular.

İşlevselliği doğrulayan geleneksel testlerin aksine, Görsel Regresyon Testi görünümü ve düzeni doğrular. Şu gibi soruları yanıtlar:

• Ödeme düğmesi hala sayfanın üst kısmında mı görünüyor?
• Üstbilgi yüksekliği beklenmedik bir şekilde değişti mi?
• Resimler doğru en boy oranında mı oluşturuluyor?
• CSS güncellemesinden sonra mobil düzen bozuluyor mu?

Görsel Regresyon Testi Neden Önemlidir?

Görsel Regresyon Testi'nin önemi, şu senaryoları düşündüğünüzde netleşir:

1. CSS Yeniden Düzenleme: Yinelenen stilleri birleştirirsiniz ve aniden giriş formu iPad ekranlarında altbilginin üzerine biner.
2. Üçüncü Taraf Bileşenleri: Bir pazarlama ekibi, harekete geçirici mesaj düğmenizi ekran dışına iten yeni bir analiz betiği ekler.
3. Duyarlı Kesme Noktaları: Görünüşte zararsız bir dolgu değişikliği, mobil navigasyon menüsünü bozar.
4. Tarayıcılar Arası Oluşturma: Firefox bir flexbox'ı Chrome'dan farklı şekilde oluşturarak düzen kaymalarına neden olur.
5. API Odaklı UI: Arka uç API'niz, yanlışlıkla bir tablo sütununu genişleterek düzeni bozan yeni bir alan ekler.

Görsel Regresyon Testi olmadan bu hatalar üretime ulaşır ve kullanıcıları hayal kırıklığına uğratır. Bu testle, düzeltmenin ucuz olduğu geliştirme aşamasında yakalarsınız.

Görsel Regresyon Testi Teknikleri

1. Manuel Ekran Görüntüsü Karşılaştırması

En basit yaklaşım: geliştiriciler değişikliklerden önce ve sonra ekran görüntülerini manuel olarak yakalar ve görsel olarak karşılaştırır.

Artıları: Kurulum maliyeti yok
Eksileri: Sıkıcı, hataya açık, ölçeklenemez

2. DOM Karşılaştırması

Araçlar, piksel mükemmelliğinde ekran görüntüleri yerine DOM yapısını karşılaştırır.

Artıları: Küçük piksel farklılıklarına karşı daha az kırılgan
Eksileri: CSS oluşturma sorunlarını gözden kaçırır

3. Piksel Piksel Karşılaştırma

Araçlar tam sayfa ekran görüntüleri yakalar ve her pikseli karşılaştırır.

Artıları: Tüm görsel değişiklikleri yakalar
Eksileri: Dinamik içerikten (reklamlar, zaman damgaları) kaynaklanan yanlış pozitifler

4. Görsel Yapay Zeka Karşılaştırması

Modern araçlar, gürültüyü göz ardı ederken anlamlı değişiklikleri belirlemek için yapay zeka kullanır.

Artıları: Akıllı algılama, daha az yanlış pozitif
Eksileri: Yapılandırma gerektirir, belirli bir maliyeti var

Pratik Kılavuz: Playwright ile Görsel Regresyon Testi

Playwright kullanarak Görsel Regresyon Testi'ni uygulamada göstermek için basit bir proje oluşturalım.

Adım 1 — Projeyi Oluşturun

Bir Node.js projesi başlatın:

mkdir visual-regression-demo && cd visual-regression-demo
npm init -y
npm install --save-dev @playwright/test
npx playwright install

Bu yapıyı oluşturun:

project/
├── images/
│   ├── pic1.jpg
│   ├── pic2.jpg
│   ├── pic3.jpg
│   └── pic4.jpg
├── tests/
│   └── visual.spec.js
├── index.html
└── package.json

package.json dosyasına ekleyin:

{
  "scripts": {
    "test": "playwright test",
    "test:update": "playwright test --update-snapshots"
  }
}

Adım 2 — Basit Bir HTML Sayfası Oluşturun

index.html dosyasını oluşturun:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Görsel Regresyon Demoyu</title>
  <style>
    .gallery { display: flex; flex-wrap: wrap; gap: 10px; }
    .gallery img { width: 200px; height: 200px; object-fit: cover; }
  </style>
</head>
<body>
  <h1>Ürün Galerisi</h1>
  <div class="gallery">
    <img src="images/pic1.jpg" alt="Ürün 1">
    <img src="images/pic2.jpg" alt="Ürün 2">
    <img src="images/pic3.jpg" alt="Ürün 3">
    <img src="images/pic4.jpg" alt="Ürün 4">
  </div>
</body>
</html>

Sayfayı sunun: python -m http.server 8000 veya Node.js statik sunucu kullanın.

Adım 3 — Playwright Görsel Testini Yazın

tests/visual.spec.js dosyasını oluşturun:

const { test, expect } = require('@playwright/test');

test.describe('Görsel Regresyon Testleri', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:8000');
  });

  test('ana sayfa temel çizgiyle eşleşiyor', async ({ page }) => {
    // Tam sayfa ekran görüntüsü al
    await expect(page).toHaveScreenshot('homepage.png', {
      fullPage: true,
      threshold: 0.2, // Küçük farklılıklara izin ver
    });
  });

  test('galeri düzeni duyarlı', async ({ page }) => {
    // Mobil görünümü test et
    await page.setViewportSize({ width: 375, height: 667 });
    await expect(page).toHaveScreenshot('mobile-homepage.png');
  });
});

Adım 4 — Çalıştırın ve Temel Ekran Görüntülerini Oluşturun

İlk çalıştırma (temel çizgileri oluşturur):

npm run test:update

Bu, bir __snapshots__ klasöründe homepage.png ve mobile-homepage.png dosyalarını oluşturur.

Adım 5 — Testleri Başarıyla Çalıştırın

Şimdi testleri normal şekilde çalıştırın:

npm test

Şunu görmelisiniz: 2 geçti ✅

Adım 6 — Görsel Bir Hatayı Zorlayın

index.html dosyasını düzenleyerek ve bir resmin tekrarını çoğaltarak düzeni bozun:

<img src="images/img3.webp" alt="Image 3">
<img src="images/img3.webp" alt="Image 4">

Şimdi, test html sayfasında yinelenen bir resim olmalıdır.

Testleri tekrar çalıştırın:

npm test

Şunu göreceksiniz: Düzen değişikliğini gösteren farklı resimlerle 2 başarısız oldu.

Değişiklikleri "test-results" klasörüne göz atarak ayrıntılı olarak görüntüleyebilirsiniz.

Kırmızı renkle vurgulanan alan, değiştirilen alanı gösterir. Test sonuçları aşağıdaki gibi görünmelidir:

Tamamlandıktan sonra, yaptığınız değişiklikler kasıtlıysa değişikliği geri alabilir veya aşağıdaki komutu kullanarak anlık görüntüleri güncelleyebilirsiniz:

npm run test:update

Apidog API Odaklı Görsel Testlerde Nasıl Yardımcı Olur?

Görsel Regresyon Testi, kök neden bir API sorunu olduğunda genellikle başarısız olur. Arka ucunuz hatalı veri veya yanlış resim URL'leri döndürürse, UI görsel olarak bozulur. Apidog, API'lerinizin işleme için doğru verileri sağladığından emin olur.

UI'yı Etkileyen API Yanıtlarını Test Etme

# Ürün galerisi API'si için Apidog testi
Test: GET /api/products
When: "featured" kategorisiyle gönderilen istek
Oracle 1: Yanıt 4 ürün içeriyor
Oracle 2: Her ürünün geçerli resim URL'si var (200 durumu)
Oracle 3: Resim URL'leri CDN etki alanını kullanır
Oracle 4: Yanıtta bozuk resim bağlantısı yok

UI Bileşenleri İçin API Şemasını Doğrulama

// Apidog şema doğrulaması UI bozulmalarını önler
Test: Ürün API Şeması
Oracle: Yanıt ProductCard şemasıyla eşleşiyor
  - id: dize (gerekli)
  - name: dize (en fazla 50 karakter)
  - image_url: URL biçimi
  - price: sayı (pozitif)

API, fiyat değerini sayı yerine dize olarak döndürürse, UI'nız fiyatı doğru şekilde işleyemeyebilir. Apidog, görsel düzeni bozmadan önce bunu yakalar.

UI Üzerindeki API Performans Etkisini İzleme

Test: GET /api/products - Performans
When: 4 ürünle istek
Oracle 1: Yanıt süresi < 500ms
Oracle 2: Resim CDN her biri < 200ms içinde yanıt verir

Yavaş API'ler, resimlerin geç yüklenmesine neden olarak görsel atlamalar oluşturur. Apidog, API'lerin UI'nızı hızlı tutan performans bütçelerini karşıladığından emin olur.

API Sözleşme Testi Görsel Regresyonları Önler

API sözleşmeniz değiştiğinde (yeni alan, kaldırılan alan), Apidog bunu işaretler:

// Apidog sözleşme testi
Test: Ürün API Sürüm 2
Oracle: Yeni "badge" alanı isteğe bağlıdır, UI için bozulma yaratmaz

Bu, API, ön ucunuzun henüz işlemediği bir alan eklediğinde "tanımsız" metnin UI'nızda görünmesini engeller.

Görsel Regresyon Testi İçin En İyi Uygulamalar

1. Kararlı Test Ortamı: Tutarlı veri kullanın ve animasyonları devre dışı bırakın
2. Eşik Ayarı: Yanlış pozitifleri önlemek için piksel farkı eşiklerini (0.1-0.3) ayarlayın
3. Hedefli Test: Her şeyi test etmeden önce kritik sayfaları (ana sayfa, ödeme) test edin
4. Duyarlı Kapsam: Mobil, tablet ve masaüstü görünüm alanlarını test edin
5. Dinamik İçeriği Maskeleme: Ekran görüntülerinden zaman damgalarını, reklamları ve rastgele içeriği gizleyin
6. Temel Çizgileri Kasıtlı Olarak Güncelleyin: Anlık görüntüleri güncellemeden önce farklılıkları gözden geçirin
7. CI/CD'de Çalıştırın: Apidog gibi araçlarla görsel testleri işlem hattınıza entegre edin

Sıkça Sorulan Sorular

S1: Görsel regresyon testi, fonksiyonel testin yerini alabilir mi?

Cevap: Hayır. Görsel Regresyon Testi, fonksiyonel testleri tamamlar. Düzen sorunlarını yakalar, ancak fonksiyonel testler davranışı ve API doğruluğunu doğrular. Her ikisini de kullanın.

S2: Zaman damgaları gibi dinamik içeriği nasıl hallederim?

Cevap: Playwright'ın mask seçeneğini kullanın veya ekran görüntüsü almadan önce dinamik içeriği statik değerlerle değiştirin. Apidog ayrıca API'lerin testler için tutarlı veri döndürüp döndürmediğini doğrulayabilir.

S3: Görsel testler kararsız mıdır?

Cevap: Ortamı kontrol etmezseniz olabilir. Animasyonları devre dışı bırakın, tutarlı veri kullanın ve uygun eşikleri ayarlayın. Apidog, API'lerin öngörülebilir veri döndürmesini sağlayarak yardımcı olur.

S4: Her sayfayı görsel olarak test etmeli miyim?

Cevap: Önce kritik kullanıcı yollarına odaklanın. Her şeyi test etmek bakım yükü oluşturur. Yüksek trafiğe sahip sayfaları ve bileşenleri önceliklendirin.

S5: Görsel hatam CSS ile ilgiliyse Apidog nasıl yardımcı olur?

Cevap: Birçok görsel hata, API veri değişikliklerinden (eksik alanlar, yanlış türler) kaynaklanır. Apidog, API şemalarını ve yanıtlarını doğrulayarak, verilerle ilgili görsel bozulmaları UI'nıza ulaşmadan önce önler.

Sonuç

Görsel Regresyon Testi, kod değişikliklerinin istenmeyen sonuçlarına karşı güvenlik ağınızdır. Fonksiyonel testler düğmelerin hala çalıştığını doğrularken, görsel testler bu düğmelerin kullanıcıların beklediği yerde göründüğünden emin olur. Bu ayrım, kullanıcı deneyimi ve marka tutarlılığı için kritik öneme sahiptir.

Playwright örneği, görsel testin ne kadar erişilebilir hale geldiğini göstermektedir. Yalnızca birkaç satır kodla, farklı görünüm alanlarında ekran görüntüleri yakalayabilir ve karşılaştırabilir, böylece üretimden önce düzen bozulmalarını yakalayabilirsiniz. Anahtar, küçük başlamak, test ortamınızı stabilize etmek ve testleri sürekli olarak çalıştırmaktır.

Modern uygulamalar giderek daha fazla API odaklıdır, bu da görsel hataların genellikle veri sorunlarıyla başladığı anlamına gelir. Apidog, API'lerinizin UI'nızın güvenilir bir şekilde işleyebileceği tutarlı, doğru biçimlendirilmiş veriler sunmasını sağlayarak resmi tamamlar. API'ler ve görsel testler birlikte çalıştığında, işlevsellik, performans ve görünüm olmak üzere tam kapsamlı bir doğrulama elde edersiniz—hepsi otomatik olarak doğrulanır.

Bugün en kritik kullanıcı akışlarınıza görsel testler ekleyerek başlayın. Bir testin üretimde sizi utandıracak bir düzen bozulmasını ilk yakaladığında, onsuz nasıl yazılım gönderdiğinizi merak edeceksiniz.