Angular Academy · Ders

Sürekli Tümleştirme Entegrasyonu

Uçtan uca testleri sürekli tümleştirme ortamında çalıştırın

Sürekli Tümleştirme Entegrasyonu, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

E2E Testlerini CI'da Çalıştırmanın Nedeni

E2E testleri, her gönderme veya çekme isteğinde otomatik olarak çalıştırıldıklarında en değerlidir. Sürekli Entegrasyon (CI), gerilemeleri birleştirilmeden önce yakalar; böylece bozuk bir oturum açma akışı fark edilmeden üretim ortamına ulaşmaz.

CI'ın E2E Çalıştırmak İçin Gerektirdikleri

CI işi; bağımlılıkları kurmalı, Playwright tarayıcılarını kurmalı, Angular uygulamasını derlemeli veya sunmalı ve ardından testleri başsız modda çalıştırmalıdır. CI makinelerinde görüntü bulunmadığından testler varsayılan olarak başsız modda çalışır.

CI'da Tarayıcıları Kurma

Tarayıcılar deponuza gönderilmez. Bunları işletim sistemi bağımlılıklarıyla birlikte Playwright kurucusunu kullanarak işlem hattına kurun.

npm ci
npx playwright install --with-deps

Uygulamayı Playwright'ın Başlatmasını Sağlama

webServer yapılandırması, Playwright'a testlerden önce uygulamanızı başlatmasını ve testlerden sonra kapatmasını söyler. CI'da her zaman yeni bir sunucu başlatılması için reuseExistingServer: false ayarlayın.

// playwright.config.ts
export default {
  webServer: {
    command: 'ng serve --configuration production',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
};

Bir GitHub Actions İş Akışı

Tipik bir iş akışı kodu alır, Node'u kurar, bağımlılıkları ve tarayıcıları kurar, ardından test paketini çalıştırır.

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

Başsız Mod ve CI Bayrakları

Playwright, CI ortam değişkeni aracılığıyla CI'ı otomatik olarak algılar ve ayarlamalar yapar: başarısız testleri yeniden dener, test.only kullanımını engeller ve daha fazla çalışanı dikkatli biçimde kullanır. Yeniden deneme sayısını açıkça da ayarlayabilirsiniz.

export default {
  retries: process.env.CI ? 2 : 0,
  forbidOnly: !!process.env.CI,
};

HTML Raporunu Yayımlama

Playwright bir HTML raporu oluşturur. Başarısızlıkların çalışma sonrasında incelenebilmesi için raporu, izler ve ekran görüntüleriyle birlikte bir CI yapıtı olarak yükleyin.

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

Başarısızlıkta İzleri Yakalama

İzleri yalnızca ilk yeniden denemede kaydedilecek şekilde yapılandırın. Böylece çalışmalar hızlı kalırken hata ayıklama için her başarısızlığın tam bir tekrarını elde edersiniz.

export default {
  use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};

Hız İçin Parçalama

Büyük test paketleri --shard ile paralel makinelere bölünebilir. Her CI işi bir parçayı çalıştırarak toplam duvar saati süresini azaltır.

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

CI'ı Hızlandırmak İçin Önbelleğe Alma

Kurulumların derleme süresine hâkim olmasını önlemek için çalışmalar arasında node_modules ile Playwright tarayıcı ikililerini önbelleğe alın. Çoğu CI sağlayıcısı, kilit dosyanızı anahtar olarak kullanan bir önbellekleme eylemi sunar.

Derlemeyi Doğru Şekilde Başarısız Kılma

Herhangi bir test başarısız olduğunda Playwright sıfır olmayan bir kodla çıkar; bu da CI'ın işi başarısız olarak işaretlemesini ve birleştirmeyi engellemesini sağlar. Bu çıkış kodunu || true ile yok saymayın; aksi takdirde bozuk testler sessizce başarılı olur.

Hızlı Kontrol

CI'da tarayıcıları ne kurar?

Özet

Bağımlılıkları ve tarayıcıları (playwright install --with-deps) kurarak, webServer'ın uygulamayı başlatmasına izin vererek ve CI farkındalıklı yeniden denemelerle başsız modda çalıştırarak her göndermede E2E testlerini çalıştırın. HTML raporunu ve izleri yapıt olarak yükleyin, hız için parçalama yapın ve sıfır olmayan çıkış kodunun hatalı birleştirmeleri engellemesine izin verin.

Sıkça Sorulan Sorular

“Sürekli Tümleştirme Entegrasyonu” dersi ücretsiz mi?

Evet — “Sürekli Tümleştirme Entegrasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Sürekli Tümleştirme Entegrasyonu” dersinde ne öğreneceğim?

Uçtan uca testleri sürekli tümleştirme ortamında çalıştırın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Sürekli Tümleştirme Entegrasyonu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön