AWS CloudWatch Canaries ile Görsel Regresyon Testi

Görsel regresyon testi, bir uygulamanın kullanıcı arayüzünde (UI) meydana gelen istenmeyen değişiklikleri tespit etmek için kritik bir süreçtir. Geleneksel fonksiyonel testler butonların çalışıp çalışmadığını kontrol edebilirken, bir butonun kaybolduğunu, yanlış renkte olduğunu veya başka bir elementin altında kaldığını her zaman fark edemezler. İşte bu noktada AWS CloudWatch Synthetics Canaries devreye girer.

Görsel Regresyon Testi Nedir?

Görsel regresyon testi, uygulamanızın ekran görüntülerini (screenshot) alır ve bunları daha önce onaylanmış "temel" (baseline) ekran görüntüleriyle karşılaştırır. Eğer iki görüntü arasında belirli bir eşiğin üzerinde fark varsa, test başarısız olur. Bu, CSS değişiklikleri, bozuk layout'lar veya eksik görseller gibi sorunları yakalamak için mükemmeldir.

AWS CloudWatch Canaries ile Nasıl Yapılır?

AWS CloudWatch Canaries, kullanıcı trafiğini simüle eden yapılandırılabilir script'lerdir (Node.js veya Python). Puppeteer veya Selenium kullanarak web uygulamanızla etkileşime girerler. Görsel test için genellikle syn-nodejs-puppeteer runtime'ı tercih edilir.

Adım 1: Canary Oluşturma

AWS Konsolu üzerinden CloudWatch servisine gidin ve "Synthetics Canaries" bölümünden "Create Canary" butonuna tıklayın. "Visual Monitoring" blueprint'ini seçebilir veya kendi script'inizi yazabilirsiniz.

Adım 2: Script Hazırlama

Aşağıda, basit bir görsel karşılaştırma yapan örnek bir Node.js (Puppeteer) Canary script'i bulunmaktadır:

const synthetics = require('Synthetics');
const log = require('SyntheticsLogger');

const pageLoadBlueprint = async function () {
    // URL'yi belirleyin
    const url = "https://example.com";

    let page = await synthetics.getPage();
    
    // Sayfaya git
    await synthetics.executeStep('GoToUrl', async function (timeoutInMillis = 30000) {
        await page.goto(url, {waitUntil: ['domcontentloaded', 'networkidle0'], timeout: timeoutInMillis});
    });

    // Ekran Görüntüsü Al ve Karşılaştır
    // 'visual-test' ismiyle bir screenshot alır ve önceki baseline ile karşılaştırır
    await synthetics.executeStep('VisualCheck', async function () {
        await synthetics.takeScreenshot('visual-test', 'main-page');
    });
};

exports.handler = async () => {
    return await pageLoadBlueprint();
};

Bu script çalıştığında, CloudWatch ilk çalışmada alınan ekran görüntüsünü "baseline" olarak kaydeder. Sonraki çalışmalarda alınan yeni ekran görüntüsü bu baseline ile karşılaştırılır.

Adım 3: Farklılıkları İnceleme

Eğer bir görsel fark tespit edilirse, CloudWatch Synthetics konsolunda test başarısız olarak işaretlenir. Detaylara girdiğinizde, Baseline, Current ve Diff (Fark) görüntülerini yan yana görebilirsiniz. Farklılıklar genellikle kırmızı ile vurgulanır, böylece sorunun nerede olduğunu hemen anlayabilirsiniz.

İpuçları ve En İyi Uygulamalar

• Dinamik İçerik: Sayfanızda sürekli değişen içerikler (reklamlar, tarih/saat, döviz kuru vb.) varsa, bunları test sırasında gizlemek veya maskelemek için Puppeteer script'inizde DOM manipülasyonu yapın.
• Eşik Değerleri (Threshold): Bazen render farklılıklarından dolayı %100 eşleşme olmayabilir. CloudWatch ayarlarından küçük farkları göz ardı etmek için bir eşik değeri belirleyebilirsiniz.
• Farklı Cihazlar: Canary'nizi farklı viewport boyutlarında (mobil, masaüstü) çalışacak şekilde yapılandırarak responsive tasarımı da test edin.

Sonuç

AWS CloudWatch Canaries, altyapı kurulumu gerektirmeden güçlü görsel regresyon testleri yapmanızı sağlar. Bu sayede, kodunuzu production ortamına taşımadan önce UI hatalarını yakalayabilir ve kullanıcılarınıza her zaman kusursuz bir deneyim sunabilirsiniz.

<div class="toc"> <ul> <li><a href="#gorsel-regresyon-testi-nedir">Görsel Regresyon Testi Nedir?</a></li> <li><a href="#aws-cloudwatch-canaries-ile-nasil-yapilir">AWS CloudWatch Canaries ile Nasıl Yapılır?</a></li> <li><a href="#sonuc">Sonuç</a></li> </ul> </div>

Kaynak / Source: https://awsfundamentals.com/blog/visual-regression-testing-with-aws-cloudwatch-canaries