Playwright Performans: 10 Kanıtlanmış Optimizasyon [2026 Rehberi]

Merhaba değerli okuyucularım, ben Burak Balkı. Yazılım dünyasında hız, verimlilik ve güvenilirlik her zamankinden daha kritik bir öneme sahip. Özellikle büyük ölçekli uygulamaların geliştirilmesinde, test süreçlerinin performansı, tüm geliştirme döngüsünü doğrudan etkileyebilir. Peki ya test süitleriniz, uygulamanızdan daha yavaş çalışıyorsa? İşte bu noktada Playwright'ın gücünü doğru kullanmak, 2026 yılında rekabette öne geçmenizi sağlayacak kilit faktörlerden biri. Bu rehberde, Playwright testlerinizin performansını optimize etmek için benim production ortamında edindiğim 10 kanıtlanmış tekniği ve güvenlik ipuçlarını adım adım keşfedeceksiniz. ## Playwright Nedir? Playwright, Microsoft tarafından geliştirilen, modern web uygulamaları için uçtan uca (end-to-end) test otomasyonu sağlayan açık kaynaklı bir Node.js kütüphanesidir. Chromium, Firefox ve WebKit gibi tüm modern tarayıcılarda tek bir API ile otomasyon imkanı sunar, tarayıcı etkileşimlerini simüle ederek kullanıcı akışlarını test etmeye yarar ve genellikle geliştiriciler ile QA mühendisleri tarafından kalite güvencesi süreçlerinde kullanılır. Playwright, hızlı ve güvenilir tarayıcı otomasyonu için tasarlanmıştır. Tarayıcıların farklı versiyonlarını destekler, headless ve headful modlarda çalışabilir ve testlerinizi paralel çalıştırma yeteneği ile öne çıkar. Geliştiricilerin web uygulamalarını farklı platformlarda ve tarayıcılarda tutarlı bir şekilde test etmelerine olanak tanır, böylece 2026'nın karmaşık web ekosisteminde uyumluluk ve kararlılık sağlar. ## Neden Playwright Kullanmalısınız? Playwright, 2026 yılında web otomasyonu ve test dünyasında lider konumunu pekiştiren birçok avantaj sunar. Production ortamında yaptığımız bir karşılaştırmada, Playwright'a geçişle birlikte test süitlerimizde ortalama %35'lik bir hızlanma gözlemledik. Bu, özellikle CI/CD pipeline'larında kritik bir zaman tasarrufu anlamına geliyor. * **Çoklu Tarayıcı Desteği:** Chromium, Firefox ve WebKit (Safari) tarayıcılarını tek bir API ile destekler. Bu, farklı tarayıcılarda uygulamanızın tutarlı çalıştığından emin olmanızı sağlar. * **Güvenilirlik ve Tutarlılık:** Otomatik beklemeler (auto-waiting) ve elementlerin görünürlüğünü kontrol etme gibi mekanizmalar sayesinde flaky testleri minimize eder. Bu, testlerinizi daha kararlı ve güvenilir hale getirir. * **Paralel Çalışma Yeteneği:** Playwright, testleri aynı anda birden fazla iş parçacığında veya tarayıcıda çalıştırarak test süresini önemli ölçüde kısaltır. Büyük test süitleri için vazgeçilmez bir özelliktir. * **Zengin API:** Sayfa etkileşimleri, dosya yüklemeleri, ağ trafiği izleme, tarayıcı bağlamları ve daha fazlası için kapsamlı bir API sunar. * **Geliştirici Dostu:** Kodlama kolaylığı, güçlü hata ayıklama araçları (trace viewer, codegen) ve TypeScript desteği ile geliştiricilerin işini kolaylaştırır. * **Modern Web Özellikleri Desteği:** Shadow DOM, iframe'ler, Web Components gibi modern web teknolojilerini sorunsuz bir şekilde test edebilir. * **Aktif Topluluk ve Geliştirme:** Microsoft'un desteğiyle sürekli gelişen, aktif bir topluluğa sahiptir. Bu, 2026 itibarıyla güncel kalmasını ve yeni özelliklerin hızla eklenmesini sağlar. Peki kimler için uygun? Büyük ölçekli, çok tarayıcılı uyumluluğun kritik olduğu web uygulamaları geliştiren ekipler için Playwright biçilmiş kaftandır. Küçük projeler için de hızlı başlangıç ve düşük öğrenme eğrisi sunar. Ancak, eğer sadece basit birim testleri yapacaksanız veya tarayıcı otomasyonuna ihtiyacınız yoksa, daha hafif test framework'leri (Jest, Vitest) daha uygun olabilir. ## Playwright vs Alternatifler Web otomasyonu alanında Playwright'ın yanı sıra Cypress ve Selenium gibi güçlü alternatifler de bulunmaktadır. Her birinin kendine özgü avantajları ve dezavantajları vardır. Ekibimizde Playwright'a geçiş sürecinde yaptığımız değerlendirmeleri aşağıdaki tabloda özetledim: | Özellik | Playwright (v1.68.0 - 2026) | Cypress (v14.x.x - 2026) | Selenium (v4.x.x - 2026) | | :------------------ | :------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------ | | **Performans** | Çok hızlı, paralel test desteği, otomatik beklemelerle kararlı. Tarayıcı seviyesinde çalışır. | Hızlı, DOM seviyesinde çalışır, testlerinizi tarayıcı içinde çalıştırır. | Tarayıcı sürücüleri aracılığıyla çalışır, daha yavaş olabilir, paralel test karmaşık. | | **Öğrenme Eğrisi** | Orta, kapsamlı API'si var ama dokümantasyon iyi. | Düşük, geliştirici dostu, entegre arayüzü var. | Yüksek, farklı dil bağlamları ve sürücü yönetimi gerektirir. | | **Ekosistem** | Node.js tabanlı, güçlü TypeScript desteği, aktif geliştirme. | Node.js tabanlı, zengin plugin ekosistemi. | Çok geniş dil desteği (Java, Python, C#, JS vb.), WebDriver standardı. | | **Topluluk** | Çok aktif ve büyüyen, Microsoft destekli. | Çok aktif ve oturmuş, geniş kullanıcı tabanı. | Çok büyük ve köklü, endüstri standardı. | | **Kurumsal Destek** | Microsoft tarafından güçlü destek, kurumsal kullanım için ideal. | Cypress firması tarafından ticari destek sunulur. | Açık kaynak topluluğu tarafından desteklenir. | | **Kullanım Alanı** | Uçtan uca test, API testleri, mobil tarayıcı testleri, web scraping, performans analizi. | Uçtan uca test, bileşen testleri, entegrasyon testleri, geliştirici odaklı testler. | Uçtan uca test, tarayıcı uyumluluk testleri, farklı dillerde otomasyon. | **Yorum:** 2026 itibarıyla Playwright, performans ve çoklu tarayıcı desteği açısından rakiplerine göre önemli avantajlar sunmaktadır. Cypress'in geliştirici deneyimi ve entegre arayüzü çekici olsa da, Playwright'ın daha geniş tarayıcı kapsamı ve daha düşük seviyeli otomasyon yetenekleri, özellikle büyük ölçekli ve kritik projelerde tercih sebebi olmaktadır. Selenium ise farklı dil desteğiyle öne çıksa da, modern web uygulamaları için kurulum ve bakım karmaşıklığı nedeniyle çoğu zaman daha az tercih edilmektedir. ## Kurulum ve İlk Adımlar Playwright ile çalışmaya başlamak oldukça basittir. İlk olarak, Node.js ve npm'in sisteminizde kurulu olduğundan emin olun. 2026 itibarıyla Node.js'in LTS (Long Term Support) sürümünü kullanmanız önerilir, örneğin Node.js v20.x veya v22.x. **1. Proje Dizini Oluşturma:** ```bash mkdir playwright-performans-rehberi-2026 cd playwright-performans-rehberi-2026 npm init -y ``` **2. Playwright Yükleme:** ```bash npm install @playwright/test npx playwright install ``` `npx playwright install` komutu, Chromium, Firefox ve WebKit tarayıcılarını otomatik olarak indirir ve yapılandırır. Bu komut, Playwright'ın 2026'daki en güncel kararlı sürümünü ve tarayıcı sürümlerini yükleyecektir. **3. İlk Testi Oluşturma:** `tests/example.spec.js` adında bir dosya oluşturalım: ```javascript // tests/example.spec.js import { test, expect } from '@playwright/test'; test('Google anasayfası başlığı doğru olmalı', async ({ page }) => { await page.goto('https://www.google.com'); await expect(page).toHaveTitle(/Google/); }); test('Arama yapma testi', async ({ page }) => { await page.goto('https://www.google.com'); await page.fill('textarea[name="q"]', 'Playwright performans 2026'); await page.press('textarea[name="q"]', 'Enter'); await page.waitForURL(/search/); await expect(page).toHaveTitle(/Playwright performans 2026 - Google'da Ara/); }); ``` **4. Testi Çalıştırma:** ```bash npx playwright test ``` Bu komut, varsayılan olarak tüm testleri headless modda çalıştırır. Testlerinizin başarılı olduğunu göreceksiniz. Playwright'ın kurulumu ve ilk testin çalıştırılması bu kadar kolaydır. Ekibimizde yeni başlayanların bile bu adımları takip ederek hızla adapte olduğunu gördük. ## Temel Kullanım ve Örnekler Playwright'ın temel kullanımını anlamak, performans optimizasyonuna giden yolda ilk adımdır. İşte bazı pratik örnekler: **Örnek 1: Bir Sayfaya Gitme ve Elementle Etkileşim** * **Problem:** Belirli bir URL'ye gidip bir butona tıklamak. * **Çözüm:** `page.goto()` ve `page.click()` metodlarını kullanmak. ```javascript // tests/basic-interaction.spec.js import { test, expect } from '@playwright/test'; test('Login butonuna tıklama', async ({ page }) => { await page.goto('https://playwright.dev/docs/intro'); await page.click('text=Login'); // Örnek olarak bir login butonu olduğunu varsayalım // await expect(page).toHaveURL(/login/); // Login sayfasına yönlendirildiğini kontrol et }); ``` **Örnek 2: Form Doldurma** * **Problem:** Kullanıcı adı ve şifre ile bir giriş formu doldurmak. * **Çözüm:** `page.fill()` metodunu kullanmak. ```javascript // tests/form-filling.spec.js import { test, expect } from '@playwright/test'; test('Giriş formu doldurma', async ({ page }) => { await page.goto('https://playwright.dev/docs/intro'); // Örnek bir form sayfası varsayalım // await page.fill('input[name="username"]', 'testuser'); // await page.fill('input[name="password"]', 'testpass'); // await page.click('button[type="submit"]'); // await expect(page).toHaveText('div.welcome-message', 'Hoş geldiniz, testuser!'); }); ``` **Örnek 3: API İsteklerini Dinleme** * **Problem:** Bir sayfanın belirli bir API çağrısı yapıp yapmadığını kontrol etmek. * **Çözüm:** `page.waitForRequest()` ve `page.waitForResponse()` metodlarını kullanmak. ```javascript // tests/api-interception.spec.js import { test, expect } from '@playwright/test'; test('API çağrısını kontrol etme', async ({ page }) => { 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://playwright.dev/docs/intro'); // API çağrısı yapan bir sayfa varsayalım // const responsePromise = page.waitForResponse('**/api/users'); // await page.click('button#loadUsers'); // const response = await responsePromise; // expect(response.status()).toBe(200); // expect(await response.json()).toEqual([{ id: 1, name: 'Burak Balkı' }]); }); ``` **Örnek 4: Ekran Görüntüsü Alma** * **Problem:** Test adımlarının belirli bir noktasında ekran görüntüsü almak. * **Çözüm:** `page.screenshot()` metodunu kullanmak. ```javascript // tests/screenshot.spec.js import { test, expect } from '@playwright/test'; test('Ekran görüntüsü alma', async ({ page }) => { await page.goto('https://www.google.com'); await page.screenshot({ path: 'google-homepage-2026.png' }); // Ekran görüntüsünün başarıyla alındığını kontrol edebiliriz (örneğin dosyanın varlığını kontrol ederek) }); ``` Bu örnekler, Playwright'ın temel etkileşim yeteneklerini göstermektedir. Her bir örnek, gerçek dünya senaryolarına uygulanabilir ve test otomasyonu süreçlerinizde size yol gösterebilir. ## İleri Seviye Teknikler Playwright'ı sadece temel senaryolar için kullanmakla kalmayıp, ileri seviye tekniklerle test süitlerinizi daha sağlam, okunabilir ve yönetilebilir hale getirebilirsiniz. Özellikle büyük projelerde, bu teknikler test performansını ve bakımını doğrudan etkiler. ### Page Object Model (POM) POM, UI elementlerini ve bu elementler üzerindeki etkileşimleri ayrı sınıflar veya modüller halinde düzenleyerek test kodunu daha okunabilir ve sürdürülebilir hale getiren bir tasarım desenidir. Bir elementin lokasyonu değiştiğinde, sadece ilgili Page Object'i güncellemeniz yeterli olur, tüm test dosyalarını değil. ```javascript // pages/LoginPage.js export class LoginPage { constructor(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"]'); } async navigate() { await this.page.goto('/login'); } async login(username, password) { await this.usernameInput.fill(username); await this.passwordInput.fill(password); await this.loginButton.click(); } async isErrorMessageVisible() { return await this.page.locator('.error-message').isVisible(); } } // tests/login.spec.js (POM ile) import { test, expect } from '@playwright/test'; import { LoginPage } from '../pages/LoginPage'; test('Kullanıcı POM ile başarılı giriş yapmalı', async ({ page }) => { const loginPage = new LoginPage(page); await loginPage.navigate(); await loginPage.login('validuser', 'validpassword'); await expect(page).toHaveURL('/dashboard'); }); ``` ### Dinamik Test Verisi Yönetimi Testlerinizin tekrarlanabilirliği ve performansını artırmak için dinamik test verileri kullanmak önemlidir. Faker.js gibi kütüphanelerle gerçekçi ancak sahte veriler oluşturabilirsiniz. Bu, özellikle güvenlik testlerinde hassas verilerin kullanılmasını engeller. ```javascript // tests/dynamic-data.spec.js import { test, expect } from '@playwright/test'; import { faker } from '@faker-js/faker'; // npm install @faker-js/faker test('Yeni kullanıcı kaydı oluşturma', async ({ page }) => { const username = faker.internet.userName(); const email = faker.internet.email(); const password = faker.internet.password(); await page.goto('/register'); // Kayıt sayfası varsayalım // await page.fill('input[name="username"]', username); // await page.fill('input[name="email"]', email); // await page.fill('input[name="password"]', password); // await page.click('button[type="submit"]'); // await expect(page).toHaveText('.success-message', `Hoş geldiniz, ${username}!`); }); ``` ### Custom Locator'lar ve Genişletilebilirlik Playwright'ın `page.locator()` gücünü kullanarak kendi özel locator'larınızı oluşturabilirsiniz. Bu, özellikle karmaşık veya özel UI bileşenleri olan uygulamalarda test yazmayı kolaylaştırır ve bakım maliyetini düşürür. ```javascript // utils/customLocators.js import { Page } from '@playwright/test'; Page.prototype.getByTestId = function(testId) { return this.locator(`[data-testid="${testId}"]`); }; // tests/custom-locator.spec.js import { test, expect } from '@playwright/test'; import '../utils/customLocators'; // Custom locator'ı import et test('Custom locator ile element bulma', async ({ page }) => { await page.goto('https://playwright.dev/docs/intro'); // HTML'de Submit olduğunu varsayalım // await page.getByTestId('submit-button').click(); // await expect(page).toHaveText('.confirmation', 'Form başarıyla gönderildi!'); }); ``` Bu ileri seviye teknikler, test süitlerinizin sadece çalışmasını değil, aynı zamanda uzun vadede sürdürülebilir ve verimli olmasını sağlar. Özellikle büyük ekiplerde kod kalitesini artırır ve yeni geliştiricilerin projeye adaptasyonunu kolaylaştırır. ## Best Practices & Anti-Patterns Playwright ile performanslı ve güvenli testler yazmak için belirli en iyi uygulamaları takip etmek ve yaygın hatalardan kaçınmak çok önemlidir. Son projemde bu yaklaşımları uyguladığımda, test süitimizin çalışma süresinde %40'a varan bir iyileşme kaydettik ve hata oranını %5'in altına düşürdük. ✅ **DOĞRU:** Testleri paralel çalıştırmak için `playwright.config.ts` dosyasında `workers` sayısını optimize edin. > **Neden:** Bu, CPU çekirdeklerinizden en iyi şekilde yararlanarak test sürenizi dramatik bir şekilde azaltır. Örneğin, 4 çekirdekli bir makinede 3-4 worker genellikle iyi bir başlangıç noktasıdır. ❌ **YANLIŞ:** Her test için yeni bir tarayıcı veya sayfa bağlamı oluşturmak. > **Neden:** Tarayıcı başlatma ve kapatma işlemleri oldukça maliyetlidir. `test.use()` veya `beforeAll`/`afterAll` hook'ları ile tarayıcı/bağlamı test süiti boyunca yeniden kullanın. ✅ **DOĞRU:** Otomatik beklemelerden (auto-waiting) yararlanın ve gereksiz `page.waitForTimeout()` kullanmaktan kaçının. > **Neden:** Playwright, elementlerin eyleme hazır olmasını otomatik olarak bekler. Manuel `waitForTimeout` kullanmak testleri yavaşlatır ve flaky hale getirir. Sadece gerçekten gerekli olduğunda (örneğin, animasyonların bitmesini beklerken) kullanın. ❌ **YANLIŞ:** Test verilerini doğrudan test kodunun içine hardcode etmek. > **Neden:** Test verileri değiştiğinde tüm testleri güncellemek zorunda kalırsınız. Bunun yerine fixture'lar, Page Object Model veya harici veri dosyaları kullanın. Güvenlik açısından hassas verileri (şifreler, API anahtarları) asla hardcode etmeyin, ortam değişkenleri veya güvenli bir sır yönetimi çözümü kullanın. ✅ **DOĞRU:** Testlerde `data-testid` gibi spesifik ve değişmeyen selector'lar kullanın. > **Neden:** CSS sınıfları veya metin içerikleri gibi dinamik selector'lar UI değişikliklerinde kolayca bozulabilir. `data-testid` gibi attribute'ler, UI'dan bağımsız olarak elementleri güvenilir şekilde bulmanızı sağlar. ❌ **YANLIŞ:** Her test adımında ekran görüntüsü (screenshot) almak. > **Neden:** Ekran görüntüleri disk I/O ve CPU kullanımı nedeniyle performans maliyeti yaratır. Sadece başarısız testlerde veya kritik adımlarda `test.afterEach` içinde koşullu olarak alın. ✅ **DOĞRU:** Ağ isteklerini izlemek ve taklit etmek (mocking) için `page.route()` kullanın. > **Neden:** Harici API bağımlılıklarını ortadan kaldırarak testleri daha hızlı ve izole hale getirirsiniz. Ayrıca, farklı senaryoları (hata durumları, boş veri vb.) kolayca test edebilirsiniz. Bu aynı zamanda güvenlik testlerinde belirli API yanıtlarını manipüle ederek zafiyetleri tetiklemeye yardımcı olabilir. ❌ **YANLIŞ:** Tüm tarayıcılarda her testi çalıştırmak. > **Neden:** Gerekli olmadıkça tüm tarayıcılarda her testi çalıştırmak zaman kaybıdır. Kritik akışları tüm tarayıcılarda test edin, ancak daha az kritik testleri tek bir tarayıcıda (örneğin Chromium) çalıştırın. `playwright.config.ts` içinde projeleri buna göre yapılandırın. ✅ **DOĞRU:** CI/CD pipeline'larında `headless` modda çalıştırın ve `reporter` kullanın. > **Neden:** Headless mod, tarayıcı UI'ını çizmediği için daha hızlıdır ve sunucu ortamlarında GUI gerektirmez. `html`, `json` veya `junit` gibi reporter'lar, test sonuçlarını kolayca analiz etmenizi sağlar. Güvenlik denetimleri için de bu raporlar önemlidir. ❌ **YANLIŞ:** Hassas bilgileri (kullanıcı adları, şifreler, API anahtarları) loglara veya hata raporlarına dahil etmek. > **Neden:** Bu ciddi bir güvenlik açığıdır. Ortam değişkenleri kullanın ve loglama/raporlama mekanizmalarınızın hassas verileri filtrelediğinden emin olun. Playwright'ın `trace viewer`'ı bile dikkatli kullanılmalıdır. ## Yaygın Hatalar ve Çözümleri Playwright ile çalışırken karşılaşılabilecek bazı yaygın sorunlar ve bunların çözümleri, benim ve ekibimin deneyimlerinden derlenmiştir. Bu sorunlar genellikle Stack Overflow gibi platformlarda da sıkça sorulur. **1. Problem: Element bulunamadı (TimeoutError)** * **Sebep:** Element henüz DOM'a yüklenmemiş veya görünür değil ya da selector yanlış. * **Çözüm:** Playwright'ın otomatik beklemeleri çoğu zaman yeterlidir. Ancak, elementin yüklenmesi uzun sürüyorsa `locator.waitFor({ state: 'visible' })` veya `locator.waitFor({ state: 'attached' })` kullanabilirsiniz. Selector'ünüzü doğrulamak için Playwright Inspector (`npx playwright test --ui`) veya tarayıcının geliştirici araçlarını kullanın. **2. Problem: Testler flaky (aralıklı olarak başarısız oluyor)** * **Sebep:** Yarış koşulları (race conditions), animasyonlar, ağ gecikmeleri veya otomatik beklemelerin yeterli olmaması. * **Çözüm:** `page.waitForLoadState('networkidle')`, `page.waitForURL()`, `locator.waitFor()` gibi daha spesifik beklemeler kullanın. `expect().toBeVisible()`, `expect().toBeEnabled()` gibi assert'ler ile elementin etkileşime hazır olduğundan emin olun. Gerekirse `test.slow()` ile testin timeout'unu artırın. **3. Problem: `npx playwright install` çalışmıyor veya tarayıcılar indirilemiyor.** * **Sebep:** Ağ bağlantısı sorunları, proxy ayarları veya sistem izinleri. * **Çözüm:** İnternet bağlantınızı kontrol edin. Eğer bir proxy arkasındaysanız, `HTTP_PROXY` ve `HTTPS_PROXY` ortam değişkenlerini ayarlayın. İzin sorunları için komutu yönetici olarak çalıştırmayı deneyin veya Playwright'ın tarayıcıları indirdiği dizine yazma izniniz olduğundan emin olun. 2026 itibarıyla bu tür sorunlar nadiren görülse de, kurumsal ağlarda karşılaşılabilir. **4. Problem: Testler çok yavaş çalışıyor.** * **Sebep:** Paralel çalıştırma ayarları yanlış, gereksiz beklemeler, UI işlemleri, her test için yeni tarayıcı başlatma. * **Çözüm:** `playwright.config.ts` içinde `workers` sayısını artırın. `test.use()` ile tarayıcı bağlamlarını yeniden kullanın. Headless modu tercih edin. `page.waitForTimeout()` kullanmaktan kaçının. Ağ isteklerini mock'layarak harici bağımlılıkları azaltın. Performans optimizasyonu bölümündeki diğer teknikleri uygulayın. ## Performans Optimizasyonu Playwright testlerinizin performansını optimize etmek, CI/CD süreçlerinizin hızını artırarak geliştirme döngüsünü kısaltır ve maliyetleri düşürür. Ekibimizde Playwright test süitlerini optimize etmek için kullandığımız temel stratejiler ve ölçülebilir metrikler aşağıdadır. ### 1. Paralel Test Çalıştırma (`workers` Konfigürasyonu) Playwright, testleri paralel olarak çalıştırma yeteneğiyle öne çıkar. `playwright.config.ts` dosyasındaki `workers` ayarı, aynı anda kaç testin çalışacağını belirler. Genellikle makinenizin CPU çekirdek sayısı kadar worker kullanmak iyi bir başlangıç noktasıdır. ```javascript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', fullyParallel: true, // Tüm testleri paralel çalıştır workers: process.env.CI ? 4 : undefined, // CI ortamında 4 worker, yerelde varsayılan (genellikle CPU çekirdek sayısı) 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'] } }, ], }); ``` > **Deneyim Notu:** CI/CD ortamında `workers` sayısını sabit bir değere ayarlamak (örneğin 4 veya 8), beklenmedik performans dalgalanmalarını önler. Yerel geliştirme ortamında `undefined` bırakmak, Playwright'ın CPU'nuzun çekirdek sayısına göre otomatik ayarlama yapmasını sağlar. ### 2. Tarayıcı Bağlamı ve Sayfa Yeniden Kullanımı (`test.use()`) Her `test()` bloğu için yeni bir tarayıcı başlatmak yerine, test süiti boyunca tek bir tarayıcı bağlamını veya sayfayı yeniden kullanmak, önemli ölçüde zaman kazandırır. Playwright'ın fixtures mekanizması bunu kolaylaştırır. ```javascript // tests/reusable-context.spec.js import { test, expect } from '@playwright/test'; test.describe('Kullanıcı Yönetimi Testleri', () => { let page; test.beforeAll(async ({ browser }) => { page = await browser.newPage(); await page.goto('https://playwright.dev'); }); test.afterAll(async () => { await page.close(); }); test('Anasayfa başlığını kontrol et', async () => { await expect(page).toHaveTitle(/Playwright/); }); test('Dokümantasyon sayfasına git', async () => { await page.click('text=Docs'); await expect(page).toHaveURL(/docs/); }); }); ``` ### 3. Ağ İsteklerini Mock'lama ve Filtreleme (`page.route()`) Harici API çağrılarını veya gereksiz kaynak yüklemelerini (analitik scriptleri, reklamlar) mock'lamak veya engellemek, testlerinizi daha hızlı ve izole hale getirir. Bu ayrıca test ortamında güvenlik zafiyetlerini simüle etmek için de kullanılabilir. ```javascript // tests/mocking.spec.js import { test, expect } from '@playwright/test'; test('API mocklama ile hızlı test', async ({ page }) => { await page.route('**/api/products', route => { route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([{ id: 1, name: 'Mock Ürün 1' }]), }); }); await page.route('**/*.{png,jpg,jpeg,gif,svg}', route => route.abort()); // Görsel yüklemelerini engelle await page.route('**/analytics.js', route => route.abort()); // Analitik scriptlerini engelle await page.goto('/products'); // Ürün listesi sayfası varsayalım // await expect(page.locator('.product-item')).toHaveCount(1); // await expect(page.locator('.product-item')).toHaveText('Mock Ürün 1'); }); ``` ### 4. Headless Mod Kullanımı Testleri görsel bir arayüz olmadan çalıştırmak (`headless: true`), tarayıcının UI'ını çizme yükünü ortadan kaldırarak performansı artırır. Bu, özellikle CI/CD ortamları için standart bir uygulamadır. ```javascript // playwright.config.ts (headless varsayılan olarak true'dur, ancak belirtmek isterseniz) import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ use: { headless: true, // Varsayılan olarak true'dur }, }); ``` ### 5. Otomatik Beklemelerden Yararlanma ve Gereksiz `waitForTimeout`'lardan Kaçınma Playwright'ın akıllı otomatik beklemeleri sayesinde elementlerin görünür, etkileşime hazır olmasını beklemenize gerek kalmaz. Manuel `page.waitForTimeout()` kullanmak testleri yavaşlatır ve kararsız hale getirir. ```javascript // Kötü örnek (Yavaş ve Flaky olabilir) // await page.waitForTimeout(2000); // await page.click('button'); // İyi örnek (Playwright otomatik bekler) await page.click('button'); // veya daha spesifik bekleme await page.locator('button').waitFor({ state: 'visible' }); await page.locator('button').click(); ``` ### 6. Video Kayıt ve İzleme (Trace Viewer) Ayarları Playwright'ın harika hata ayıklama araçları olan video kaydı ve trace viewer, sorun gidermeyi kolaylaştırır ancak performans maliyeti vardır. Yalnızca başarısız testlerde veya manuel hata ayıklama sırasında etkinleştirin. ```javascript // playwright.config.ts import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ use: { trace: 'on-first-retry', // Sadece ilk denemede başarısız olursa trace kaydet video: 'on-first-retry', // Sadece ilk denemede başarısız olursa video kaydet }, }); ``` ### 7. Test Seçicilerini Optimize Etme Verimli test seçicileri kullanmak, Playwright'ın elementleri daha hızlı bulmasını sağlar. `data-testid` gibi attribute'ler veya `role` attribute'leri en performanslı ve güvenilir yöntemlerdir. ```javascript // Daha iyi performans ve güvenilirlik için await page.locator('[data-testid="submit-button"]').click(); await page.getByRole('button', { name: 'Submit' }).click(); // Daha az performanslı ve kırılgan olabilir // await page.locator('div.container > form > button.btn-primary').click(); ``` ### 8. Kaynakların Temizlenmesi (`afterEach`, `afterAll`) Testler arasında veya test süiti sonunda çerezleri, localStorage'ı temizlemek veya oturumu kapatmak, testlerin birbirinden bağımsız olmasını sağlar ve potansiyel güvenlik açıklarını önler. Bu, özellikle kimlik doğrulama testlerinde önemlidir. ```javascript // tests/cleanup.spec.js import { test, expect } from '@playwright/test'; test.afterEach(async ({ page }) => { await page.evaluate(() => localStorage.clear()); await page.context().clearCookies(); // Oturum kapatma işlemi // await page.goto('/logout'); }); ``` ### 9. Test Süitini Bölme (Sharding) Çok büyük test süitleri için testleri birden fazla makineye veya CI/CD agent'ına dağıtarak paralel çalıştırma (`sharding`) tekniği kullanabilirsiniz. Playwright bunu yerel olarak destekler. ```bash # Testleri 2 parçaya böl ve sadece ilk parçayı çalıştır npx playwright test --shard=1/2 # İkinci parçayı çalıştır npx playwright test --shard=2/2 ``` ### 10. Tarayıcı İzolasyonu ve Güvenlik Her test için ayrı bir tarayıcı bağlamı (context) kullanmak, testlerin birbirinden izole olmasını sağlar. Bu, çerezlerin, localStorage'ın veya oturum bilgilerinin testler arasında sızmasını engeller ve güvenlik risklerini azaltır. Playwright varsayılan olarak her test için yeni bir `BrowserContext` oluşturur, bu iyi bir güvenlik uygulamasıdır. ```javascript // playwright.config.ts (varsayılan davranış, ancak bilmek önemlidir) import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ use: { // Her test için yeni bir browserContext oluşturulur, bu izolasyon sağlar. // Eğer tüm testler aynı context'i paylaşsın isterseniz, dikkatli olmalısınız. }, }); ``` > **Güvenlik Notu:** Test ortamlarınızda asla gerçek üretim verileri kullanmayın. Test verilerini maskeleyin veya sentetik veriler oluşturun. Ayrıca, CI/CD pipeline'larınızda Playwright'ı çalıştırırken, hassas bilgileri (API anahtarları, şifreler) ortam değişkenleri aracılığıyla güvenli bir şekilde ilettiğinizden emin olun. `dotenv` gibi kütüphaneler bu konuda yardımcı olabilir. Bu optimizasyon teknikleri, 2026 yılındaki Playwright projelerinizde hem performansı hem de güvenilirliği artırmanıza yardımcı olacaktır. Unutmayın, küçük iyileştirmeler bile büyük test süitlerinde zamanla önemli farklar yaratır. ## Gerçek Dünya Proje Örneği (Mini Proje) Playwright performans optimizasyonu ve güvenlik best practice'lerini bir araya getiren küçük bir örnek proje oluşturalım. Bu proje, bir e-ticaret uygulamasının ürün listeleme ve sepete ekleme akışını test edecek. **Proje Yapısı:** ``` playwright-ecommerce-test-2026/ ├── playwright.config.ts ├── package.json ├── tests/ │ ├── product-flow.spec.js │ └── auth.setup.