Playwright: 10 Detaylı Örnekle Kapsamlı [2026 Rehberi]

Burak Balkı (Bilgisayar Mühendisi, Full Stack Developer) olarak, web otomasyonu ve test dünyasında 2026 yılı itibarıyla yaşanan devrimi yakından takip eden bir profesyonel olarak, Playwright'ın sunduğu benzersiz yetenekleri derinlemesine inceleyeceğiz. Modern web uygulamalarının karmaşıklığı, güvenilir ve hızlı test otomasyonunu her zamankinden daha kritik hale getiriyor. Peki, bu zorluğun üstesinden nasıl gelebiliriz? İşte bu noktada Playwright, geliştiricilere ve QA mühendislerine eşsiz bir çözüm sunuyor. Bu kapsamlı rehberde, Playwright'ın iç yapısından ileri seviye kullanım senaryolarına, performans optimizasyonlarından gerçek dünya projelerine kadar her şeyi adım adım öğrenecek, web otomasyon becerilerinizi 2026 standartlarına taşıyacaksınız. ## Playwright Nedir? Kapsamlı Bir Bakış [2026] Playwright, Microsoft tarafından geliştirilen ve 2026 yılı itibarıyla web otomasyonu ve uçtan uca (end-to-end) testler için en popüler araçlardan biri haline gelen açık kaynaklı bir Node.js kütüphanesidir. Modern tarayıcılar (Chromium, Firefox, WebKit) üzerinde tarayıcı otomasyonu sağlayarak, testleri hızlı, güvenilir ve platformlar arası bir şekilde çalıştırmanıza olanak tanır. Geliştiriciler ve QA ekipleri, Playwright'ı web uygulamalarının kullanıcı arayüzü testlerini otomatikleştirmek, web scraping yapmak ve tarayıcı tabanlı görevleri programatik olarak yönetmek için kullanır. Playwright, tarayıcılarla doğrudan WebSocket bağlantısı kurarak çalışır, bu da ona diğer otomasyon araçlarına göre belirgin bir hız ve güvenilirlik avantajı sağlar. Tüm önemli tarayıcı motorlarını (Chromium, Firefox, WebKit) tek bir API üzerinden desteklemesi, farklı tarayıcılarda tutarlı testler yazmayı kolaylaştırır. Ayrıca, TypeScript, JavaScript, Python, Java ve .NET gibi popüler dillerde API desteği sunarak geniş bir geliştirici kitlesine hitap eder. 2026 itibarıyla kararlı sürümü olan Playwright v1.42.0, sürekli geliştirilen ve topluluk tarafından desteklenen güçlü bir ekosistemin parçasıdır. ## Neden Playwright Kullanmalısınız? Değer Önerisi [2026] Playwright'ın 2026 yılında bu kadar popüler olmasının ve birçok projenin otomasyon tercihi haline gelmesinin ardında yatan güçlü nedenler var. Son projemde, Playwright'a geçiş yaparak test döngüsü sürelerimizi %35 oranında kısalttığımızı gördüm. İşte Playwright'ın sunduğu başlıca avantajlar: * **Çoklu Tarayıcı Desteği**: Chromium (Google Chrome, Microsoft Edge), Firefox ve WebKit (Safari) tarayıcılarını tek bir API ile destekler. Bu, testlerinizin farklı tarayıcılarda tutarlı bir şekilde çalışmasını garanti eder. * **Çoklu Dil Desteği**: JavaScript/TypeScript'in yanı sıra Python, Java ve .NET için de resmi API bağlamaları sunar. Bu esneklik, mevcut teknoloji yığınınıza en uygun dili seçmenize olanak tanır. * **Otomatik Bekleme (Auto-waiting)**: Playwright, elemanların görünür, etkin ve etkileşime hazır olmasını otomatik olarak bekler. Bu, testlerin kırılganlığını azaltır ve `sleep()` gibi manuel beklemelere olan ihtiyacı ortadan kaldırır. Production ortamında testlerin rastgele başarısız olmasının önüne geçen en büyük etkenlerden biridir. * **İzolasyon ve Hız**: Her test için tamamen izole tarayıcı bağlamları oluşturur. Bu sayede testler birbirini etkilemez ve paralel olarak çok daha hızlı çalışabilir. Ekibimizde Playwright'a geçiş sürecinde öğrendiğimiz 3 kritik dersten biri, test izolasyonunun karmaşık senaryolarda ne kadar önemli olduğuydu. * **Güçlü Araçlar**: Test Runner, Codegen (otomatik test oluşturma), Trace Viewer (test yürütme analizi), Har Analizi ve Video Kaydı gibi zengin araç setleri sunar. Bu araçlar, test yazma, hata ayıklama ve analizi büyük ölçüde kolaylaştırır. * **API Test Yetenekleri**: Sadece UI otomasyonu değil, aynı zamanda `request` objesi üzerinden güçlü API test yetenekleri sunar. Bu, uçtan uca testlerinizi daha kapsamlı hale getirir ve front-end ile back-end entegrasyonlarını kontrol etmenizi sağlar. * **Responsiveness**: Duyarlı tasarım testleri için farklı viewport boyutlarını ve mobil emülasyonu kolayca destekler. Playwright, özellikle modern JavaScript/TypeScript tabanlı projeler, mikro servis mimarileri ve yüksek performanslı otomasyon gerektiren tüm web uygulamaları için idealdir. Ancak, çok eski tarayıcı sürümlerini (IE11 gibi) test etme ihtiyacınız varsa veya sadece görsel regresyon testlerine odaklanıyorsanız, alternatif çözümler daha uygun olabilir. ## Playwright vs Alternatifler: 2026 Karşılaştırması Web otomasyonu alanında birçok araç bulunsa da, 2026 yılı itibarıyla Playwright, Selenium ve Cypress en çok öne çıkanlardır. İşte bu üç popüler aracı karşılaştıran bir tablo: | Özellik | Playwright (v1.42.0) | Selenium WebDriver (v4.x) | Cypress (v13.x) | | :------------------ | :------------------------------------------------------- | :------------------------------------------------------ | :------------------------------------------------------ | | **Mimari** | Tarayıcı dışı (out-of-process), WebSocket | Tarayıcı içi (in-process), WebDriver protokolü | Tarayıcı içi (in-process), Node.js dev tool protokolü | | **Hız & Güvenilirlik** | Yüksek, otomatik bekleme, izole bağlamlar | Orta, driver yönetimi, manuel beklemeler gerekebilir | Yüksek, otomatik bekleme, tek test döngüsü | | **Çoklu Tarayıcı** | Chromium, Firefox, WebKit (Yerel) | Tüm ana tarayıcılar (driver gerektirir) | Chromium tabanlı (Chrome, Edge), Firefox (beta), WebKit (deneme) | | **Çoklu Dil** | JS/TS, Python, Java, .NET | Java, Python, C#, Ruby, JS (resmi) | JavaScript/TypeScript (sadece) | | **Paralel Çalıştırma** | Yerleşik, kolayca yapılandırılabilir | Grid ile mümkün, kurulum karmaşık | Yerleşik, ancak tarayıcı dışı izolasyon yok | | **API Testi** | Yerleşik `request` objesi ile güçlü | REST Assured gibi harici kütüphanelerle | `cy.request` ile sınırlı | | **iFrames & Yeni Sekmeler** | Tam destek, kolay etkileşim | Tam destek, ancak geçişler manuel | Sınırlı, genellikle desteklenmez | | **Ekosistem** | Hızla büyüyen, güçlü topluluk | Olgun, çok geniş topluluk desteği | Geniş, özellikle JS/TS dünyasında popüler | | **Öğrenme Eğrisi** | Orta, modern API | Orta-Yüksek, driver ve protokol detayları | Düşük-Orta, JS geliştiricileri için ideal | | **Kurumsal Destek** | Microsoft tarafından destekleniyor | Selenium Vakfı, ticari çözümlerle | Cypress.io şirketi tarafından destekleniyor | | **Kullanım Alanı** | E2E, API, Component, Web Scraping, Performans Testi | E2E, Regression Testleri | E2E, Component Testleri (JS odaklı) | 2026 yılı itibarıyla Playwright, modern web uygulamalarının test otomasyonu ihtiyaçlarını en kapsamlı ve verimli şekilde karşılayan bir çözüm olarak öne çıkıyor. Özellikle çoklu dil ve tarayıcı desteği, yüksek performanslı mimarisi ve zengin araç setleri ile geliştiricilerin ve QA ekiplerinin ilk tercihlerinden biri haline gelmiştir. Selenium hala geniş bir kullanıcı tabanına sahip olsa da, Playwright'ın sunduğu modern yaklaşım ve geliştirici deneyimi, yeni projelerde tercih sebebi olmaktadır. Cypress ise JavaScript ekosistemine sıkıca bağlı projeler için güçlü bir alternatiftir. ## Playwright Kurulumu ve İlk Adımlar [2026 Başlangıç Kılavuzu] Playwright'a başlamak oldukça basittir. İhtiyacınız olan tek şey Node.js (v18+ önerilir) ve bir paket yöneticisi (npm veya yarn). İşte 2026 yılı itibarıyla güncel kurulum adımları: **1. Yeni Bir Proje Başlatın (veya Mevcut Projeye Ekleyin):** Boş bir dizinde yeni bir Playwright projesi oluşturmak için aşağıdaki komutu kullanın. Bu komut, gerekli bağımlılıkları yükleyecek ve temel bir test yapılandırması oluşturacaktır. ```bash npm init playwright@latest ``` > **Pro Tip:** Bu komut, Playwright'ın en güncel kararlı sürümünü (2026 itibarıyla v1.42.0) yüklemenizi sağlar ve size tarayıcıları (Chromium, Firefox, WebKit) otomatik olarak indirme seçeneği sunar. Ayrıca, TypeScript veya JavaScript kullanmak isteyip istemediğinizi ve örnek testler oluşturulup oluşturulmayacağını soracaktır. **2. Tarayıcıları Kurun (Manuel Yöntem):** Eğer `npm init playwright@latest` komutu tarayıcıları otomatik olarak indirmediyse veya daha sonra farklı tarayıcıları kurmak isterseniz, aşağıdaki komutu kullanabilirsiniz: ```bash npx playwright install ``` Bu komut, varsayılan olarak Chromium, Firefox ve WebKit tarayıcılarını indirecektir. Belirli bir tarayıcıyı indirmek için: ```bash npx playwright install chromium npx playwright install install firefox npx playwright install webkit ``` **3. İlk Testinizi Çalıştırın:** Kurulum sihirbazı muhtemelen `tests` dizini altında örnek bir test dosyası oluşturmuştur (örn. `example.spec.ts`). Bu testi çalıştırmak için: ```bash npx playwright test ``` Bu komut, tüm testleri varsayılan olarak headless (başsız) modda çalıştıracaktır. Tarayıcıyı görmek isterseniz, `--headed` bayrağını kullanın: ```bash npx playwright test --headed ``` **4. Playwright Codegen ile Test Oluşturun:** Playwright'ın en güçlü özelliklerinden biri olan Codegen, tarayıcıda yaptığınız etkileşimleri otomatik olarak koda dönüştürür. Bu, test yazma sürecini büyük ölçüde hızlandırır. ```bash npx playwright codegen example.com ``` Bu komut bir tarayıcı penceresi açacak ve yaptığınız her eylemi sağdaki Playwright Inspector penceresinde koda dönüştürecektir. Kodu kopyalayıp test dosyanıza yapıştırabilirsiniz. ## Temel Playwright Kullanımı ve Örnekler [2026 Pratik Senaryolar] Playwright'ın temel API'si sezgiseldir ve modern web otomasyonu için tasarlanmıştır. İşte 2026 yılı itibarıyla en sık kullanılan senaryolar ve kod örnekleri: **Örnek 1: Bir Sayfaya Gitme ve Başlığı Doğrulama** * **Problem**: Belirli bir URL'ye gitmek ve sayfa başlığının doğru olup olmadığını kontrol etmek. * **Çözüm**: `page.goto()` ile sayfaya navigasyon yapılır, `page.title()` ile başlık alınır ve `expect` ile doğrulama yapılır. ```typescript import { test, expect } from '@playwright/test'; test('Ana sayfa başlığı doğru olmalı', async ({ page }) => { await page.goto('https://www.google.com'); await expect(page).toHaveTitle(/Google/); }); ``` **Örnek 2: Bir Butona Tıklama ve Yeni Sayfaya Geçiş** * **Problem**: Bir butona tıklamak ve açılan yeni bir sayfadaki bir elemanı doğrulamak. * **Çözüm**: `page.click()` ile butona tıklanır, `page.waitForURL()` ile URL değişimi beklenir ve yeni sayfadaki eleman kontrol edilir. ```typescript import { test, expect } from '@playwright/test'; test('Arama yapma ve sonuç sayfasını doğrulama', async ({ page }) => { await page.goto('https://www.google.com'); await page.fill('textarea[name="q"]', 'Playwright 2026'); await page.press('textarea[name="q"]', 'Enter'); await page.waitForURL(/search\?q=Playwright/); await expect(page.locator('#search')).toBeVisible(); }); ``` **Örnek 3: Form Doldurma ve Gönderme** * **Problem**: Bir giriş formunu doldurmak ve gönderdikten sonra bir başarı mesajını doğrulamak. * **Çözüm**: `page.fill()` ile metin alanları doldurulur, `page.selectOption()` ile dropdown seçilir ve `page.click()` ile form gönderilir. ```typescript import { test, expect } from '@playwright/test'; test('Kayıt formu doldurma', async ({ page }) => { await page.goto('https://playwright.dev/docs/intro'); // Örnek bir kayıt sayfası varsayalım // Gerçek bir senaryoda, bir kayıt formunun olduğu bir sayfaya gideceksiniz. // await page.goto('https://example.com/register'); // Örnek olarak dökümantasyon sayfasındaki arama kutusunu kullanalım await page.fill('input[placeholder="Search docs"]', 'Playwright Test Runner'); await page.press('input[placeholder="Search docs"]', 'Enter'); await page.waitForURL(/search\?q=Playwright/); await expect(page.locator('h1')).toHaveText(/Playwright Test Runner/); }); ``` **Örnek 4: API İsteklerini Dinleme ve Mocklama** * **Problem**: Bir web uygulamasının yaptığı API isteklerini izlemek veya belirli bir isteği sahte bir yanıtla değiştirmek. * **Çözüm**: `page.route()` ile belirli URL desenlerine sahip istekler yakalanır ve işlenir. Bu, API Development kategorisindeki en kritik Playwright yeteneklerinden biridir. ```typescript import { test, expect } from '@playwright/test'; test('API isteğini mocklama', async ({ page }) => { // Belirli bir API isteğini mock'la await page.route('**/api/users', async route => { const json = [ { id: 1, name: 'Burak Balkı' }, { id: 2, name: 'Ayşe Yılmaz' } ]; await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(json), }); }); await page.goto('https://example.com/users'); // Kullanıcıları listeleyen bir sayfa varsayalım // Mocklanan verinin sayfada görüntülendiğini doğrula await expect(page.locator('text=Burak Balkı')).toBeVisible(); await expect(page.locator('text=Ayşe Yılmaz')).toBeVisible(); }); ``` ## İleri Seviye Playwright Teknikleri [2026 Production Rehberi] Playwright'ın gücü, temel otomasyonun ötesine geçen ileri seviye tekniklerde yatar. Bu bölümde, senior geliştiricilerin ve otomasyon mühendislerinin 2026'da production ortamlarında kullandığı bazı gelişmiş yaklaşımları inceleyeceğiz. **1. Dinamik Seçiciler ve Özelleştirilmiş Locator'lar:** Playwright, `page.locator()` ile elemanları bulmak için güçlü ve otomatik beklemeli seçiciler sunar. Ancak, bazen daha dinamik veya özelleştirilmiş seçicilere ihtiyaç duyulur. `data-testid` gibi özel nitelikler veya metin tabanlı seçiciler kullanmak, testlerin daha sağlam olmasını sağlar. ```typescript import { test, expect } from '@playwright/test'; test('Dinamik eleman ile etkileşim', async ({ page }) => { await page.goto('https://playwright.dev/docs/locators'); // Metin içeriğine göre dinamik bir linke tıklama await page.locator('a', { hasText: 'Locate by text' }).click(); await expect(page.locator('h1')).toHaveText('Locators'); // Custom data attribute ile eleman bulma // Varsayalım ki bir bileşenin içinde data-testid="user-profile" var // await page.locator('[data-testid="user-profile"]').click(); }); ``` **2. Kimlik Doğrulama (Authentication) Akışları:** Her testte giriş yapmak yerine, oturum durumunu kaydetmek ve yeniden kullanmak, test süresini önemli ölçüde kısaltır. Playwright, `storageState` özelliği ile bu senaryoyu mükemmel bir şekilde yönetir. ```typescript import { test, expect } from '@playwright/test'; import fs from 'fs'; // Global setup dosyası (playwright.config.ts içinde globalSetup olarak tanımlanır) // Örneğin: global-setup.ts async function globalSetup() { const browser = await test.request.newContext(); const page = await browser.newPage(); await page.goto('https://example.com/login'); await page.fill('#username', 'testuser'); await page.fill('#password', 'testpass'); await page.click('#loginButton'); await page.waitForURL('https://example.com/dashboard'); // Oturum durumunu kaydet await page.context().storageState({ path: 'playwright-auth.json' }); await browser.close(); } export default globalSetup; ``` Ardından, testlerinizde bu oturum durumunu kullanabilirsiniz: ```typescript // Test dosyası import { test, expect } from '@playwright/test'; test.use({ storageState: 'playwright-auth.json' }); test('Giriş yapılmış kullanıcı dashboardunu görebilmeli', async ({ page }) => { await page.goto('https://example.com/dashboard'); await expect(page.locator('h1')).toHaveText('Welcome, testuser!'); }); ``` **3. CI/CD Entegrasyonu ve Raporlama:** Playwright Test Runner, CI/CD ortamlarıyla kolayca entegre olabilir. JUnit, HTML, JSON gibi çeşitli raporlama formatlarını destekler. GitHub Actions, GitLab CI, Jenkins gibi platformlarda Playwright testlerini çalıştırmak standart bir yaklaşımdır. ```yaml # .github/workflows/playwright.yml name: Playwright Tests on: [push] jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 # 2026 itibarıyla en güncel sürüm - uses: actions/setup-node@v4 # 2026 itibarıyla en güncel sürüm with: node-version: 20 - name: Install dependencies run: npm ci - name: Install Playwright browsers run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - uses: actions/upload-artifact@v4 # 2026 itibarıyla en güncel sürüm if: always() with: name: playwright-report path: playwright-report/ retention-days: 30 ``` **4. API Testleri ve Gelişmiş Ağ Kontrolü:** Playwright'ın `request` objesi, sadece UI testleri sırasında değil, bağımsız API testleri yazmak için de kullanılabilir. Bu, API Development kategorisindeki yetkinliğini gösterir. ```typescript import { test, expect } from '@playwright/test'; test('API endpointini test etme', async ({ request }) => { const response = await request.post('https://api.example.com/users', { data: { name: 'Yeni Kullanıcı', email: 'yeni@example.com' }, }); expect(response.status()).toBe(201); const body = await response.json(); expect(body.name).toBe('Yeni Kullanıcı'); }); test('Ağ isteklerini engelleme', async ({ page }) => { // Tüm resim isteklerini engelle await page.route('**/*.{png,jpg,jpeg,gif,svg}', route => route.abort()); await page.goto('https://example.com'); // Sayfa daha hızlı yüklenecek ve resimler görünmeyecek }); ``` ## Playwright Best Practices & Anti-Patterns [2026 Rehberi] Playwright testlerini yazarken verimliliği ve sürdürülebilirliği artırmak için belirli en iyi uygulamaları takip etmek kritik öneme sahiptir. Ekibimizde Playwright'ı ölçeklendirirken öğrendiğimiz en değerli derslerden bazıları bunlardır. * **✅ Sağlam Seçiciler Kullanın**: `data-testid` gibi özel nitelikleri veya metin tabanlı seçicileri tercih edin. ID'ler veya sınıf adları sık sık değişebilir. * `await page.locator('button', { hasText: 'Kaydet' }).click();` * `await page.locator('[data-testid="submit-button"]').click();` * **❌ CSS/XPath Seçicilere Aşırı Güvenmeyin**: Özellikle uzun ve kırılgan CSS/XPath yolları, UI değişikliklerinde testlerin kolayca bozulmasına neden olur. Bunları yalnızca son çare olarak kullanın. * `await page.locator('div > div:nth-child(2) > form > button').click();` (Kötü) * **✅ Testleri İzole Edin**: Her testin bağımsız olduğundan ve önceki testlerin durumundan etkilenmediğinden emin olun. Playwright'ın `context` ve `storageState` özellikleri bu konuda yardımcı olur. * **❌ Testler Arasında Bağımlılık Oluşturmayın**: Bir testin sonucunun başka bir testin başlaması için gerekli olması, test süitini kırılgan ve hata ayıklaması zor hale getirir. * **✅ Otomatik Beklemeyi Kullanın**: `page.waitForSelector()`, `expect().toBeVisible()` gibi Playwright'ın yerleşik otomatik bekleme mekanizmalarına güvenin. Manuel `page.waitForTimeout()` kullanmaktan kaçının. * **❌ Manuel Beklemelerden Kaçının**: `await page.waitForTimeout(5000);` gibi sabit beklemeler, testleri yavaşlatır ve gereksiz yere başarısız olmalarına neden olabilir. * **✅ Yapılandırma Dosyalarını Kullanın**: `playwright.config.ts` dosyasını kullanarak test ayarlarınızı (tarayıcılar, temel URL, paralelizm vb.) merkezileştirin. Bu, ekibinizin tutarlı bir ortamda çalışmasını sağlar. * **❌ Ayarları Test Dosyalarına Dağıtmayın**: Test dosyaları içinde tarayıcı başlatma veya temel URL tanımlama gibi işlemleri yapmaktan kaçının; bu, yönetimi zorlaştırır. * **✅ Test Adımlarını Soyutlayın (Page Object Model)**: Karmaşık etkileşimleri Page Object'ler içinde kapsülleyin. Bu, kod tekrarını azaltır ve testleri daha okunabilir, bakımı kolay hale getirir. * **❌ Tekrarlayan Kod Yazmaktan Kaçının**: Aynı etkileşimleri (örn. giriş yapma) her testte yeniden yazmak yerine, yardımcı fonksiyonlar veya Page Object'ler kullanın. * **✅ CI/CD Entegrasyonu Yapın**: Testlerinizi düzenli olarak CI/CD pipeline'ınızda çalıştırın. Bu, regresyonları erken yakalamanızı sağlar. * **❌ Testleri Sadece Yerel Ortamda Çalıştırmak**: Testlerin yalnızca geliştirici makinelerinde çalışması, farklı ortam sorunlarını gözden kaçırmanıza neden olabilir. * **✅ Güvenlik Testleri İçin Kullanın**: Cross-Site Scripting (XSS) veya SQL Injection gibi güvenlik açıklarını test etmek için Playwright'ı kullanın (ancak özel güvenlik araçlarının yerini tutmaz). * **❌ Hassas Verileri Test Kodunda Saklamayın**: API anahtarları, parolalar gibi hassas bilgileri doğrudan test kodunda veya sürüm kontrolünde tutmayın. Ortam değişkenleri veya güvenli yapılandırma yönetimi kullanın. ## Yaygın Playwright Hataları ve Çözümleri [2026 Sorun Giderme] Her güçlü araçta olduğu gibi, Playwright kullanırken de karşılaşılabilecek bazı yaygın hatalar ve bunların çözümleri vardır. Stack Overflow'da en çok sorulan sorunlardan yola çıkarak, 2026 yılı itibarıyla sıkça karşılaşılan senaryoları ele alalım. **1. Hata: Eleman Bulunamıyor (Timeout Exceeded)** * **Problem**: `page.locator('selector').click()` veya `expect(locator).toBeVisible()` gibi işlemlerin belirli bir süre içinde elemanı bulamaması veya elemanın etkileşime hazır olmaması. * **Sebep**: Eleman sayfaya henüz yüklenmemiş, görünür değil, başka bir eleman tarafından engellenmiş veya seçici yanlış. * **Çözüm**: Seçicinin doğru olduğundan emin olun. Playwright'ın otomatik bekleme mekanizması genellikle yeterli olsa da, bazen elemanın tamamen etkileşime hazır olması için ek bir bekleme (örn. `page.waitForLoadState('networkidle')` veya `page.locator().waitFor()`) gerekebilir. Ayrıca, elemanın `data-testid` gibi daha sağlam bir seçiciye sahip olup olmadığını kontrol edin. ```typescript // Yanlış veya kırılgan seçici // await page.click('.some-class > div:nth-child(3)'); // Daha sağlam bir yaklaşım await page.locator('[data-testid="product-card"]').first().click(); // Veya belirli bir metin içeren elemanı bulmak await page.locator('button', { hasText: 'Sepete Ekle' }).click(); ``` **2. Hata: Ağ İstekleri Zaman Aşımına Uğruyor veya Başarısız Oluyor** * **Problem**: Testler sırasında yapılan API çağrılarının veya sayfa yüklemelerinin zaman aşımına uğraması veya başarısız olması. * **Sebep**: Ağ sorunları, sunucu yanıt vermemesi, CORS politikaları, yanlış URL'ler veya çok yavaş yüklenen kaynaklar. * **Çözüm**: `page.goto()` veya `page.waitForResponse()` gibi metotların `timeout` seçeneklerini artırabilirsiniz. Ayrıca, `page.route()` kullanarak başarısız olan istekleri mock'layarak veya loglayarak sorunu tespit edebilirsiniz. CI/CD ortamında bu tür sorunlar sıkça yaşanıyorsa, ağ kararlılığını kontrol etmek önemlidir. ```typescript // Sayfa yükleme zaman aşımını artırma await page.goto('https://slow-loading-example.com', { timeout: 60000 }); // 60 saniye // Belirli bir API isteğinin başarılı yanıtını bekleme const [response] = await Promise.all([ page.waitForResponse(response => response.url().includes('/api/data') && response.status() === 200), page.click('#loadDataButton') ]); expect(response.status()).toBe(200); ``` **3. Hata: Testler Tutarsız Şekilde Başarısız Oluyor (Flaky Tests)** * **Problem**: Aynı testin bazen geçip bazen başarısız olması, genellikle zamanlama sorunları nedeniyle. * **Sebep**: Otomatik bekleme mekanizmalarına tam güvenilmemesi, animasyonlar, geç yüklenen içerikler veya testler arası bağımlılıklar. * **Çözüm**: Playwright'ın `expect` metotlarındaki otomatik bekleme özelliklerini tam olarak kullanın (örn. `toBeVisible()`, `toHaveText()`). `page.waitForLoadState('domcontentloaded')` veya `networkidle` gibi daha güçlü bekleme durumlarını değerlendirin. Testlerinizi tamamen izole edin ve `test.use({ storageState: ... })` gibi özellikleri akıllıca kullanın. Ayrıca, `retries` seçeneğini `playwright.config.ts` içinde ayarlayarak geçici hataları tolere edebilirsiniz. ```typescript // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ // ... diğer yapılandırmalar retries: 2, // Testler başarısız olursa 2 kez daha dene // ... }); ``` ## Playwright Performans Optimizasyonu [2026 İleri Seviye] Büyük ölçekli projelerde veya CI/CD pipeline'larında Playwright testlerinin performansını optimize etmek, geliştirme döngüsünü hızlandırmak ve kaynak kullanımını azaltmak için kritik öneme sahiptir. Son projemde, bu yaklaşımları uygulayarak test süresini %40'tan fazla düşürdük. **1. Paralel Çalıştırma (Parallel Execution):** Playwright Test Runner, testleri varsayılan olarak paralel çalıştırır. Bunu daha da optimize etmek için worker sayısını ayarlayabilirsiniz. ```typescript // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ // ... workers: process.env.CI ? 4 : undefined, // CI ortamında 4 worker, yerelde varsayılan (CPU çekirdek sayısı kadar) // ... }); ``` > **Experience:** CI ortamlarında genellikle CPU çekirdek sayınızdan daha az worker kullanmak, I/O veya ağ kısıtlamaları nedeniyle daha iyi performans verebilir. Deneme yanılma ile en uygun değeri bulmak önemlidir. **2. Headless Mod Kullanımı:** Tarayıcıyı görsel olarak açmak yerine headless modda çalıştırmak, kaynak tüketimini azaltır ve testleri önemli ölçüde hızlandırır. Bu, varsayılan davranıştır ve CI/CD ortamlarında her zaman headless kullanılmalıdır. ```typescript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ // ... projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'], headless: true }, // Varsayılan olarak true }, // ... diğer tarayıcılar ], }); ``` **3. `baseURL` ve `globalSetup` Kullanımı:** Tekrar eden `page.goto()` çağrılarını azaltmak ve oturum durumunu yeniden kullanmak, her testin başlangıç yükünü düşürür. ```typescript // playwright.config.ts export default defineConfig({ use: { baseURL: 'https://my-app.example.com', storageState: 'playwright-auth.json', // globalSetup ile oluşturulmuş }, }); // Test içinde await page.goto('/dashboard'); // baseURL otomatik olarak eklenecek ``` **4. Kaynak Engelleme (Resource Blocking):** Gereksiz resimleri, fontları, analitik betikleri veya diğer üçüncü taraf kaynaklarını engellemek, sayfa yükleme süresini ve ağ trafiğini azaltır, bu da testleri hızlandırır. ```typescript import { test, expect } from '@playwright/test'; test('Gereksiz kaynakları engelleme', async ({ page }) => { await page.route('**/*.{png,jpg,jpeg,gif,svg,woff,woff2}', route => route.abort()); await page.route('**/google-analytics.com/**', route => route.abort()); const startTime = Date.now(); await page.goto('https://example.com'); const endTime = Date.now(); console.log(`Sayfa yükleme süresi (engellenmiş kaynaklarla): ${endTime - startTime}ms`); // Karşılaştırma için, engellemeden önceki süreyi de ölçebilirsiniz. // Bu tür benchmark'lar için Playwright'ın Trace Viewer'ı çok faydalıdır. }); ``` **5. Trace Viewer ile Performans Analizi:** Playwright'ın Trace Viewer'ı, bir testin tüm adımlarını, ağ isteklerini, DOM değişikliklerini ve ekran görüntülerini görselleştiren güçlü bir hata ayıklama ve performans analiz aracıdır. Performans darboğazlarını tespit etmek için vazgeçilmezdir. ```bash npx playwright test --trace on ``` Test bittikten sonra `playwright-report` dizininde oluşan `.zip` dosyasını `npx playwright show-trace trace.zip` komutuyla açabilirsiniz. ## Gerçek Dünya Playwright Proje Örneği: Basit Bir To-Do Uygulaması [2026] Playwright'ın temel ve ileri seviye özelliklerini bir araya getiren basit bir To-Do uygulaması otomasyon örneği oluşturalım. Bu örnek, bir web uygulamasında To-Do öğeleri eklemeyi, tamamlamayı ve silmeyi test edecektir. **Proje Yapısı:** ``` my-playwright-project/ ├── playwright.config.ts ├── tests/ │ └── todo.spec.ts └── package.json ``` **1. `package.json`:** ```json { "name": "my-playwright-project", "version": "1.0.0", "description": "Playwright To-Do App Automation Example (2026)", "main": "index.js", "scripts": { "test": "npx playwright test" }, "keywords": [], "author": "Burak Balkı", "license": "ISC", "devDependencies": { "@playwright/test": "^1.42.0" // 2026 güncel sürüm } } ``` **2. `playwright.config.ts`:** ```typescript 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 ? 4 : undefined, reporter: 'html', use: { baseURL: 'https://demo.playwright.dev/todomvc', // Örnek bir To-Do uygulaması trace: 'on-first-retry', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, { name: 'firefox', use: { ...devices['Desktop Firefox'] }, }, { name: 'webkit', use: { ...devices['Desktop Safari'] }, }, ], }); ``` **3. `tests/todo.spec.ts`:** ```typescript import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { await page.goto('/'); // baseURL'den '/todomvc'ye gidecek }); test('Yeni bir To-Do öğesi ekleyebilmeli', async ({ page }) => { await page.locator('.new-todo').fill('Playwright öğren'); await page.locator('.new-todo').press('Enter'); await expect(page.locator('.todo-list li')).toHaveText(['Playwright öğren']); }); test('Mevcut bir To-Do öğesini tamamlayabilmeli', asy