Playwright: 7 Adımda Kapsamlı Başlangıç Rehberi [2026]

Web uygulamalarının geliştirilmesi ve bakımı, 2026 yılında her zamankinden daha karmaşık hale geldi. Kullanıcı deneyiminin (UX) ve performansın kritik önemi, geliştiricileri ve test mühendislerini daha sağlam, daha hızlı ve daha güvenilir test çözümleri aramaya itiyor. İşte tam da bu noktada, modern web uygulamaları için uçtan uca (E2E) test ve otomasyon aracı olarak öne çıkan Playwright devreye giriyor. Peki, bu güçlü aracı sıfırdan nasıl öğrenebilirsiniz? Bu kapsamlı rehberde, Playwright'ı kurmaktan ileri seviye kullanımına kadar tüm adımları keşfedeceksiniz. Kendi projelerinizde hemen uygulayabileceğiniz pratik bilgilerle donanmış bu yazı, 2026 itibarıyla en güncel Playwright bilgilerini sunarak sizi otomasyon dünyasında bir adım öne taşıyacak. ## Playwright Nedir? Playwright, Microsoft tarafından geliştirilen, modern web uygulamaları için uçtan uca test otomasyonu 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 tarayıcı etkileşimlerini simüle etmeyi ve test etmeyi kolaylaştırır. Özellikle hızlı, güvenilir ve tarayıcılar arası testler yazmak isteyen geliştiriciler ve test mühendisleri için vazgeçilmez bir araçtır. Detaylı açıklamak gerekirse, Playwright, web sayfalarıyla kullanıcı gibi etkileşim kurabilen, formları doldurabilen, düğmelere tıklayabilen, gezinme yapabilen ve sayfa içeriğini doğrulayabilen güçlü bir API sunar. Sadece test otomasyonu için değil, aynı zamanda web scraping, ekran görüntüsü alma (screenshot), PDF oluşturma ve genel tarayıcı otomasyonu gibi çeşitli görevler için de kullanılabilir. 2026'da Playwright'ın `v1.45.0` gibi kararlı sürümleri, geliştiricilere eşi benzeri görülmemiş bir hız ve güvenilirlik sunmaktadır. Backend geliştiriciler olarak, API'mizin entegre olduğu frontend uygulamalarını veya doğrudan web servislerini test etmek için Playwright'ın sunduğu bu yeteneklerden faydalanabiliriz. ## Neden Playwright Kullanmalısınız? Playwright'ın 2026 yılında bu kadar popüler olmasının ve birçok geliştirme ekibi tarafından tercih edilmesinin birçok güçlü nedeni var. Kendi projelerimde ve danışmanlık verdiğim şirketlerde Playwright'a geçişin getirdiği somut faydaları defalarca gözlemledim: * **Tarayıcılar Arası Destek:** Chromium (Chrome, Edge), Firefox ve WebKit (Safari) gibi tüm modern tarayıcılarda tek bir API ile test yazmanızı sağlar. Bu, farklı tarayıcılarda ayrı ayrı test setleri oluşturma ihtiyacını ortadan kaldırır, geliştirme ve bakım maliyetlerini önemli ölçüde düşürür. * **Güvenilirlik ve Hız:** Playwright, tarayıcılarla doğrudan iletişim kurar ve otomatik bekleme mekanizmaları sayesinde testlerin flakiness'ini (rastgele başarısız olma) minimize eder. Bu, testlerin daha hızlı ve tutarlı çalışmasını sağlar. Kendi CI/CD ortamlarımızda Playwright testlerinin, eski nesil araçlara göre %30-40 daha hızlı tamamlandığını gördük. * **Otomatik Beklemeler (Auto-waiting):** Elementlerin görünür hale gelmesi, etkinleşmesi veya yüklenmesi gibi durumları otomatik olarak bekler. Bu özellik, manuel `sleep` veya `wait` komutlarına olan ihtiyacı azaltarak test kodunu daha temiz ve daha az hataya açık hale getirir. * **İzolasyon ve Paralelleştirme:** Her testin tamamen izole bir tarayıcı ortamında çalışmasını sağlar. Bu sayede testler birbirini etkilemez ve aynı anda birden fazla testin paralel olarak çalıştırılmasına olanak tanır. Büyük projelerde test süresini dramatik şekilde kısaltır. * **Zengin API:** Dosya yükleme, indirme, ağ isteklerini engelleme/değiştirme, konumlandırma simülasyonu, mobil görünümler gibi gelişmiş senaryolar için zengin bir API sunar. Backend API'lerimizin frontend ile entegrasyonunu test ederken ağ isteklerini kontrol edebilmek büyük bir avantajdır. * **Geliştirici Dostu Araçlar:** Otomatik test kaydı (codegen), test izleyici (trace viewer), canlı hata ayıklama (debug) gibi araçlar sayesinde test yazma ve sorun giderme süreci oldukça kolaylaşır. Özellikle yeni başlayanlar için test yazma eğrisini düşürür. **Kimler İçin Uygundur?** * Modern web uygulaması geliştiren tüm ekipler (React, Angular, Vue, Svelte vb.) * Uçtan uca test otomasyonuna yatırım yapmak isteyenler * Tarayıcılar arası uyumluluk testleri yapmak zorunda olanlar * Web scraping veya otomasyon görevleri olanlar * API'lerinin kullanıcı arayüzü ile entegrasyonunu test etmek isteyen backend geliştiriciler. **Kimler İçin Uygun Değil?** * Masaüstü uygulama veya mobil uygulama (native) testleri için doğrudan uygun değildir. * Çok basit ve statik web siteleri için belki aşırıya kaçan bir araç olabilir, ancak uzun vadede faydaları göz ardı edilemez. Playwright'ın aktif ve büyüyen bir topluluğu vardır. GitHub'daki popülerliği ve npm indirme sayıları, projenin 2026'da ne kadar yaygın kullanıldığını göstermektedir. Bu da bolca kaynak, örnek ve destek bulabileceğiniz anlamına gelir. ## Playwright vs Alternatifler Uçtan uca test otomasyonu dünyasında Playwright yalnız değil. Özellikle Cypress ve Selenium gibi köklü alternatifler bulunmaktadır. Ancak 2026 itibarıyla Playwright, sunduğu modern yaklaşımlar ve performans avantajlarıyla birçok alanda öne çıkmaktadır. Aşağıdaki tablo, bu üç popüler aracı temel özellikler açısından karşılaştırmaktadır: | Özellik | Playwright (2026) | Cypress (2026) | Selenium (2026) | | :------------------ | :------------------------------------------------- | :---------------------------------------------------- | :------------------------------------------------------- | | **Performans** | Çok yüksek, hızlı ve güvenilir. Paralel test desteği. | Yüksek, ancak tarayıcı içi çalıştığı için bazı kısıtlamalar. | Orta, WebDriver protokolü nedeniyle daha yavaş. | | **Öğrenme Eğrisi** | Orta, modern API ve iyi dökümantasyon. | Kolay, geliştirici dostu. | Yüksek, farklı tarayıcı sürücüleri ve karmaşık kurulum. | | **Ekosistem** | Büyüyen ve aktif. Microsoft desteği. | Geniş eklenti ve topluluk desteği. | Çok geniş, uzun süredir piyasada. | | **Topluluk** | Çok aktif ve hızla büyüyen. | Çok aktif ve destekleyici. | Çok büyük ve köklü. | | **Kurumsal Destek** | Microsoft tarafından aktif olarak geliştiriliyor. | Cypress firması tarafından aktif geliştirme ve destek. | Açık kaynak topluluğu tarafından geliştiriliyor. | | **Kullanım Alanı** | Uçtan uca test, API test, web scraping, mobil emülasyon. | Uçtan uca test, bileşen test. | Uçtan uca test, tarayıcı otomasyonu, geniş entegrasyon. | | **Tarayıcı Desteği**| Chromium, Firefox, WebKit (tek API). | Chromium tabanlı, Firefox (sınırlı), Electron. | Çoğu tarayıcı (WebDriver sürücüleri ile). | Bu karşılaştırma tablosuna bakıldığında, Playwright'ın özellikle tarayıcılar arası destek ve performans konularında rakiplerine göre önemli avantajlar sunduğu görülmektedir. Kendi ekibimizde, özellikle büyük ve karmaşık web uygulamalarının test otomasyonunda Playwright'ın sağladığı hız ve güvenilirlik, diğer alternatiflerin önüne geçmesini sağladı. Cypress, geliştirici deneyimi açısından hala güçlü bir seçenek olsa da, Playwright'ın kapsamlı tarayıcı desteği ve daha düşük seviyeli tarayıcı etkileşim yetenekleri, onu 2026'da daha esnek bir tercih haline getiriyor. ## Kurulum ve İlk Adımlar Playwright ile web otomasyonu dünyasına adım atmak oldukça basittir. Aşağıdaki adımları takip ederek Playwright'ı projenize kurabilir ve ilk testinizi çalıştırabilirsiniz. **Ön Gereksinimler:** * Node.js (v18.x veya üzeri önerilir, 2026 itibarıyla en güncel LTS sürümü) * npm veya Yarn * Metin düzenleyici (VS Code önerilir) ### Adım 1: Yeni Bir Node.js Projesi Başlatma Playwright'ı kullanmak için öncelikle bir Node.js projesi oluşturmamız gerekiyor. Boş bir klasör oluşturup terminalde aşağıdaki komutları çalıştırın: ```bash mkdir playwright-ilk-adim cd playwright-ilk-adim npm init -y ``` Bu komutlar `playwright-ilk-adim` adında bir klasör oluşturacak, içine girecek ve `package.json` dosyasını varsayılan ayarlarla oluşturacaktır. ### Adım 2: Playwright'ı Kurma Şimdi Playwright kütüphanesini ve gerekli tarayıcıları projenize kurun. Playwright, kurulum sırasında varsayılan olarak Chromium, Firefox ve WebKit tarayıcılarını indirir. ```bash npm install @playwright/test npx playwright install ``` * `npm install @playwright/test`: Playwright test kütüphanesini `devDependencies` olarak projenize ekler. * `npx playwright install`: Playwright'ın desteklediği tüm tarayıcıların (Chromium, Firefox, WebKit) güncel 2026 sürümlerini indirir. Eğer sadece belirli tarayıcıları isterseniz, `npx playwright install chromium` gibi komutlar kullanabilirsiniz. ### Adım 3: İlk Testinizi Yazma `tests` adında bir klasör oluşturun ve içine `example.spec.ts` (veya `.js`) adında bir dosya ekleyin. İçine aşağıdaki kodu yapıştırın: ```typescript // tests/example.spec.ts import { test, expect } from '@playwright/test'; test('başlık doğru olmalı', async ({ page }) => { await page.goto('https://playwright.dev/'); // Sayfa başlığını kontrol et await expect(page).toHaveTitle(/Playwright/); }); test('başlangıç linki olmalı', async ({ page }) => { await page.goto('https://playwright.dev/'); // 'Get started' linkine tıkla await page.getByRole('link', { name: 'Get started' }).click(); // URL'in /docs/intro ile bittiğini doğrula await expect(page).toHaveURL(/.*intro/); }); ``` Bu kod, Playwright'ın resmi web sitesine giden ve bazı temel kontroller yapan iki basit test içerir. ### Adım 4: Testleri Çalıştırma Testleri çalıştırmak için terminalde aşağıdaki komutu kullanın: ```bash npx playwright test ``` Playwright, testlerinizi varsayılan olarak headless modda (tarayıcı arayüzü olmadan) çalıştıracaktır. Testler başarıyla tamamlandığında, terminalde yeşil onay işaretleri ve bir özet göreceksiniz. Eğer testlerin tarayıcı arayüzü ile çalışmasını isterseniz, `--headed` bayrağını kullanabilirsiniz: ```bash npx playwright test --headed ``` Bu adımlarla Playwright'ın temel kurulumunu tamamlamış ve ilk testlerinizi başarıyla çalıştırmış olmalısınız. Artık Playwright'ın gücünü keşfetmeye hazırsınız! ## Temel Kullanım ve Örnekler Playwright'ın temel kullanımını anlamak için gerçek dünya senaryolarına odaklanalım. İşte sıkça karşılaşılan otomasyon görevleri için pratik örnekler: ### Örnek 1: Bir Formu Doldurma ve Gönderme **Problem:** Bir web sayfasındaki giriş formunu doldurup göndermek ve başarılı bir mesajın görüntülendiğini doğrulamak. **Çözüm:** `page.fill()`, `page.click()` ve `expect()` kullanarak form elemanlarıyla etkileşim kurun. ```typescript // tests/form.spec.ts import { test, expect } from '@playwright/test'; test('giriş formu başarıyla gönderilmeli', async ({ page }) => { await page.goto('https://www.example.com/login'); // Kendi test sayfanızı buraya yazın await page.fill('input[name="username"]', 'testuser'); await page.fill('input[name="password"]', 'testpass'); await page.click('button[type="submit"]'); // Başarılı giriş mesajını bekle ve doğrula await expect(page.locator('.success-message')).toBeVisible(); await expect(page.locator('.success-message')).toHaveText('Giriş başarılı!'); }); ``` ### Örnek 2: Bir Elementin Görünürlüğünü Kontrol Etme **Problem:** Bir sayfadaki belirli bir elementin yüklendikten sonra görünür olduğundan emin olmak. **Çözüm:** `expect().toBeVisible()` kullanın. ```typescript // tests/visibility.spec.ts import { test, expect } from '@playwright/test'; test('ürün listesi yüklendikten sonra görünür olmalı', async ({ page }) => { await page.goto('https://www.example.com/products'); // '.product-list' sınıfına sahip elementin görünür olmasını bekle await expect(page.locator('.product-list')).toBeVisible(); }); ``` ### Örnek 3: Bir Butona Tıklama ve Yeni Sayfaya Geçiş **Problem:** Bir butona tıklandığında yeni bir sayfaya yönlendirme olup olmadığını doğrulamak. **Çözüm:** `page.click()` ve `expect().toHaveURL()` kullanın. ```typescript // tests/navigation.spec.ts import { test, expect } from '@playwright/test'; test('ürün detay sayfasına yönlendirme doğru olmalı', async ({ page }) => { await page.goto('https://www.example.com/homepage'); await page.click('a[id="view-product-123"]'); // URL'in belirli bir desene uyduğunu doğrula await expect(page).toHaveURL(/.*\/products\/123/); }); ``` ### Örnek 4: Ağ İsteklerini İzleme ve Doğrulama **Problem:** Bir sayfa yüklenirken veya bir işlem yapılırken belirli bir API çağrısının yapıldığını ve doğru yanıtı döndürdüğünü doğrulamak. Backend geliştiriciler için kritik bir senaryo! **Çözüm:** `page.waitForResponse()` kullanarak ağ isteklerini dinleyin. ```typescript // tests/api-intercept.spec.ts import { test, expect } from '@playwright/test'; test('ürünler API çağrısı başarılı olmalı', async ({ page }) => { await page.goto('https://www.example.com/dashboard'); // Belirli bir API çağrısının tamamlanmasını bekle const [response] = await Promise.all([ page.waitForResponse(resp => resp.url().includes('/api/products') && resp.status() === 200), page.click('button[id="load-products"]') // Ürünleri yükleyen butona tıkla ]); // API yanıtını doğrula const data = await response.json(); expect(data).toBeInstanceOf(Array); expect(data.length).toBeGreaterThan(0); expect(data[0]).toHaveProperty('name'); }); ``` ### Örnek 5: Sayfa Ekran Görüntüsü Alma **Problem:** Bir web sayfasının belirli bir anındaki görsel durumunu belgelemek veya görsel regresyon testleri için kullanmak. **Çözüm:** `page.screenshot()` yöntemini kullanın. ```typescript // tests/screenshot.spec.ts import { test, expect } from '@playwright/test'; import * as path from 'path'; test('anasayfa ekran görüntüsü doğru olmalı', async ({ page }) => { await page.goto('https://www.example.com'); // Ekran görüntüsü al ve kaydet const screenshotPath = path.join(__dirname, '..', 'screenshots', 'homepage.png'); await page.screenshot({ path: screenshotPath }); // Opsiyonel: Ekran görüntüsünü bir referans görüntüsüyle karşılaştır (görsel regresyon testi için) // Bu kısım için 'pixelmatch' veya 'jest-image-snapshot' gibi kütüphanelere ihtiyacınız olabilir. // expect(screenshotPath).toMatchSnapshot('homepage.png'); }); ``` Bu örnekler, Playwright'ın temel yeteneklerini ve farklı senaryolarda nasıl kullanılabileceğini göstermektedir. Bu temel adımları anlayarak, daha karmaşık otomasyon görevlerine geçiş yapabilirsiniz. ## İleri Seviye Teknikler Playwright, basit test senaryolarının ötesine geçerek, daha karmaşık ve kurumsal düzeyde otomasyon ihtiyaçlarını karşılayacak güçlü özellikler sunar. Deneyimli geliştiriciler için bu ileri seviye teknikler, testlerinizi daha sağlam, daha yönetilebilir ve daha performanslı hale getirecektir. ### 1. Page Object Model (POM) **Problem:** Test kodunun tekrarını azaltmak, bakım kolaylığı sağlamak ve testleri daha okunabilir hale getirmek. **Çözüm:** POM, her web sayfası veya sayfa bileşeni için ayrı bir sınıf oluşturmayı önerir. Bu sınıflar, sayfa elemanlarını (locators) ve bu elemanlarla etkileşim kuran yöntemleri içerir. ```typescript // pages/LoginPage.ts import { Page, Locator } from '@playwright/test'; export class LoginPage { readonly page: Page; readonly usernameInput: Locator; readonly passwordInput: Locator; readonly loginButton: Locator; readonly errorMessage: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.locator('input[name="username"]'); this.passwordInput = page.locator('input[name="password"]'); this.loginButton = page.locator('button[type="submit"]'); this.errorMessage = page.locator('.error-message'); } async navigate() { await this.page.goto('/login'); } async login(username: string, password: string) { await this.usernameInput.fill(username); await this.passwordInput.fill(password); await this.loginButton.click(); } async getErrorMessage() { return await this.errorMessage.textContent(); } } // tests/login.spec.ts (POM ile kullanım) import { test, expect } from '@playwright/test'; import { LoginPage } from '../pages/LoginPage'; test('geçersiz kimlik bilgileriyle giriş yapılamamalı', async ({ page }) => { const loginPage = new LoginPage(page); await loginPage.navigate(); await loginPage.login('invaliduser', 'wrongpass'); await expect(loginPage.errorMessage).toBeVisible(); await expect(await loginPage.getErrorMessage()).toContain('Hatalı kullanıcı adı veya şifre'); }); ``` ### 2. Global Setup ve Teardown **Problem:** Testlerden önce veritabanı temizliği, test sunucusu başlatma veya kullanıcı oturumu açma gibi bir kerelik kurulum ve sonlandırma işlemleri yapmak. **Çözüm:** `playwright.config.ts` dosyasında `globalSetup` ve `globalTeardown` seçeneklerini kullanın. ```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', trace: 'on-first-retry', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, { name: 'webkit', use: { ...devices['Desktop Safari'] } }, ], globalSetup: require.resolve('./global-setup'), globalTeardown: require.resolve('./global-teardown'), }); // global-setup.ts import { FullConfig } from '@playwright/test'; import setup from './utils/setup-db'; async function globalSetup(config: FullConfig) { console.log('Global Setup: Veritabanı temizleniyor ve test verileri yükleniyor...'); // Örneğin, test veritabanını temizle ve başlangıç verilerini yükle await setup.cleanAndSeedDatabase(); console.log('Global Setup Tamamlandı.'); } export default globalSetup; // global-teardown.ts import { FullConfig } from '@playwright/test'; async function globalTeardown(config: FullConfig) { console.log('Global Teardown: Test ortamı temizleniyor...'); // Örneğin, test sunucusunu durdur veya cache'i temizle // await teardown.stopTestServer(); console.log('Global Teardown Tamamlandı.'); } export default globalTeardown; ``` ### 3. API Testleri ile Entegrasyon **Problem:** Uçtan uca testlerin yavaşlığını azaltmak ve backend API'lerinin doğrudan testini sağlamak. **Çözüm:** Playwright'ın `request` fixture'ını kullanarak doğrudan HTTP istekleri yapın ve API yanıtlarını doğrulayın. Bu, backend geliştiriciler için Playwright'ı daha da değerli kılar. ```typescript // tests/api.spec.ts import { test, expect } from '@playwright/test'; test('API: Kullanıcı listesi alınmalı', async ({ request }) => { const response = await request.get('/api/users'); // baseURL playwright.config.ts'den gelir expect(response.ok()).toBeTruthy(); const users = await response.json(); expect(users).toBeInstanceOf(Array); expect(users.length).toBeGreaterThan(0); expect(users[0]).toHaveProperty('id'); expect(users[0]).toHaveProperty('name'); }); test('API: Yeni bir kullanıcı oluşturulmalı', async ({ request }) => { const newUser = { name: 'Burak Balkı', email: 'burak.balki@example.com', }; const response = await request.post('/api/users', { data: newUser }); expect(response.status()).toBe(201); // Created const createdUser = await response.json(); expect(createdUser).toMatchObject(newUser); expect(createdUser).toHaveProperty('id'); }); ``` ### 4. Test İzleyici (Trace Viewer) ve Hata Ayıklama **Problem:** Başarısız olan testlerin neden başarısız olduğunu anlamak ve görsel olarak hata ayıklamak. **Çözüm:** Playwright'ın dahili Trace Viewer'ı, her testin adım adım yürütülmesini, DOM snapshot'larını, ağ isteklerini, konsol çıktılarını ve ekran görüntülerini gösterir. `playwright.config.ts` dosyasında `trace: 'on-first-retry'` ayarlayarak Trace Viewer dosyalarını otomatik olarak oluşturabilirsiniz. Başarısız bir testten sonra Trace Viewer'ı açmak için: ```bash npx playwright show-report ``` Belirli bir trace dosyasını açmak için: ```bash npx playwright show-trace path/to/trace.zip ``` Canlı hata ayıklama için `page.pause()` kullanabilirsiniz: ```typescript // tests/debug.spec.ts import { test, expect } from '@playwright/test'; test('hata ayıklama örneği', async ({ page }) => { await page.goto('https://www.example.com'); await page.pause(); // Tarayıcı durur ve DevTools açılır // Burada manuel olarak etkileşim kurabilir veya konsolda Playwright komutları çalıştırabilirsiniz await page.click('button[id="some-button"]'); await expect(page.locator('.result')).toBeVisible(); }); ``` Bu ileri seviye teknikler, Playwright'ı sadece bir test aracı olmaktan çıkarıp, karmaşık otomasyon ve test senaryolarının üstesinden gelebilecek kapsamlı bir çözüme dönüştürür. Özellikle büyük ölçekli ve production ortamında çalışan uygulamalar için bu yetenekler kritik öneme sahiptir. ## Best Practices & Anti-Patterns Playwright ile verimli ve sürdürülebilir testler yazmak için belirli en iyi uygulamaları takip etmek ve yaygın hatalardan kaçınmak önemlidir. Kendi ekibimizde Playwright'ı production ortamında kullanırken öğrendiğimiz kritik dersleri burada paylaşıyorum: ### ✅ DOĞRU Uygulamalar * **Anlamlı Locators Kullanın:** `id`, `data-test-id`, `role` veya açık metin (örneğin `getByText`) gibi dayanıklı locators kullanın. CSS sınıfları veya XPath genellikle değişime daha açıktır. * **Neden Önemli?** UI değişikliklerinden en az etkilenen testler yazmanızı sağlar. `id` veya `data-test-id` gibi özellikler, tasarım değişikliklerinden bağımsız olarak elementleri bulmanın en güvenilir yoludur. * **Page Object Model (POM) Kullanın:** Sayfa etkileşimlerini soyutlayan Page Object'ler oluşturun. Bu, test kodunu temiz, DRY (Don't Repeat Yourself) ve bakımı kolay hale getirir. * **Neden Önemli?** Bir UI elemanı değiştiğinde, sadece Page Object içindeki locator'ı güncellemeniz yeterlidir, tüm test dosyalarını değil. Bu, büyük projelerde zaman ve emek tasarrufu sağlar. * **Otomatik Beklemelere Güvenin:** Playwright'ın otomatik bekleme mekanizmalarına güvenin. Manuel `page.waitForTimeout()` kullanmaktan kaçının. * **Neden Önemli?** Manuel beklemeler testleri yavaşlatır ve flakiness'e neden olabilir. Playwright, elementlerin etkileşime hazır olmasını akıllıca bekler, bu da testlerin daha hızlı ve güvenilir olmasını sağlar. * **Testleri İzole Edin:** Her testin bağımsız olduğundan ve diğer testlerin durumundan etkilenmediğinden emin olun. `test.beforeEach` veya `globalSetup` ile temiz bir başlangıç yapın. * **Neden Önemli?** İzole testler, hata ayıklamayı kolaylaştırır ve paralel çalıştırmayı mümkün kılar. Bir testin başarısız olması, diğer testlerin de başarısız olacağı anlamına gelmez. * **API Testlerini Kullanın:** Mümkün olduğunca, kullanıcı arayüzü yerine doğrudan API'ler üzerinden durumları hazırlayın veya doğrulayın. Örneğin, test kullanıcısı oluşturmak için API çağrısı yapın. * **Neden Önemli?** UI testleri yavaştır. API testleri çok daha hızlıdır ve test süresini önemli ölçüde azaltır. Sadece kullanıcı arayüzünün gerçekten test edilmesi gereken kısımları için UI testleri yazın. * **Video Kaydı ve Ekran Görüntülerini Kullanın:** Başarısız testler için video kaydı ve ekran görüntüleri alarak hata ayıklama sürecini hızlandırın. `playwright.config.ts`'de bu ayarları yapın. * **Neden Önemli?** Bir test neden başarısız oldu? Video ve ekran görüntüleri, hatanın görsel olarak nerede meydana geldiğini anlamanıza yardımcı olur, özellikle CI/CD ortamlarında çok değerlidir. * **CI/CD Entegrasyonu:** Testlerinizi sürekli entegrasyon/sürekli dağıtım (CI/CD) hattınıza entegre edin. Bu, kod değişikliklerinin erken aşamalarında hataları tespit etmenizi sağlar. * **Neden Önemli?** Hataları geliştirme sürecinin başlarında yakalamak, onarım maliyetini düşürür ve üretim ortamına hatalı kod gitmesini engeller. Playwright'ın hızlı ve güvenilir yapısı CI/CD için idealdir. * **Erişilebilirlik Testleri:** Playwright, `axe-core` gibi kütüphanelerle entegre olarak erişilebilirlik testleri yapmanıza olanak tanır. Bunu test suite'inize dahil edin. * **Neden Önemli?** Web sitenizin tüm kullanıcılar için erişilebilir olmasını sağlamak, sadece yasal bir gereklilik değil, aynı zamanda iyi bir kullanıcı deneyimi sunmanın temelidir. ### ❌ YANLIŞ Uygulamalar (Anti-Patterns) * **Zayıf Locators Kullanmak:** `div > div > span:nth-child(3)` gibi kırılgan CSS seçicileri veya dinamik olarak değişen XPath'ler kullanmaktan kaçının. * **Neden Kötü?** Küçük UI değişikliklerinde bile testleriniz bozulur ve sürekli bakım gerektirir. Bu, test suite'inizin güvenilirliğini düşürür. * **Gereksiz `page.waitForTimeout()` Kullanımı:** Kodunuzu `await page.waitForTimeout(5000);` ile doldurmak, testlerinizi yavaşlatır ve flakiness'i artırır. * **Neden Kötü?** Her zaman en kötü senaryoyu bekler ve testlerin gereğinden uzun sürmesine neden olur. Playwright'ın otomatik beklemeleri çoğu durumda yeterlidir. * **Testlerde Durum Paylaşımı:** Testler arasında oturum bilgisi, veritabanı durumu veya UI durumu gibi verileri paylaşmaktan kaçının. * **Neden Kötü?** Testler birbirine bağımlı hale gelir, paralel çalışamaz ve bir testin başarısızlığı diğerlerini etkileyebilir. Bu da hata ayıklamayı kabusa çevirir. * **Her Şeyi UI Üzerinden Yapmak:** Bir kullanıcının e-posta adresini doğrulamak için e-posta kutusuna gitmek veya bir öğeyi silmek için onay penceresiyle uğraşmak gibi senaryoları UI üzerinden yapmak yerine API'leri kullanın. * **Neden Kötü?** Yavaş ve kırılgan testlere yol açar. Backend API'leri kullanarak test ortamını hızlıca hazırlamak veya doğrulamak çok daha verimlidir. * **Kod Tekrarı (DRY Prensibini İhlal Etmek):** Aynı form doldurma veya navigasyon adımlarını birden fazla test dosyasında tekrarlamak. * **Neden Kötü?** Bakımı zorlaştırır. Bir değişiklik yapmanız gerektiğinde birden fazla yeri güncellemeniz gerekir, bu da hata yapma olasılığını artırır. POM veya yardımcı fonksiyonlar kullanın. Bu best practice'leri ve anti-pattern'ları göz önünde bulundurarak, 2026'da Playwright ile daha sağlam, daha hızlı ve daha yönetilebilir test otomasyonu çözümleri geliştirebilirsiniz. ## Yaygın Hatalar ve Çözümleri Playwright ile çalışırken karşılaşabileceğiniz bazı yaygın hatalar ve bu hataları nasıl çözebileceğinize dair pratik bilgiler aşağıda listelenmiştir. Kendi projelerimde ve Stack Overflow gibi platformlarda en sık karşılaştığım sorunları ele alıyoruz. ### 1. Hata: Element Bulunamadı (`TimeoutError: locator.click: Timeout 30000ms exceeded.`) * **Problem:** Playwright, belirtilen locator'a sahip bir elementi belirli bir süre (varsayılan 30 saniye) içinde bulamıyor veya etkileşime geçemiyor. * **Sebep:** Element henüz DOM'a yüklenmemiş olabilir, görünür olmayabilir, disabled durumda olabilir veya locator yanlış yazılmış olabilir. * **Çözüm:** * **Locator'ı Doğrulayın:** `page.pause()` kullanarak veya Playwright Inspector ile locator'ın doğru olduğundan emin olun. * **Otomatik Beklemeye Güvenin:** Playwright'ın otomatik beklemeleri çoğu zaman yeterlidir. Ancak bazen bir elementin yüklenmesi için ek bir koşul gerekebilir. Örneğin, bir API çağrısı sonrası yüklenen verilerle oluşan bir liste için `await expect(page.locator('.list-item')).toHaveCount(someNumber);` gibi bir doğrulama ekleyebilirsiniz. * **Artırılmış Timeout:** Nadiren de olsa, çok yavaş yüklenen sayfalar için locator'a özel `timeout` değeri belirtebilirsiniz: `await page.locator('#slow-element').click({ timeout: 60000 });`. ### 2. Hata: Tarayıcı Başlatılamadı (`Error: Failed to launch browser: ...`) * **Problem:** Playwright, tarayıcıyı başlatırken bir sorunla karşılaşıyor. * **Sebep:** Tarayıcı dosyaları eksik veya bozuk olabilir, sistemde bağımlılıklar eksik olabilir (özellikle Linux'ta), veya yeterli sistem kaynağı (RAM) olmayabilir. * **Çözüm:** * **Tarayıcıları Tekrar Kurun:** `npx playwright install` komutunu tekrar çalıştırarak tarayıcıların doğru şekilde indirildiğinden emin olun. * **Linux Bağımlılıkları:** Linux sistemlerde `npx playwright install-deps` komutunu çalıştırarak gerekli sistem bağımlılıklarını kurun. * **Sistem Kaynakları:** Yeterli RAM ve CPU olduğundan emin olun. Özellikle CI/CD ortamlarında kaynak kısıtlamaları sorun yaratabilir. ### 3. Hata: Ağ İstekleri Zaman Aşımına Uğradı (`TimeoutError: page.waitForResponse: Timeout 30000ms exceeded.`) * **Problem:** Belirli bir ağ isteğinin veya yanıtının beklenenden uzun sürmesi veya hiç gerçekleşmemesi. * **Sebep:** API çağrısı başarısız olabilir, ağ yavaş olabilir, veya beklenen URL/durum kodu yanlış olabilir. * **Çözüm:** * **URL ve Durumu Kontrol Edin:** `waitForResponse` içindeki URL ve durum kodu koşullarının doğru olduğundan emin olun. * **API Yanıtını Manuel Kontrol Edin:** Geliştirici araçlarında (DevTools) ağ sekmesinden API çağrısının gerçekten yapılıp yapılmadığını ve ne kadar sürdüğünü kontrol edin. * **Timeout Artırın:** Çok yavaş API'ler için `waitForResponse` metoduna özel bir `timeout` değeri verebilirsiniz. ### 4. Hata: Yeni Sekme veya Pencere Açıldığında Etkileşim Sorunları * **Problem:** Bir butona tıklandığında yeni bir sekme veya pencere açılıyor ve Playwright o pencerede işlem yapamıyor. * **Sebep:** Playwright, varsayılan olarak `page` objesi üzerinden mevcut sekme ile etkileşime girer. Yeni açılan sekmeler için özel bir işlem gerekir. * **Çözüm:** `context.waitForEvent('page')` veya `Promise