Angular Academy · Ders

Uçtan Uca Teste Genel Bakış

Uçtan uca testlerin rolünü anlayın

Uçtan Uca Teste Genel Bakış, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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.

Uçtan Uca Test Ne Anlama Gelir

Uçtan uca (E2E) testler, uygulamanızı gerçek bir kullanıcının yaptığı şekilde çalıştırır: uygulamayı gerçek bir tarayıcıda başlatır, sayfalarda gezinir, düğmelere tıklar, formlara yazar ve görünür olanları doğrular. Yalnızca tek birimin değil, tüm yığının birlikte çalıştığını doğrular.

Test Piramidi

Sağlıklı bir test paketinde çok sayıda hızlı birim testi, daha az sayıda entegrasyon testi ve yavaş ama değeri yüksek az sayıda E2E testi bulunur. E2E en üstte yer alır: test başına en geniş kapsamı sağlar; ancak çalıştırılması ve bakımı da en maliyetli test türüdür.

Birim: yalıtılmış bir işlev/bileşen
Entegrasyon: birlikte çalışan birkaç birim
E2E: uçtan uca çalışan uygulama

E2E'nin Birim Testlerinin Yakalayamadığı Sorunları Yakalaması

E2E testleri yalnızca gerçek parçalar birbirine bağlandığında görülebilen sorunları yakalar: yönlendirme hataları, bozuk API entegrasyonu, dağıtımdan sonra eksik DOM, bir düğmeyi gizleyen CSS veya kimlik doğrulama yönlendirme döngüsü. Taklit edilmiş bağımlılıklarla yapılan birim testleri başarılı olurken gerçek uygulama bozuk olabilir.

Angular ve E2E Geçmişi

Eski Angular sürümleri E2E için Protractor'ı sunuyordu. Protractor kullanımdan kaldırıldı ve yeni projelerden çıkarıldı. Günümüzde Angular CLI, üçüncü taraf bir E2E çalıştırıcısı seçmenize olanak tanır; Playwright ve Cypress en popüler seçeneklerdir.

Playwright Neden Kullanılır

Playwright, Microsoft tarafından geliştirilen modern ve hızlı bir E2E çerçevesidir. Chromium, Firefox ve WebKit'i yönetir, öğeler için otomatik bekleme yapar, testleri yeni tarayıcı bağlamlarıyla yalıtır ve mükemmel hata ayıklama araçlarına sahiptir. Bu kursta Playwright kullanılmaktadır.

Angular'a Playwright Ekleme

Playwright'ı kendi yükleyicisiyle iskelet olarak oluşturabilirsiniz. Bu işlem bir playwright.config.ts dosyası ve örnek bir test klasörü oluşturur.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Bir E2E Testinin Yapısı

Bir E2E testi uygulamayı başlatır, kullanıcı eylemlerini gerçekleştirir ve sayfayı doğrular. Akış şöyledir: hazırla (gezin), uygula (etkileşim kur), doğrula (görünür sonucu kontrol et).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E Gerçek Bir Sunucuda Çalışır

E2E için Angular uygulamanızın gerçekten çalışıyor olması gerekir. Genellikle yapılandırma ng serve komutunu çalıştırır (veya üretim derlemesini sunar) ve testleri baseURL ile bu URL'ye yönlendirir; bunun için bir webServer girdisi kullanılır.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

E2E Paketlerini Küçük ve Kritik Tutun

E2E testleri yavaş olabildiği ve kararsız sonuçlar üretebildiği için yalnızca kritik kullanıcı yolculuklarını kapsayın: oturum açma, ödeme ve ana başarılı akış. Ayrıntılı uç durumları, daha hızlı ve güvenilir çalıştıkları birim ve entegrasyon testlerine taşıyın.

Kararsızlık ve Belirleyicilik

En büyük E2E sorunu, aralıklı olarak başarısız olan testlerdir. Sabit sleep gecikmelerinden kaçının; Playwright'ın otomatik beklemeli doğrulamalarına güvenin. Her çalıştırmanın bilinen bir durumdan başlaması için test verilerini denetleyin.

E2E ve Bileşen Testi

Angular bileşen testleri (TestBed), bir bileşeni yapay bir ortamda denetler. E2E, dağıtılmış uygulamayı gerçek bir tarayıcıda denetler. Birbirlerini tamamlarlar: hızlı mantık/DOM kontrolleri için TestBed'i, tüm ürünün çalıştığına güvenmek için E2E'yi kullanın.

Hızlı Kontrol

E2E'yi birim testlerinden ayıran nedir?

Özet

E2E testleri, birim testlerinin kaçırdığı entegrasyon ve yönlendirme hatalarını yakalamak için tüm uygulamayı gerçek bir tarayıcıda çalıştırır. Test piramidinin en üstünde yer alırlar: az sayıdadır, yavaştır ve değerleri yüksektir. Angular projelerinde artık sunucunuzu başlatan ve kritik kullanıcı yolculuklarını yürüten Playwright gibi çalıştırıcılar kullanılır.

Sıkça Sorulan Sorular

“Uçtan Uca Teste Genel Bakış” dersi ücretsiz mi?

Evet — “Uçtan Uca Teste Genel Bakış” 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.

“Uçtan Uca Teste Genel Bakış” dersinde ne öğreneceğim?

Uçtan uca testlerin rolünü anlayı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 1. dersidir.

“Uçtan Uca Teste Genel Bakış” 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