CI/CD Pipeline (Boru Hatları)'nıza Görsel Testleri Entegre Etme Rehberi

Modern yazılım geliştirme döngülerinde (SDLC) manuel QA testleri yavaş, pahalı ve hataya açıktır. Özellikle sürekli teslimat (Continuous Delivery) kültürüne sahip takımların günde onlarca kez "Production" ortamına kod gönderdiği senaryolarda güvenliği sağlamanın tek yolu CI/CD Boru Hatlarına (Pipeline) otomatik görsel testleri entegre etmektir.

Bu rehberde, GitHub Actions veya GitLab ile Crawlens Visual Testing otomasyonunu birleştirerek hatalı (bugged) kodun müşterinin karşısına çıkmasını nasıl "hard-stop" ile engelleyebileceğinizi adım adım inceleyeceğiz.

1. CI/CD Görsel Test Mimarisi Nasıl Çalışır?

Görsel testlerin CI/CD sürecindeki görevi basittir: Her Pull Request (PR) açıldığında veya kod Main branch'ine merge edildiğinde devreye girerek, tasarımsal bir gerileme (Visual Regression) olup olmadığını kontrol etmek.

Akış şu şekilde işler:

1. Commit & Build: Bir geliştirici kod değişikliğini uzak sunucuya iter (push) ve temel testler / build (örn: npm run build) başlar.
2. Preview (Staging) Deployment: Vercel, Netlify veya kendi Kubernetes kümeniz (cluster) o anki koda özel geçici bir URL oluşturur.
3. Visual Check (Crawlens DOM): CI/CD pipeline'ınız, bu eşsiz URL'i Crawlens API'sine "Bunu Test Et" komutuyla gönderir.
4. Hata Yakalama (Fail Fast): Eğer Crawlens, bir önceki stabil sürüme (Baseline) göre Sepet butonunun kaydığını veya renginin bozulduğunu tespit ederse, GitHub/GitLab'e bir "Fail" (Başarısız) sinyali döner.
5. Deployment İptali: "Fail" sinyali alan CI/CD boru hattı, kodun canlıya çıkmasını (Production Deploy) anında iptal eder.

2. GitHub Actions Entegrasyonu Örneği

Süreci otomatize etmek, GitHub Actions üzerinde son derece kolaydır. Crawlens CLI (Komut Satırı Arayüzü) veya hazır GitHub Action paketleri kullanılarak birkaç satır yaml koduyla entegrasyon sağlanabilir.

name: Crawlens Visual Test
on: [pull_request]

jobs:
  visual-testing:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Await Preview URL
        # Vercel veya benzeri bir platformdan staging URL'i alınır
        id: wait_for_preview

      - name: Run Crawlens Visual Test
        uses: crawlens/github-action@v1
        with:
          api-token: ${{ secrets.CRAWLENS_API_TOKEN }}
          project-id: 'proj_xyz123'
          test-url: ${{ steps.wait_for_preview.outputs.url }}
          baseline-branch: 'main'

Yukarıdaki akış, kodun sadece fonksiyonel (Unit/E2E) olarak değil, insan gözü (Visual) perspektifinden de doğrulanmasını sağlar.

3. Otomatik Hata Raporlama ve Onay (Approval Flow)

Visual test "Fail" (Başarısız) döndüğünde, süreç tıkanmaz. Crawlens botu otomatik olarak o Pull Request'in altına kayan piksellerin Diff (Fark) görüntüsünün olduğu bir yorum bırakır. Geliştirici veya QA mühendisi, bu görsel farkın kasıtlı (yeni bir tasarım denemesi) olduğunu onaylarsa, Crawlens üzerinden "Accept Baseline" (Temeli Kabul Et) yapar ve CI/CD kaldığı yerden yeşile dönerek üretime (Production) devam eder.

Sonuç

Otomasyonsuz bir sürekli teslimat (Continuous Delivery) felakete davetiyedir. Bir e-ticaret sitesi veya B2B SaaS platformu yönetiyorsanız, GitHub Actions veya GitLab ardışık düzenlerinize Görsel Test (Visual Regression) eklemek, gece uykularınızı geri kazanmanın ve marka itibarınızı (UX) korumanın en sağlam yoludur. Kodunuzu Crawlens güvencesiyle canlıya alın.