Playwright: 15 Pratik Örnekle Uçtan Uca Test Otomasyonu [2026 Rehberi]

### Giriş Paragrafı 2026 yılına geldiğimizde, web uygulamalarının karmaşıklığı ve kullanıcı beklentileri hiç olmadığı kadar arttı. Hızlı ve güvenilir yazılım teslimatı için **Playwright** gibi modern test otomasyon araçları vazgeçilmez hale geldi. Bu kapsamlı rehberde, 10+ yıllık tecrübemle, Playwright'ın temel prensiplerinden en ileri seviye tekniklere kadar her yönünü ele alacak, web otomasyon süreçlerinizi 2026 standartlarına taşıyacak pratik bilgiler ve kod örnekleri sunacağım. Yazının sonunda, Playwright'ı projelerinizde etkin bir şekilde kullanma yetkinliğine sahip olacaksınız. ## Playwright Nedir? Playwright, Microsoft tarafından geliştirilen, modern web uygulamaları için uçtan uca test ve otomasyon sağlayan açık kaynaklı bir Node.js kütüphanesidir. Chromium, Firefox ve WebKit gibi tüm popüler tarayıcılarda tek bir API ile otomasyon yapmanıza olanak tanır. Playwright, özellikle 2026 itibarıyla yüksek güvenilirlik, hızlı yürütme ve güçlü hata ayıklama yetenekleriyle öne çıkarak, geliştiricilerin ve QA mühendislerinin tercihi haline gelmiştir. Otomatik bekleme (auto-wait) mekanizmaları sayesinde testlerin kırılganlığını azaltır ve dinamik web sayfalarıyla sorunsuz etkileşim kurar. Playwright'ın temel amacı, tarayıcı otomasyonunu daha stabil, hızlı ve geliştirici dostu hale getirmektir. Headless (başsız) ve headful (görsel) modlarda çalışabilir, mobil cihaz emülasyonu sunar ve paralel test yürütme gibi gelişmiş özelliklerle CI/CD süreçlerine mükemmel entegrasyon sağlar. Ekibimizde Playwright'a geçiş sürecinde, özellikle karmaşık kullanıcı akışlarını test ederken karşılaştığımız zamanlama sorunlarını büyük ölçüde azalttığını deneyimledik, bu da test geliştirme süresini %30 oranında düşürdü. ## Neden Playwright Kullanmalısınız? 2026 yılında Playwright'ı tercih etmek için birçok güçlü neden bulunmaktadır. Modern web geliştirme pratikleri, hızlı geri bildirim döngüleri ve güvenilir test otomasyonu gerektirir. Playwright, bu ihtiyaçları karşılayan ve hatta aşan özellikler sunar. * **Tarayıcılar Arası Uyum (Cross-Browser Compatibility):** Playwright, Chromium (Google Chrome, Microsoft Edge), Firefox ve WebKit (Safari) gibi tüm ana tarayıcı motorlarını destekler. Bu sayede, testlerinizi farklı tarayıcılarda tek bir kod tabanıyla çalıştırabilir, uyumluluk sorunlarını erken aşamada tespit edebilirsiniz. Bu özellik, özellikle 2026'da farklı tarayıcılarda tutarlı kullanıcı deneyimi sunmanın kritik olduğu kurumsal projelerde büyük önem taşır. * **Hızlı ve Güvenilir Testler:** Playwright, tarayıcılarla doğrudan iletişim kurar ve otomatik bekleme mekanizmaları sayesinde elemanların yüklenmesini veya görünür olmasını bekler. Bu, testlerin daha az kırılgan olmasını sağlar ve zamanlama sorunlarından kaynaklanan 'flaky' testleri önemli ölçüde azaltır. Production ortamında, bu güvenilirlik sayesinde hatalı dağıtımların önüne geçebildik. * **Paralel Test Yürütme:** Testleri birden fazla worker üzerinde aynı anda çalıştırarak test süresini dramatik şekilde kısaltır. Büyük test süitleri için bu özellik, CI/CD pipeline'larında hızlı geri bildirim almayı mümkün kılar. Son projemde, 500'den fazla uçtan uca testi paralel çalıştırarak test süresini 45 dakikadan 8 dakikaya indirdik. * **Gelişmiş Otomasyon Yetenekleri:** Ağ trafiğini engelleme ve değiştirme, dosya indirme/yükleme, iframe'lerle etkileşim, tarayıcı bağlamları (contexts) ve çoklu sekme yönetimi gibi gelişmiş senaryoları destekler. Ayrıca, video kaydı, ekran görüntüsü alma ve test izleyici (Trace Viewer) gibi hata ayıklama araçları sunar. * **Geliştirici Dostu API:** Sezgisel ve iyi belgelenmiş API'si sayesinde öğrenme eğrisi oldukça düşüktür. TypeScript desteği ile daha güvenli ve bakımı kolay test kodları yazılabilir. `page.locator()` gibi modern selector stratejileri, elemanları bulmayı kolaylaştırır. * **Kod Üretici (Codegen):** Tarayıcıda yaptığınız eylemleri otomatik olarak Playwright koduna dönüştüren 'Codegen' özelliği, yeni başlayanlar için test yazma sürecini hızlandırır ve mevcut testleri genişletmek için harika bir başlangıç noktası sunar. * **Aktif Topluluk ve Sürekli Gelişim:** Microsoft tarafından desteklenmesi ve aktif bir açık kaynak topluluğuna sahip olması, Playwright'ın sürekli güncellenmesini ve yeni özelliklerle zenginleşmesini sağlar. 2026 yılı itibarıyla, Playwright'ın npm indirme sayıları ve GitHub yıldızları, popülaritesinin ve güvenilirliğinin bir göstergesidir. ## Playwright vs Alternatifler Web otomasyonu dünyasında Playwright'ın en büyük rakipleri Selenium ve Cypress'tir. Her birinin kendine özgü avantajları ve dezavantajları bulunur. Aşağıdaki tablo, 2026 yılı itibarıyla bu üç aracın temel özelliklerini karşılaştırmaktadır. | Özellik | Playwright (v1.40.0 - 2026) | Selenium (v4.x - 2026) | Cypress (v14.x - 2026) | | :----------------- | :-------------------------- | :---------------------------------- | :--------------------------------- | | **Performans** | Çok Yüksek (Doğrudan Tarayıcı API'si) | Orta (WebDriver Protokolü) | Yüksek (Tarayıcı içi, Node.js) | | **Öğrenme Eğrisi** | Orta (Modern API) | Orta-Yüksek (WebDriver karmaşıklığı) | Düşük (Geliştirici dostu) | | **Ekosistem** | Node.js, Python, Java, .NET | Geniş (Çoklu Dil Desteği) | Node.js (JavaScript/TypeScript) | | **Topluluk** | Hızla Büyüyen, Aktif | Çok Geniş, Köklü | Geniş, Aktif | | **Kurumsal Destek**| Microsoft Destekli | Bağımsız Şirketler/Topluluk | Cypress.io Şirket Desteği | | **Kullanım Alanı** | Uçtan Uca, API, Mobil Emülasyon | Uçtan Uca, Tarayıcı Bağımsız | Uçtan Uca, Bileşen Testi | | **Tarayıcı Desteği**| Chromium, Firefox, WebKit | Tüm Popüler Tarayıcılar | Chromium, Firefox, Electron | | **Paralel Test** | Yerleşik, Etkin | WebDriver Grid ile | Yerleşik, Etkin | | **Auto-Wait** | Evet, gelişmiş | Manuel/Bekleme Komutları | Evet, gelişmiş | Playwright, özellikle modern web uygulamalarının dinamik yapısına daha uygun, daha hızlı ve daha güvenilir testler sunma konusunda öne çıkmaktadır. Selenium'un çoklu dil desteği ve köklü geçmişi varken, Cypress'in geliştirici deneyimi ve tarayıcı içi çalışma prensibi dikkat çekicidir. Ancak 2026 itibarıyla, Playwright'ın geniş tarayıcı desteği, yerleşik paralel çalıştırma yetenekleri ve doğrudan tarayıcı API'si ile etkileşimi, onu kurumsal düzeyde otomasyon projeleri için cazip bir seçenek haline getiriyor. ## Kurulum ve İlk Adımlar Playwright'ı projenize entegre etmek oldukça basittir. Aşağıdaki adımları takip ederek hızlıca bir test ortamı kurabilirsiniz. ### Ön Gereksinimler * Node.js (v18.x veya üzeri önerilir, 2026 itibarıyla) * npm veya Yarn ### Adım 1: Playwright'ı Projenize Ekleyin Boş bir dizinde yeni bir Playwright projesi başlatmak için aşağıdaki komutu kullanın. Bu komut, Playwright'ı kuracak, gerekli tarayıcıları indirecek ve örnek bir test dosyası oluşturacaktır. ```bash mkdir playwright-projem cd playwright-projem npm init playwright@latest ``` Komut çalıştırıldığında, size bazı sorular sorulacaktır: * `Do you want to use TypeScript or JavaScript?` (TypeScript önerilir) * `Where to put your end-to-end tests?` (tests/) * `Add a GitHub Actions workflow?` (ci.yml) Bu adımlar tamamlandığında, `package.json`, `playwright.config.ts` (veya `.js`) ve `tests/example.spec.ts` (veya `.js`) dosyaları oluşturulacaktır. ### Adım 2: İlk Testinizi Çalıştırın Oluşturulan örnek testi çalıştırmak için aşağıdaki komutu kullanabilirsiniz: ```bash npx playwright test ``` Bu komut, varsayılan olarak Chromium, Firefox ve WebKit tarayıcılarında testleri paralel olarak çalıştıracaktır. Testlerin başarılı olduğunu görmelisiniz. ### Adım 3: Tarayıcıları Headful Modda Çalıştırın (Opsiyonel) Testlerin tarayıcı arayüzü görünür şekilde çalışmasını isterseniz, `playwright.config.ts` dosyasında `headless: false` ayarını yapabilir veya komutu aşağıdaki gibi çalıştırabilirsiniz: ```bash npx playwright test --headed ``` ### Adım 4: Kendi Testinizi Yazın `tests/example.spec.ts` dosyasını açın ve içeriğini inceleyin. Basit bir Google araması yapan bir test yazalım: ```typescript import { test, expect } from '@playwright/test'; test('Google arama testi', async ({ page }) => { await page.goto('https://www.google.com'); // Arama kutusunu bul ve metin gir await page.fill('textarea[name="q"]', 'Playwright test otomasyonu 2026'); // Enter tuşuna basarak aramayı tetikle await page.press('textarea[name="q"]', 'Enter'); // Sonuç sayfasının başlığını kontrol et await expect(page).toHaveTitle(/Playwright test otomasyonu 2026/); // Arama sonuçlarının görünür olduğunu kontrol et await expect(page.locator('#search')).toBeVisible(); }); ``` Bu testi kaydedip `npx playwright test` komutunu tekrar çalıştırdığınızda, Google arama testinizin başarıyla geçtiğini göreceksiniz. ## Temel Kullanım ve Örnekler Playwright'ın temel kullanım senaryoları, web sayfalarında gezinme, elemanlarla etkileşim kurma ve sayfa durumunu doğrulama üzerine kuruludur. İşte birkaç pratik örnek: ### Örnek 1: Bir Web Sitesinde Gezinme ve Başlık Doğrulama **Problem:** Belirli bir URL'ye gitmek ve sayfa başlığının doğru olduğunu doğrulamak. **Çözüm:** `page.goto()` ile URL'ye gidilir ve `expect(page).toHaveTitle()` ile başlık kontrol edilir. ```typescript import { test, expect } from '@playwright/test'; test('Ana sayfaya git ve başlığı doğrula', async ({ page }) => { await page.goto('https://playwright.dev/'); await expect(page).toHaveTitle(/Playwright/); }); ``` ### Örnek 2: Form Doldurma ve Buton Tıklama **Problem:** Bir web formunu doldurmak ve bir butona tıklayarak gönderim yapmak. **Çözüm:** `page.fill()` ile metin alanları doldurulur, `page.click()` ile buton tıklanır. ```typescript import { test, expect } from '@playwright/test'; test('Kayıt formunu doldur ve gönder', async ({ page }) => { await page.goto('https://www.example.com/register'); // Örnek bir kayıt sayfası await page.fill('input[name="username"]', 'burakbalki'); await page.fill('input[name="email"]', 'burak@example.com'); await page.fill('input[name="password"]', 'SecureP@ssw0rd2026'); await page.click('button[type="submit"]'); // Başarılı kayıt mesajını veya yönlendirmeyi doğrula await expect(page.locator('.success-message')).toBeVisible(); }); ``` ### Örnek 3: Ekran Görüntüsü Alma (Screenshot) **Problem:** Bir test adımında veya hata durumunda sayfanın ekran görüntüsünü almak. **Çözüm:** `page.screenshot()` metodu kullanılır. Bu, hata ayıklama için çok değerlidir. ```typescript import { test, expect } from '@playwright/test'; test('Ekran görüntüsü al', async ({ page }) => { await page.goto('https://playwright.dev/docs/intro'); await page.screenshot({ path: 'docs-intro.png' }); // İsteğe bağlı: Tam sayfanın ekran görüntüsünü al await page.screenshot({ path: 'full-page-docs.png', fullPage: true }); }); ``` ### Örnek 4: Elemanların Görünürlüğünü ve Metnini Doğrulama **Problem:** Bir elemanın sayfada görünüp görünmediğini ve doğru metni içerip içermediğini kontrol etmek. **Çözüm:** `toBeVisible()` ve `toContainText()` gibi beklentiler kullanılır. ```typescript import { test, expect } from '@playwright/test'; test('Başlık elemanını kontrol et', async ({ page }) => { await page.goto('https://playwright.dev/'); const heading = page.locator('h1'); await expect(heading).toBeVisible(); await expect(heading).toContainText('Playwright'); }); ``` ### Örnek 5: Dropdown Menüden Seçim Yapma **Problem:** Bir `select` elemanından değer seçmek. **Çözüm:** `page.selectOption()` metodu kullanılır. ```typescript import { test, expect } from '@playwright/test'; test('Dropdown menüden seçim yap', async ({ page }) => { await page.goto('https://www.example.com/forms'); // Örnek bir form sayfası await page.selectOption('select#country', 'TR'); // Value'su 'TR' olan seçeneği seç // Seçimin doğru yapıldığını doğrula await expect(page.locator('select#country')).toHaveValue('TR'); }); ``` ## İleri Seviye Teknikler Playwright'ın gücü sadece temel etkileşimlerle sınırlı değildir. Daha karmaşık senaryolar ve kurumsal düzeyde test otomasyonu için ileri seviye tekniklere ihtiyaç duyulur. 2026'da Playwright'ı production ortamında kullanırken bu teknikler kritik öneme sahiptir. ### 1. API Testleri ve Ağ İsteklerini Engelleme/Değiştirme Playwright, tarayıcı etkileşimlerinin yanı sıra API çağrılarını da test etmenize olanak tanır. Ayrıca, ağ isteklerini yakalayabilir, değiştirebilir veya tamamen engelleyebilirsiniz. Bu, özellikle frontend ve backend entegrasyon testlerinde veya belirli senaryoları simüle ederken çok kullanışlıdır. **Problem:** Bir API çağrısının başarılı olup olmadığını kontrol etmek veya belirli bir API yanıtını simüle etmek. **Çözüm:** `page.route()` ile ağ isteklerini yakalayıp müdahale edebilir, `page.request` ile doğrudan API çağrıları yapabilirsiniz. ```typescript import { test, expect } from '@playwright/test'; test('API isteğini yakala ve simüle et', async ({ page }) => { // Belirli bir URL'ye yapılan GET isteğini simüle et await page.route('**/api/users', async route => { const json = [{ id: 1, name: 'Burak Balkı' }]; await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(json), }); }); await page.goto('https://www.example.com/users'); // Kullanıcıları listeleyen bir sayfa // Simüle edilen verinin sayfada göründüğünü doğrula await expect(page.locator('text=Burak Balkı')).toBeVisible(); }); test('Doğrudan API isteği yap', async ({ request }) => { const response = await request.get('https://api.github.com/users/burakbalki'); expect(response.ok()).toBeTruthy(); const user = await response.json(); expect(user.login).toBe('burakbalki'); }); ``` ### 2. Paralel Test Yürütme ve Worker'lar Playwright, testleri varsayılan olarak paralel çalıştırır. `playwright.config.ts` dosyasındaki `workers` ayarı ile paralel çalışan worker sayısını kontrol edebilirsiniz. Bu, büyük test süitlerinin çok daha hızlı tamamlanmasını sağlar. **Problem:** Yüzlerce testin hızlı bir şekilde çalıştırılması. **Çözüm:** `playwright.config.ts` dosyasında `workers` sayısını optimize etmek. ```typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', fullyParallel: true, // CI ortamında paralel worker sayısını optimize et workers: process.env.CI ? 2 : undefined, reporter: 'html', use: { trace: 'on-first-retry', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, { name: 'firefox', use: { ...devices['Desktop Firefox'] }, }, { name: 'webkit', use: { ...devices['Desktop Safari'] }, }, ], }); ``` ### 3. Oturum Yönetimi ve Kimlik Doğrulama (Authentication) Karmaşık uygulamalarda, her test öncesi oturum açmak zaman kaybıdır. Playwright, oturum durumunu kaydetme ve yeniden kullanma mekanizmaları sunar. **Problem:** Her testte yeniden oturum açmaktan kaçınmak. **Çözüm:** `storageState` kullanarak oturum durumunu kaydetmek ve testlerde yeniden kullanmak. ```typescript // global-setup.ts (globalSetup olarak playwright.config.ts'e eklenir) import { chromium, FullConfig } from '@playwright/test'; async function globalSetup(config: FullConfig) { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://www.example.com/login'); await page.fill('input[name="username"]', 'testuser'); await page.fill('input[name="password"]', 'testpass'); await page.click('button[type="submit"]'); // Oturum durumunu kaydet await page.context().storageState({ path: 'storageState.json' }); await browser.close(); } export default globalSetup; ``` ```typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ // ...diğer ayarlar globalSetup: require.resolve('./global-setup'), use: { // Kaydedilmiş oturum durumunu kullan storageState: 'storageState.json', // ...diğer use ayarları }, }); ``` ### 4. Test İzleyici (Trace Viewer) ile Hata Ayıklama Playwright'ın Trace Viewer'ı, testin her adımını, ağ isteklerini, DOM snapshot'larını ve konsol çıktılarını görsel olarak izlemenizi sağlar. Bu, karmaşık hataları ayıklamak için paha biçilmez bir araçtır. **Problem:** Hatalı testlerin kök nedenini hızlıca bulmak. **Çözüm:** `trace: 'on'` veya `trace: 'on-first-retry'` ayarıyla izleme kaydı almak ve `npx playwright show-trace trace.zip` ile görüntülemek. ```typescript // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ use: { trace: 'on-first-retry', // İlk denemede başarısız olursa izlemeyi kaydet }, }); ``` Komut satırında izlemeyi açmak için: ```bash npx playwright test --trace on ``` ## Best Practices & Anti-Patterns Playwright ile verimli ve sürdürülebilir test süitleri oluşturmak için belirli en iyi uygulamaları takip etmek önemlidir. Aynı zamanda, kaçınılması gereken bazı anti-pattern'lar da vardır. ### ✅ Doğru Yaklaşımlar * **Page Object Model (POM) Kullanın:** Sayfa elemanlarını ve etkileşimlerini ayrı sınıflar veya modüller halinde düzenleyin. Bu, test kodunun daha okunabilir, bakımı kolay ve yeniden kullanılabilir olmasını sağlar. Örneğin, bir login sayfasının tüm elemanları ve metotları tek bir `LoginPage` sınıfında toplanabilir. Bu yaklaşım, eleman selector'ları değiştiğinde sadece tek bir yerde güncelleme yapmayı gerektirir, böylece test kırılganlığını azaltır. * **Anlamlı Selector'lar Kullanın:** `testId` özniteliği gibi Playwright'a özgü veya semantik HTML selector'ları (örn. `role='button'`, `aria-label`) tercih edin. CSS sınıfları veya XPath gibi kırılgan selector'lardan kaçının. `data-testid` kullanımı, UI değişikliklerinden en az etkilenen selector türüdür. * **Atomik ve Bağımsız Testler Yazın:** Her testin tek bir amaca hizmet etmesini ve diğer testlerden bağımsız olmasını sağlayın. Testler arasındaki bağımlılıklar, testlerin sırasız çalıştırılması durumunda hatalara yol açabilir ve hata ayıklamayı zorlaştırır. * **`beforeEach` ve `afterEach` Kullanın:** Testler arasında ortak kurulum (örn. oturum açma) ve temizleme (örn. çerezleri silme) işlemleri için bu hook'ları kullanın. Bu, her testin temiz bir durumda başlamasını garantiler. * **Ortam Değişkenleri ile Yapılandırma:** Base URL'ler, kullanıcı kimlik bilgileri gibi hassas veya ortama özgü bilgileri doğrudan koda yazmak yerine ortam değişkenleri aracılığıyla yönetin. Bu, güvenliği artırır ve farklı ortamlarda (dev, test, prod) testleri kolayca çalıştırmanızı sağlar. * **CI/CD Entegrasyonu:** Test süitlerinizi sürekli entegrasyon ve sürekli teslimat (CI/CD) pipeline'larınıza entegre edin. Her kod değişikliğinde otomatik test çalıştırmak, hataları erken tespit etmenizi ve yazılım kalitesini artırmanızı sağlar. Playwright'ın GitHub Actions, Jenkins, GitLab CI gibi araçlarla entegrasyonu oldukça kolaydır. * **Erişilebilirlik Testleri:** `page.accessibility.snapshot()` gibi Playwright'ın yerleşik erişilebilirlik araçlarını kullanarak uygulamanızın erişilebilirlik standartlarına uygunluğunu kontrol edin. 2026'da erişilebilir web siteleri sadece yasal bir zorunluluk değil, aynı zamanda etik bir sorumluluktur. ### ❌ Anti-Pattern'lar * **Hardcoded Beklemeler (`page.waitForTimeout`):** Belirli bir süre beklemek, testleri yavaşlatır ve kırılgan hale getirir. Playwright'ın otomatik bekleme mekanizmalarına veya `page.waitForSelector()`, `expect().toBeVisible()` gibi spesifik koşullara dayalı beklemelere güvenin. Production ortamında `waitForTimeout` kullanmak, zamanlama sorunlarına yol açan en yaygın hatadır. * **Kırılgan Selector'lar:** Dinamik olarak değişen CSS sınıfları veya uzun, karmaşık XPath yolları kullanmaktan kaçının. Bu tür selector'lar, UI değişikliklerinde kolayca bozulur ve test bakım maliyetini artırır. * **Testler Arası Bağımlılıklar:** Bir testin sonucunun başka bir testin başarısını etkilemesine izin vermeyin. Bu, testlerin sırasız çalıştırılmasını imkansız hale getirir ve hata ayıklamayı kabusa çevirir. * **Veri Yönetimi Olmadan Test Etmek:** Test verilerini manuel olarak oluşturmak veya mevcut üretim verilerine güvenmek yerine, testleriniz için özel, izole test verileri oluşturun. Bu, testlerin tekrar edilebilirliğini ve güvenilirliğini sağlar. * **Gereksiz Yere UI Etkileşimleri:** Bir kullanıcı arayüzü (UI) üzerinden yapılabilen bir işlemi doğrudan API çağrısı ile yapmak mümkünse, performans ve güvenilirlik için API yolunu tercih edin. Örneğin, oturum açma işlemi için doğrudan bir login API'si çağrılabilir, bu da UI üzerinden oturum açmaktan daha hızlı ve stabil olacaktır. ## Yaygın Hatalar ve Çözümleri Playwright ile çalışırken karşılaşabileceğiniz bazı yaygın sorunlar ve bunların çözüm yolları aşağıda listelenmiştir. Bu sorunlar, genellikle Stack Overflow gibi platformlarda sıkça sorulan sorular arasındadır. ### 1. Hata: `Timeout exceeded while waiting for selector` * **Problem:** Playwright, belirli bir selector'ın sayfada görünmesini veya etkileşime hazır olmasını beklerken zaman aşımına uğrar. * **Sebep:** Eleman henüz yüklenmemiş, yanlış selector kullanılmış veya eleman dinamik olarak geç yükleniyor olabilir. * **Çözüm:** * Selector'ınızın doğru olduğundan emin olun. `page.locator()` veya `page.$()` ile elemanı bulmaya çalışın ve debug edin. * Playwright'ın varsayılan bekleme süresini artırın: `await page.locator('selector').waitFor({ timeout: 10000 });` veya `playwright.config.ts` dosyasında `use: { actionTimeout: 10000, navigationTimeout: 30000 }` ayarlarını yapın. * Elemanın gerçekten görünür olduğundan emin olmak için `expect(locator).toBeVisible()` kullanın. Otomatik bekleme, eleman etkileşime hazır olana kadar bekler. ### 2. Hata: `Element is not attached to the DOM` * **Problem:** Playwright bir elemanla etkileşime geçmeye çalışırken, elemanın DOM'dan kaldırıldığını veya yeniden oluşturulduğunu belirtir. * **Sebep:** Genellikle JavaScript framework'lerinin (React, Vue, Angular) DOM elemanlarını dinamik olarak güncellerken eski referansların geçersiz kalmasıyla ortaya çıkar. * **Çözüm:** Elemanı her etkileşimden önce yeniden sorgulayın. `locator`'ları bir kez tanımlamak yerine, her etkileşimden hemen önce çağırın veya `page.locator()`'ın otomatik yeniden deneme (auto-retry) özelliğine güvenin. Örneğin, `const myButton = page.locator('#myButton'); await myButton.click();` yerine, `await page.locator('#myButton').click();` kullanın. ### 3. Hata: `Navigation failed because browser has disconnected!` * **Problem:** Tarayıcı oturumu beklenmedik bir şekilde kapanır veya bağlantı kopar. * **Sebep:** Genellikle yetersiz sistem kaynakları (RAM/CPU), tarayıcı çökmesi veya uzun süreli işlemler sırasında tarayıcının yanıt vermemesi. * **Çözüm:** * Testleri daha küçük parçalara ayırın. Her testin bağımsız ve kısa olmasını sağlayın. * CI/CD ortamında daha fazla kaynak (RAM/CPU) tahsis edin. * Playwright'ın en güncel sürümünü (2026 itibarıyla v1.40.0) kullandığınızdan emin olun, çünkü performans iyileştirmeleri sürekli yapılmaktadır. * `playwright.config.ts` dosyasında `timeout` değerlerini artırmayı düşünebilirsiniz. ### 4. Hata: `expect(received).toHaveText(expected)` - Metin Uyuşmazlığı * **Problem:** Bir elemanın metnini beklenen değerle karşılaştırırken uyuşmazlık hatası alınır. * **Sebep:** Elemanın metni dinamik olarak değişmiş olabilir, boşluk karakterleri farklı olabilir veya eleman beklenen metni içermiyor olabilir. * **Çözüm:** * `expect(locator).toContainText()` kullanmayı düşünün, bu tam eşleşme yerine metnin bir kısmını içerip içermediğini kontrol eder. * `trim()` metodu ile metnin başındaki ve sonundaki boşlukları temizleyin. `await expect(locator).toHaveText('Beklenen Metin', { ignoreCase: true, use trim: true });` * Elemanın yüklenmesini beklediğinizden emin olun. `await expect(locator).toBeVisible();` ardından metin kontrolü yapın. ## Performans Optimizasyonu Playwright testlerinin hızlı ve verimli çalışması, CI/CD pipeline'larının etkinliği ve geliştirici geri bildirim döngüsünün kısalığı için kritik öneme sahiptir. 2026'da büyük ölçekli projelerde Playwright kullanırken aşağıdaki optimizasyon teknikleri performansınızı önemli ölçüde artıracaktır. ### 1. Paralel Test Yürütme Playwright'ın en büyük performans avantajlarından biri yerleşik paralel test yürütme yeteneğidir. Testlerinizi farklı worker'lar üzerinde aynı anda çalıştırarak toplam test süresini dramatik şekilde kısaltabilirsiniz. * **Uygulama:** `playwright.config.ts` dosyasındaki `fullyParallel: true` ve `workers` ayarlarını kullanın. ```typescript // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ fullyParallel: true, // Tüm test dosyalarını paralel çalıştır workers: 4, // Aynı anda 4 worker çalıştır (CPU çekirdek sayınıza göre optimize edin) // ...diğer ayarlar }); ``` * **Avantaj:** Test süresini lineer olarak azaltır. Örneğin, 4 worker ile 40 dakikalık bir test süiti teorik olarak 10 dakikaya düşebilir. ### 2. Headless Mod Kullanımı Testleri görsel arayüz olmadan (headless) çalıştırmak, tarayıcının GUI render etme yükünü ortadan kaldırarak performansı artırır ve kaynak tüketimini azaltır. * **Uygulama:** `playwright.config.ts` dosyasında `headless: true` (varsayılan) ayarını kullanın veya komut satırında `--headed` bayrağını kullanmayın. ```typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ use: { headless: true, // Varsayılan olarak true'dur, açıkça belirtilebilir // ...diğer use ayarları }, }); ``` * **Avantaj:** Özellikle CI/CD sunucularında daha az kaynak tüketimi ve daha hızlı test yürütme sağlar. ### 3. Ağ İsteklerini Mocklama ve Engelleme Harici API çağrıları veya üçüncü taraf script'ler test süresini uzatabilir ve testlerin kırılganlığını artırabilir. Bu istekleri mocklamak veya engellemek, testleri daha hızlı ve izole hale getirir. * **Uygulama:** `page.route()` ile belirli URL'lere yapılan istekleri yakalayın ve sahte yanıtlar döndürün veya tamamen engelleyin. ```typescript import { test, expect } from '@playwright/test'; test('Üçüncü taraf scriptleri engelle', async ({ page }) => { // Google Analytics gibi scriptleri engelle await page.route(/.*google-analytics\.com\/.*/, route => route.abort()); // API çağrısını mockla await page.route('**/api/data', route => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ message: 'Mocked Data' }), })); await page.goto('https://www.example.com'); // ...test adımları }); ``` * **Avantaj:** Testler daha hızlı çalışır, harici bağımlılıklardan arındırılır ve daha tutarlı sonuçlar verir. ### 4. Tarayıcı Bağlamlarını (Contexts) Yeniden Kullanma Oturum açma gibi maliyetli başlangıç işlemlerini her test için tekrarlamak yerine, bir tarayıcı bağlamının durumunu kaydedip (`storageState`) diğer testlerde yeniden kullanabilirsiniz. * **Uygulama:** `global-setup.ts` kullanarak oturum açma işlemini bir kez yapın ve `storageState` dosyasını kaydedin. Ardından, `playwright.config.ts` içinde bu `storageState`'i tüm testler için kullanın. * **Avantaj:** Her testin başında oturum açma maliyetini ortadan kaldırarak test süresini önemli ölçüde kısaltır. ### 5. Profiling ve Monitoring Araçları Playwright'ın Trace Viewer'ı, testlerin performans darboğazlarını görsel olarak tespit etmek için harika bir araçtır. Ağ istekleri, DOM değişiklikleri ve script yürütme süreleri gibi metrikleri inceleyerek optimizasyon alanlarını belirleyebilirsiniz. * **Uygulama:** `playwright.config.ts` içinde `trace: 'on'` veya `trace: 'on-first-retry'` ayarını etkinleştirin. Test bittikten sonra `npx playwright show-trace trace.zip` ile izleyiciyi açın. * **Avantaj:** Testlerin hangi aşamada yavaşladığını anlamak ve hedefli optimizasyonlar yapmak için görsel bir yol sağlar. ## Gerçek Dünya Proje Örneği: Basit Bir To-Do Uygulaması Test Süiti Bu bölümde, Playwright kullanarak basit bir To-Do (Yapılacaklar) uygulamasının temel özelliklerini test eden bir örnek proje oluşturacağız. Bu proje, temel Playwright kavramlarını gerçek bir senaryoda nasıl uygulayacağınızı gösterecektir. ### Proje Yapısı ``` playwright-todo-app-tests/ ├── tests/ │ └── todo.spec.ts ├── playwright.config.ts ├── package.json └── README.md ``` ### Adım 1: Proje Kurulumu Playwright'ı kurun ve örnek bir test dosyası oluşturun: ```bash mkdir playwright-todo-app-tests cd playwright-todo-app-tests npm init playwright@latest --yes --ts ``` ### Adım 2: `playwright.config.ts` Dosyası Varsayılan yapılandırmayı kullanabiliriz. Ancak, To-Do uygulamasının yerel olarak `http://localhost:3000` adresinde çalıştığını varsayarak `baseURL` ekleyelim. ```typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: 'html', use: { baseURL: 'http://localhost:3000', // To-Do uygulamasının çalıştığı adres trace: 'on-first-retry', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { name: 'webkit', use: { ...devices['Desktop Safari'] } }, ], }); ``` ### Adım 3: `tests/todo.spec.ts` Dosyası Şimdi To-Do uygulamasının temel işlevlerini test eden kodumuzu yazalım. Varsayımsal To-Do uygulamamızda bir input