Playwright ile E2E

Playwright, Microsoft tarafindan geliştirilen modern bir uctan uca test otomasyon aracidir. Chromium, Firefox ve WebKit uzerinde tutarlı API sunar; otomatik bekleme, ag intercept, çoklu sekme ve mobil emulasyon gibi ozelliklerle Selenium'a kiyasla daha az flaky test uretmeye odaklanir. Bu makalede Playwright ile E2E test yazmanin temellerinden ileri seviye paralel çalıştırma, sayfa nesne modeli (POM), test verisi yönetimi ve CI pipeline entegrasyonuna kadar tüm kritik konulari ele aliyoruz.

Playwright neden tercih edilir?

Auto-waiting: Element tiklanabilir veya görünür olana kadar Playwright bekler; manuel explicit wait ihtiyacini azaltir. Trace viewer: Başarısız testin adim adim ekran goruntusu, network ve DOM snapshot'i incelenir. Browser context izolasyonu: Her test bagimsiz cookie ve storage ile baslar. Codegen: Tarayici uzerinde kayıt ile baslangic test iskeleti uretilir; refactor sarttir.

Kurulum ve proje yapisi

npm init playwright@latest# veyadotnet add package Microsoft.Playwright.NUnit

Onerilen klasor yapisi:

• tests/e2e/specs: Test dosyalari, kullanıcı senaryosu odaklı.
• tests/e2e/pages: Page Object siniflari.
• tests/e2e/fixtures: Custom test fixture'lar (auth, api setup).
• tests/e2e/data: JSON veya factory ile test verisi.
• playwright.config.ts: Timeout, retry, reporter, baseURL.

Ilk test: anlamli assertion

import { test, expect } from '@playwright/test';test('kullanici basarili giris yapabilir', async ({ page }) => {await page.goto('/login');await page.getByLabel('E-posta').fill('[email protected]');await page.getByLabel('Sifre').fill('SecurePass1!');await page.getByRole('button', { name: 'Giris yap' }).click();await expect(page.getByRole('heading', { name: 'Hos geldiniz' })).toBeVisible();});

Role ve label tabanli locator'lar CSS xpath'ten daha dayaniklidir. Kullanıcının gordugu metin ve erisilebilirlik agaci uzerinden seçim yapilir; bu Testing Library felsefesi ile uyumludur.

Sayfa nesne modeli (POM)

POM, sayfa etkilesimlerini siniflara kapsuller. Spec dosyasi senaryoyu anlatir; detay POM'da gizlenir. Tekrarlayan locator stringleri tek yerde güncellenir.

export class LoginPage {constructor(private page: Page) {}async goto() {await this.page.goto('/login');}async login(email: string, password: string) {await this.page.getByLabel('E-posta').fill(email);await this.page.getByLabel('Sifre').fill(password);await this.page.getByRole('button', { name: 'Giris yap' }).click();}}

POM asiri buyumesin: her sayfa icin ayri sınıf, ortak header/footer icin component object pattern. POM icinde assertion az tutulur; spec'te expect tercih edilir ki test amaci okunabilsin.

Fixture ve authentication

Tekrarlayan login adimlari custom fixture ile cozulur. Storage state kaydedilip sonraki testlerde yuklenir; her testte login formu doldurmaya gerek kalmaz.

test.use({ storageState: 'auth/user.json' });test('profil guncellenir', async ({ page }) => {await page.goto('/profile');// Oturum acik baslar});

Global setup script'i bir kez login olur, storageState dosyaya yazar. CI'da test kullanıcısı seed verisi ile oluşturulur; şifre secret'tan okunur.

Ag kontrolu ve mock

page.route ile API cagrilari intercept edilir. üçüncü parti analitik veya odeme servisi devre disi birakilir; deterministik yanıt doner. Hata senaryosu testi icin 500 status simule edilir.

Mock asiri kullanımı E2E degerini dusurur; yalnizca kontrol disi bağımlılıklar icin uygulanmali. Kendi API'niz gerçek ortamda test edilmeli.

Paralel çalıştırma

Playwright varsayilan olarak dosyalar arasi paralel çalışır. Ayni dosya icinde testler serial olabilir (test.describe.configure). Worker sayisi CI CPU'ya gore ayarlanir. Veri cakismasi onlemek icin her test benzersiz kullanıcı veya transaction kullanır.

Sharding: npx playwright test --shard=1/4 ile pipeline matrisinde bolunur. Toplam sure duser; artefact birlestirme raporlama araci ile yapilir.

Flaky test onleme

1. Locator'da bekleme yerine getByRole ve auto-wait kullan.
2. test.setTimeout ve actionTimeout makul degerlerde tut.
3. Animasyonlari CSS ile test ortaminda kapat.
4. Rastgele veri yerine seed'li factory.
5. Retry yalnizca CI'da sinirli (örneğin 2); lokalde kapali.

Visual regression

toHaveScreenshot ile piksel karsilastirmasi yapilir. Ilk kosuda golden screenshot oluşturulur; değişiklikler review gerektirir. Font ve anti-aliasing farklari false positive uretebilir; threshold ayarlanir. Storybook + Playwright component test alternatifidir.

CI entegrasyonu

GitHub Actions ornegi: checkout, Node kurulum, playwright install --with-deps, test, upload trace on failure. Artefact olarak playwright-report ve test-results saklanir. Başarısız testte trace indirilip Playwright trace viewer'da acilir.

Docker image mcr.microsoft.com/playwright ile tutarlı tarayici surumu sağlanır. .NET projelerinde Microsoft.Playwright.NUnit veya xUnit entegrasyonu ayni prensiplerle çalışır.

API ve E2E hibrit

request fixture ile API uzerinden veri hazirlanir; UI adimlari azalir. Örnek: API ile siparis oluştur, UI'da yalnizca durum guncellemesini dogrula. Test suresi ve flaky riski duser.

Raporlama ve triage

HTML reporter ekip icin okunabilir. JUnit XML Azure DevOps veya Jenkins ile entegre olur. Flaky testler icin --repeat-each veya dedicated quarantine job. Test basligi ve tag (@smoke, @regression) filtreleme sağlar.

Güvenlik

Test credential'lari repo'da tutulmaz. Environment-specific baseURL kullanılır. Production'a karşı E2E yalnizca read-only smoke ve onayli slot'ta çalışır. OTP ve captcha test ortaminda devre disi veya sabit kod ile bypass (yalnizca test env).

Bakım ve ölçeklendirme

Test sayisi arttikca POM refactor, ortak helper ve tag tabanli secici çalıştırma sarttir. Olum kriteri: 3 aydır ignore edilen veya urunden dusen akis. Her release oncesi smoke suite zorunlu; tam regresyon nightly.

Component test ve Storybook entegrasyonu

@playwright/experimental-ct ile bilesenler tarayici disi degil gerçek render motorunda test edilir. E2E'den daha hızlı, birim testten daha gercekci. Form validasyonu, modal ve tab gibi izole widget'lar component testte yakalanir; yalnizca tam akis E2E'de kalir. Storybook story'leri test fixture olarak import edilebilir.

Mobil ve responsive test

playwright.config icinde Mobile Chrome ve Mobile Safari project tanimlanir. Viewport ve touch emulation ile responsive kirilma noktalari test edilir. Native mobil uygulama icin Appium ayri katmandir; web-view hibrit icin Playwright context yeterli olabilir.

Accessibility E2E kontrolleri

@axe-core/playwright ile otomatik erisilebilirlik taramasi E2E akisina eklenir. Klavye-only navigasyon testi Tab ve Enter ile kritik akis boyunca calistirilir. A11y ihlali smoke suite'te build'i kirabilir; severity esigine gore.

Performans ve network idle

page.waitForLoadState('networkidle') agir sayfalarda timeout üretir; spesifik API response bekleme tercih edilir. Performance API ile LCP veya custom metrik assertion deneysel olarak eklenebilir; flaky riski yüksek oldugundan nightly job'a konur.

Cross-browser matrisi

Chromium, Firefox ve WebKit paralel project olarak tanimlanir. Tarayici-spesifik bug'lar erken yakalanir. WebKit Safari regresyonu macOS agent gerektirebilir; bulut grid (BrowserStack, Sauce Labs) alternatifidir. Smoke suite tek tarayicida, tam regresyon uc tarayicida kosulabilir.

Test verisi ve GDPR

E2E test verisi sentetik olmali; gerçek kullanıcı PII kullanılmaz. Test sonrasi cleanup script veya TTL ile veri silinir. Staging ortamina üretim dump yuklenmez. Audit log testleri ayri izole tenant'ta çalışır.

Test steps ve rapor okunabilirligi

test.step API ile uzun senaryolar mantiksal bloklara ayrilir. HTML raporunda hangi adimda patladigi anlasilir; triage suresi kisalir. Her step icin anlamli baslik verilir: login, create order, verify invoice gibi is akisi yansitilir. Uzun spec dosyalarinda step kullanmamak hata ayiklama maliyetini artirir.

Environment ve baseURL yönetimi

playwright.config.ts icinde projects staging ve local icin ayri baseURL tasir. Environment variable PLAYWRIGHT_BASE_URL CI'da inject edilir. Ayni spec farklı ortamlarda çalışır; hard-coded URL anti-pattern'dir. Örnek degerler dokumantasyonda aciklanir; gerçek credential repo dışında tutulur.

UI mode ve debug deneyimi

npx playwright test --ui ile test adim adim izlenir. Time travel DOM durumunu geriye sarar. Flaky reproduce icin ayni test --repeat-each=20 lokal kosulur. Trace zip dosyasi ekip paylasiminda triage hizlandirir; screenshot ve network bir arada incelenir.

Locale ve timezone testleri

context locale ayari ile tarih formati dogrulanir. Europe/Istanbul timezone ile fatura kesim tarihi E2E'de assert edilir. SaaS urunlerde çoklu dil smoke testi tag ile filtrelenir. Unicode ve RTL layout ayri spec dosyasinda tutulabilir; karakter seti regresyonu erken yakalanir.

Playwright modern E2E icin güçlü bir temel sunar. Doğru locator stratejisi, POM organizasyonu, fixture ile auth yönetimi ve CI'da trace ile hızlı triage başarı icin kritik uygulamalardir.