Playwright Nedir? 7 Adımda Kapsamlı Başlangıç Rehberi

Modern yazılım geliştirme süreçlerinde, CI/CD pipeline'larının en büyük darboğazlarından birinin UI testleri olduğunu biliyor muydunuz? Hantal, sürekli kırılan ve yavaş çalışan testler, release süreçlerini kabusa çevirebilir. İşte tam bu noktada Playwright devreye giriyor. Bir Enterprise SEO Content Strategist ve Full Stack Developer olarak, son projemizde Playwright'a geçiş yaptığımızda test sürelerinde %40'lık bir iyileşme ve sıfıra yakın 'flaky' (tutarsız) test oranı elde ettik. Bu rehberde, yeni başlayanlar için Playwright kurulumu, temel kavramları ve production-ready test yazma tekniklerini adım adım keşfedeceksiniz. ## Playwright Nedir? Playwright, Microsoft tarafından geliştirilen, modern web uygulamaları için uçtan uca (E2E) test otomasyonu ve web scraping sağlayan açık kaynaklı bir Node.js kütüphanesidir. Chromium, Firefox ve WebKit tarayıcılarını tek bir API üzerinden yöneterek hızlı, güvenilir ve çapraz platform testler yapmanıza olanak tanır. Selenium'un hantallığına ve Cypress'in mimari kısıtlamalarına modern bir alternatif olarak doğan Playwright, günümüzde QA mühendisleri ve frontend developer'lar tarafından standart bir araç haline gelmiştir. Asenkron işlemleri otomatik bekleme (auto-wait) yeteneği, iframe ve multi-tab desteği sayesinde karmaşık modern web uygulamalarını (React, Vue, Angular) test etmek için biçilmiş kaftandır. ## Neden Playwright Kullanmalısınız? Playwright kullanmanın projelerinize katacağı somut faydalar şunlardır: - **Otomatik Bekleme (Auto-wait):** Playwright, elementlerin tıklanabilir veya görünür olmasını otomatik olarak bekler. Bu, `Thread.sleep()` veya manuel `wait` komutları yazma zorunluluğunu ortadan kaldırır. - **Çoklu Tarayıcı ve Platform Desteği:** Tek bir kod tabanı ile Chrome, Edge, Firefox ve Safari (WebKit) üzerinde test koşturabilirsiniz. Windows, Linux ve macOS ortamlarında native olarak çalışır. - **Network Interception:** API isteklerini mock'layabilir, HTTP trafiğini dinleyebilir ve değiştirebilirsiniz. Bu özellik, backend hazır olmadan frontend testleri yazmanızı sağlar. - **İzole Ortamlar (Browser Contexts):** Her test, saniyeler içinde oluşturulan izole bir tarayıcı bağlamında (context) çalışır. Bu sayede testler arası state sızıntısı önlenir ve paralel test execution performansı maksimize edilir. Ekibimizde Playwright'a geçiş sürecinde öğrendiğimiz en kritik ders, test izolasyonunun CI/CD sürelerini inanılmaz derecede kısalttığı oldu. GitHub'da 60.000'den fazla yıldıza ve npm'de haftalık milyonlarca indirmeye sahip devasa bir ekosistemi vardır. ## Playwright vs Alternatifler: Hangi E2E Aracı? Playwright'ı ekosistemdeki diğer güçlü rakipleriyle karşılaştıralım. | Özellik | Playwright | Cypress | Selenium | | :--- | :--- | :--- | :--- | | **Mimari** | WebSocket tabanlı, dışarıdan kontrol | Tarayıcı içinde çalışır (In-browser) | WebDriver protokolü | | **Hız / Performans** | Çok Yüksek | Yüksek | Orta/Düşük | | **Çoklu Sekme (Multi-tab)** | ✅ Tam Destek | ❌ Desteklemez | ✅ Destekler | | **Öğrenme Eğrisi** | Orta | Düşük | Yüksek | | **Dil Desteği** | JS/TS, Python, Java, .NET | Sadece JS/TS | JS, Python, Java, C#, Ruby | | **Kullanım Alanı** | Modern E2E, Web Scraping | Frontend E2E, Component Testi | Geleneksel E2E, Legacy Sistemler | *Yorum:* Cypress frontend geliştiriciler için harika bir DX (Developer Experience) sunsa da, iframe ve çoklu sekme kısıtlamaları büyük enterprise projelerde engel teşkil edebilir. Selenium ise sektör standardı olmasına rağmen modern web'in asenkron yapısına ayak uydurmakta zorlanmaktadır. Playwright, her ikisinin de en iyi yönlerini birleştirir. ## Kurulum ve İlk Adımlar Playwright kurulumu oldukça basittir. Ön gereksinim olarak sisteminizde **Node.js 18+** yüklü olmalıdır. ### 1. Proje Oluşturma Öncelikle boş bir klasör oluşturup terminalinizi açın: ```bash mkdir playwright-rehberi cd playwright-rehberi npm init -y ``` ### 2. Playwright'ı Başlatma Playwright'ın resmi CLI aracı, gerekli tüm dosyaları ve tarayıcı binary'lerini otomatik olarak kurar: ```bash npm init playwright@latest ``` Bu komutu çalıştırdığınızda size bazı sorular sorulacaktır: - *Do you want to use TypeScript or JavaScript?* -> TypeScript seçin (Best practice). - *Where to put your end-to-end tests?* -> `tests` klasörünü onaylayın. - *Add a GitHub Actions workflow?* -> CI/CD için `true` diyebilirsiniz. - *Install Playwright browsers?* -> `true` (Chromium, Firefox, WebKit indirilecektir). ### 3. Dosya Yapısı Kurulum bittiğinde aşağıdaki gibi bir yapı oluşur: ```text playwright-rehberi/ ├── node_modules/ ├── tests/ │ └── example.spec.ts ├── tests-examples/ ├── .gitignore ├── package.json └── playwright.config.ts ``` `playwright.config.ts` dosyası, tüm konfigürasyonların (timeout, tarayıcı ayarları, paralellik) yapıldığı ana merkezdir. ## Temel Kullanım ve Örnekler Playwright ile test yazmak, `test` ve `expect` fonksiyonlarını kullanmaktan ibarettir. ### Örnek 1: Temel Navigasyon ve Assertion Bir sayfaya gidip başlığını kontrol edelim: ```typescript import { test, expect } from '@playwright/test'; test('Google anasayfa başlığı kontrolü', async ({ page }) => { // Sayfaya git await page.goto('https://www.google.com'); // Başlığın 'Google' içerdiğini doğrula await expect(page).toHaveTitle(/Google/); }); ``` ### Örnek 2: Form Doldurma ve Tıklama Kullanıcı etkileşimleri Playwright'ın en güçlü yanıdır. `Locator` stratejilerini kullanarak elementleri buluruz. ```typescript import { test, expect } from '@playwright/test'; test('Github arama formunu kullanma', async ({ page }) => { await page.goto('https://github.com'); // Placeholder'a göre elementi bul ve yaz const searchInput = page.getByPlaceholder('Search or jump to...'); await searchInput.click(); await searchInput.fill('playwright'); await searchInput.press('Enter'); // Sonuç sayfasının yüklendiğini doğrula await expect(page).toHaveURL(/.*q=playwright/); }); ``` ### Örnek 3: Ekran Görüntüsü Alma (Screenshot) Test fail olduğunda veya belirli bir adımda ekran görüntüsü almak çok kolaydır: ```typescript import { test } from '@playwright/test'; test('Sayfanın ekran görüntüsünü alma', async ({ page }) => { await page.goto('https://news.ycombinator.com/'); // Tüm sayfanın (scroll dahil) ekran görüntüsünü al await page.screenshot({ path: 'hacker-news-full.png', fullPage: true }); }); ``` ### Örnek 4: API Mocking (Network Interception) Backend çökse bile frontend testlerinizin çalışmasını istiyorsanız network mocking kullanmalısınız: ```typescript import { test, expect } from '@playwright/test'; test('API yanıtını mocklama', async ({ page }) => { // /api/users isteğini yakala ve sahte veri dön await page.route('**/api/users', route => { route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([{ id: 1, name: 'Burak Balkı' }]) }); }); await page.goto('https://example.com/users'); // Ekranda mock verinin render edildiğini doğrula await expect(page.getByText('Burak Balkı')).toBeVisible(); }); ``` ## İleri Seviye Teknikler Senior developer'lar için testleri ölçeklenebilir ve bakımı kolay hale getirmek kritik önem taşır. ### Page Object Model (POM) Kullanımı Büyük projelerde UI elementlerini ve aksiyonlarını test dosyalarından ayırmak (POM) bir best practice'tir. ```typescript // pages/LoginPage.ts import { expect, Locator, Page } from '@playwright/test'; export class LoginPage { readonly page: Page; readonly usernameInput: Locator; readonly passwordInput: Locator; readonly loginButton: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.getByLabel('Username'); this.passwordInput = page.getByLabel('Password'); this.loginButton = page.getByRole('button', { name: 'Login' }); } async goto() { await this.page.goto('https://example.com/login'); } async login(user: string, pass: string) { await this.usernameInput.fill(user); await this.passwordInput.fill(pass); await this.loginButton.click(); } } ``` POM sınıfını test dosyasında kullanımı: ```typescript // tests/login.spec.ts import { test, expect } from '@playwright/test'; import { LoginPage } from '../pages/LoginPage'; test('Başarılı giriş işlemi', async ({ page }) => { const loginPage = new LoginPage(page); await loginPage.goto(); await loginPage.login('admin', 'secret123'); await expect(page.getByText('Welcome, admin')).toBeVisible(); }); ``` ## Best Practices & Anti-Patterns Production ortamında Playwright kullanırken karşılaştığım en yaygın sorun, yanlış locator kullanımı ve gereksiz beklemelerdir. ### ✅ DOĞRU: Kullanıcı Odaklı Locator'lar Kullanın Kullanıcının gördüğü ve etkileşime girdiği elementleri hedefleyin (Accessibility locator'ları). ```typescript // Doğru kullanım await page.getByRole('button', { name: 'Submit' }).click(); await page.getByText('Success!').toBeVisible(); ``` ### ❌ YANLIŞ: Kırılgan CSS/XPath Seçicileri Kullanmak DOM yapısı değiştiğinde testiniz kırılır. ```typescript // Yanlış kullanım await page.locator('div > div:nth-child(2) > span.btn-primary').click(); ``` ### ✅ DOĞRU: Auto-wait Mekanizmasına Güvenin Playwright'ın `expect` assertion'ları asenkrondur ve elementi bekler. ```typescript // Doğru kullanım await expect(page.locator('.alert-success')).toBeVisible({ timeout: 10000 }); ``` ### ❌ YANLIŞ: Hardcoded Beklemeler (Sleep) Test sürelerini gereksiz uzatır ve flaky testlere yol açar. ```typescript // Yanlış kullanım (Anti-pattern) await page.waitForTimeout(5000); // ASLA KULLANMAYIN ``` ## Yaygın Hatalar ve Çözümleri **1. Hata:** `TimeoutError: page.goto: Timeout 30000ms exceeded.` - **Sebep:** Sayfa belirtilen sürede yüklenemedi veya network isteği askıda kaldı. - **Çözüm:** `playwright.config.ts` içinden global timeout süresini artırın veya `waitUntil: 'domcontentloaded'` parametresini kullanın. ```typescript await page.goto('https://slow-site.com', { waitUntil: 'domcontentloaded' }); ``` **2. Hata:** `locator.click: Target closed` - **Sebep:** Siz bir elemente tıklamaya çalışırken sayfa yönlendirmesi gerçekleşti veya tarayıcı sekmesi kapandı. - **Çözüm:** Promise.all ile navigasyon ve tıklama işlemini senkronize edin. ```typescript await Promise.all([ page.waitForNavigation(), page.getByRole('button', { name: 'Submit' }).click() ]); ``` ## Performans Optimizasyonu Eğer test suite'iniz 10 dakikadan uzun sürüyorsa, optimizasyon vakti gelmiştir. Playwright'ta performansı artırmanın en iyi yolu **paralel execution** kullanmaktır. `playwright.config.ts` dosyasında worker sayısını ayarlayın: ```typescript import { defineConfig } from '@playwright/test'; export default defineConfig({ // CPU çekirdek sayısına göre worker ayarı workers: process.env.CI ? 4 : undefined, fullyParallel: true, // Fail olan testleri tekrar dene retries: process.env.CI ? 2 : 0, }); ``` Ayrıca, her testte baştan login olmak yerine, **Global Setup** ile authentication state'ini (cookies, localStorage) bir JSON dosyasına kaydedip diğer testlerde tekrar kullanabilirsiniz (`storageState` özelliği). Bu yaklaşım, son projemde test süresini 15 dakikadan 4 dakikaya indirdi. ## Gerçek Dünya Proje Örneği: E-Ticaret Otomasyonu Baştan sona çalışan basit bir e-ticaret sepete ekleme senaryosu yazalım. Hedefimiz: SauceDemo (popüler bir test sitesi) üzerinde login olmak ve ürün eklemek. **Dosya:** `tests/cart.spec.ts` ```typescript import { test, expect } from '@playwright/test'; test.describe('E-Ticaret Sepet İşlemleri', () => { test.beforeEach(async ({ page }) => { // Her testten önce login ol await page.goto('https://www.saucedemo.com/'); await page.locator('[data-test="username"]').fill('standard_user'); await page.locator('[data-test="password"]').fill('secret_sauce'); await page.locator('[data-test="login-button"]').click(); }); test('Kullanıcı sepete ürün ekleyebilmeli', async ({ page }) => { // Ürünü sepete ekle await page.locator('[data-test="add-to-cart-sauce-labs-backpack"]').click(); // Sepet ikonundaki sayının 1 olduğunu doğrula const badge = page.locator('.shopping_cart_badge'); await expect(badge).toHaveText('1'); // Sepete git ve ürünün orada olduğunu gör await page.locator('.shopping_cart_link').click(); await expect(page.getByText('Sauce Labs Backpack')).toBeVisible(); }); }); ``` Testi çalıştırmak için terminale şunu yazın: ```bash npx playwright test tests/cart.spec.ts --headed ``` *(Not: `--headed` bayrağı, tarayıcıyı görsel olarak açarak testin adımlarını izlemenizi sağlar. CI ortamında bu bayrak kullanılmaz.)* ## Özetle Önemli Noktalar - Playwright, modern, hızlı ve çoklu tarayıcı destekli bir E2E test aracıdır. - Kurulum için sadece `npm init playwright@latest` komutu yeterlidir. - Test yazarken her zaman `getByRole`, `getByText` gibi kullanıcı odaklı locator'ları tercih edin. - Asla `waitForTimeout` (hard sleep) kullanmayın; Playwright'ın auto-wait mekanizmasına güvenin. - Büyük projelerde kod tekrarını önlemek için Page Object Model (POM) mimarisini kurgulayın. - API mocking yeteneği sayesinde backend bağımlılığını ortadan kaldırabilirsiniz. - Paralel test execution ile CI/CD pipeline sürelerinizi minimize edin. ## Sık Sorulan Sorular (FAQ) ### Playwright nedir ve ne işe yarar? Playwright, web uygulamalarının uçtan uca (E2E) test edilmesini ve web scraping işlemlerini otomatize etmeyi sağlayan, Microsoft yapımı açık kaynaklı bir araçtır. Tarayıcıları kod ile yönetmenizi sağlar. ### Playwright ile Selenium arasındaki fark nedir? Selenium eski nesil WebDriver protokolünü kullanırken hantaldır; Playwright ise doğrudan tarayıcı ile WebSocket üzerinden haberleşerek çok daha hızlı, stabil ve modern web'e (SPA) uyumlu bir mimari sunar. ### Playwright nasıl kurulur? Sisteminizde Node.js yüklüyken terminale `npm init playwright@latest` yazarak tüm bağımlılıkları, konfigürasyon dosyalarını ve tarayıcıları tek adımda kurabilirsiniz. ### Playwright öğrenmek ne kadar sürer? Eğer temel seviyede JavaScript/TypeScript biliyorsanız, Playwright'ın temel konseptlerini ve ilk testlerinizi yazmayı 1-2 gün içinde öğrenebilirsiniz. İleri seviye mimariler için 2-3 haftalık pratik gerekebilir. ### Playwright için en iyi diller hangileridir? Playwright Python, Java ve .NET desteklese de, en iyi dokümantasyon, topluluk desteği ve TypeScript entegrasyonu nedeniyle JavaScript/TypeScript ekosistemi en çok tercih edilenidir. ### Playwright production'da kullanılır mı? Kesinlikle. Netflix, Disney+, Adobe ve Microsoft gibi teknoloji devleri, CI/CD süreçlerinde kalite güvencesi (QA) için production ortamlarında Playwright kullanmaktadır. ### Yeni başlayanlar için Playwright önerilir mi? Evet, kurulumunun basitliği, auto-wait özelliği sayesinde hataları azaltması ve mükemmel dokümantasyonu ile yeni başlayan QA mühendisleri ve developer'lar için harika bir başlangıç noktasıdır. ### Playwright güvenli mi? Evet, açık kaynaklıdır ve arkasında Microsoft'un güçlü bir mühendislik ekibi bulunmaktadır. Düzenli güvenlik güncellemeleri alır ve izole tarayıcı context'leri sayesinde test verileri güvende kalır. ## Sonuç ve Sonraki Adımlar Bu rehberde, Playwright nedir sorusundan başlayarak, kurulum adımlarını, temel kullanım senaryolarını ve best practice'leri detaylıca inceledik. Playwright'ın sunduğu hız ve stabilite, modern web geliştirme süreçlerinde onu vazgeçilmez bir DevOps aracı yapıyor. Bundan sonraki adımınız, kendi projelerinizden birine Playwright'ı entegre edip ilk login senaryonuzu yazmak olmalıdır. Konu hakkında daha fazla derinleşmek isterseniz, Playwright'ın resmi dokümantasyonundaki 'Trace Viewer' ve 'CI/CD Integration' bölümlerini incelemenizi şiddetle tavsiye ederim. Test otomasyonu ve DevOps dünyasına dair daha fazla güncel içerik için blog'umuzu takip etmeye devam edin, hemen uygulayın ve kalite süreçlerinizi iyileştirin.