Playwright Performans Optimizasyonu: 10 Kritik Adım [2026 Rehberi]
Yazar: Burak Balkı | Kategori: Frontend Development | Okuma Süresi: 49 dk
Bu kapsamlı 2026 rehberi, Playwright test süreçlerini hızlandırmak ve verimli hale getirmek için 10 kritik performans optimizasyon tekniğini detaylı örnekler...
# Playwright Performans Optimizasyonu: 10 Kritik Adım [2026 Rehberi]
Playwright ile web otomasyonu ve E2E testleri geliştirirken, testlerin yavaş çalışması sık karşılaşılan bir sorundur. Özellikle büyük ölçekli uygulamalarda veya CI/CD süreçlerinde, yavaş testler geliştirme döngüsünü uzatabilir ve maliyetleri artırabilir. Peki, **Playwright performans optimizasyonu** ile testlerinizi nasıl hızlandırabilir, daha verimli ve kararlı hale getirebilirsiniz? Bu kapsamlı 2026 rehberinde, 10+ yıllık tecrübelerime dayanarak, Playwright testlerinizi zirveye taşıyacak kritik adımları, pratik örnekler ve en güncel tekniklerle ele alacağız. Amacımız, test sürenizi kısaltmak, kaynak kullanımını optimize etmek ve geliştirme verimliliğinizi artırmaktır. Hazırsanız, 2026'nın en güncel Playwright performans tekniklerini derinlemesine incelemeye başlayalım.
## Playwright Nedir?
Playwright, Microsoft tarafından geliştirilen, modern web uygulamaları için güvenilir uçtan uca (E2E) test, otomasyon ve web kazıma (web scraping) imkanları sunan, açık kaynaklı bir Node.js kütüphanesidir. Chromium, Firefox ve WebKit gibi popüler tarayıcı motorlarını tek bir API ile destekler. Bu araç, geliştiricilere tarayıcı etkileşimlerini programatik olarak kontrol etme ve kullanıcı senaryolarını simüle etme yeteneği sunar.
Playwright, özellikle web uygulamalarının farklı tarayıcılardaki davranışlarını ve performansını test etmek için tasarlanmıştır. Tarayıcıların tüm yeteneklerine erişim sağlayarak, kullanıcı arayüzü testlerinden API entegrasyon testlerine kadar geniş bir yelpazede kullanılabilir. 2026 itibarıyla v1.42.0 (temsili) gibi kararlı sürümleriyle Playwright, istikrarlı ve güçlü bir otomasyon aracı olarak öne çıkmaktadır. Ekibimizde Playwright'a geçiş yaptığımızda, özellikle paralel test yetenekleri sayesinde E2E test sürelerimizde %40'ın üzerinde bir iyileşme gözlemledik, bu da geliştirme süreçlerimizi önemli ölçüde hızlandırdı.
## Neden Playwright Kullanmalısınız?
Playwright, web otomasyonu ve test dünyasında hızla popülerlik kazanmasının birçok nedeni var. İşte 2026 itibarıyla Playwright'ı tercih etmeniz için başlıca değer önerileri ve çözdüğü problemler:
* **Çoklu Tarayıcı Desteği**: Chromium, Firefox ve WebKit motorlarını tek bir API ile destekleyerek, testlerinizi farklı tarayıcılarda kolayca çalıştırmanızı sağlar. Bu, farklı kullanıcıların karşılaşabileceği sorunları önceden tespit etmenize yardımcı olur.
* **Otomatik Beklemeler**: Playwright, elementlerin görünür, etkin veya yüklü olmasını otomatik olarak bekler. Bu sayede testleriniz daha kararlı hale gelir ve gereksiz `waitForTimeout` kullanımlarından kaçınılır. Production ortamında karşılaştığım en yaygın sorunlardan biri, testlerin flaky (istikrarsız) olmasıydı; Playwright'ın otomatik beklemeleri bu sorunu büyük ölçüde çözdü.
* **Paralel Test Yürütme**: Testleri aynı anda birden fazla worker'da veya farklı tarayıcılarda paralel olarak çalıştırabilir. Bu özellik, özellikle büyük test süitlerinde test süresini dramatik bir şekilde kısaltır. Son projemde, 1000'den fazla E2E testini paralel olarak çalıştırarak, test süresini 45 dakikadan 10 dakikaya indirdik.
* **Güçlü API**: Zengin ve sezgisel bir API sunar. Sayfa navigasyonu, element etkileşimleri, dosya yükleme, ağ isteklerini engelleme/taklit etme gibi birçok gelişmiş senaryoyu kolayca ele almanızı sağlar.
* **Test İzlenebilirliği**: Otomatik ekran görüntüleri, video kayıtları ve test çalıştırma logları sayesinde başarısız testlerin kök nedenini hızlıca tespit edebilirsiniz. Bu, hata ayıklama sürecini büyük ölçüde kolaylaştırır.
* **Modern Geliştirme Deneyimi**: TypeScript desteği, VS Code entegrasyonu ve güçlü hata ayıklama araçlarıyla geliştiricilere modern bir deneyim sunar.
Playwright, özellikle geniş kapsamlı E2E testleri yazan, tarayıcı uyumluluğunu önemseyen ve test süreçlerini hızlandırmak isteyen ekipler için idealdir. Küçük projeler için kurulum maliyeti biraz yüksek gelse de, uzun vadede sağladığı verimlilik ve kararlılık, bu maliyeti fazlasıyla karşılar.
## Playwright vs Alternatifler (2026 Karşılaştırması)
Web otomasyonu dünyasında Playwright'ın yanı sıra Selenium ve Cypress gibi köklü alternatifler de bulunmaktadır. 2026 itibarıyla bu üç aracın temel özelliklerini ve kullanım alanlarını karşılaştıran bir tablo aşağıdadır:
| Özellik | Playwright (2026) | Cypress (2026) | Selenium (2026) |
| :------------------ | :------------------------------------------------- | :----------------------------------------------------- | :--------------------------------------------------- |
| **Tarayıcı Desteği**| Chromium, Firefox, WebKit (Headless/UI) | Chromium tabanlı (Electron), Firefox (sınırlı), Edge | Tüm popüler tarayıcılar (WebDriver API) |
| **Mimari** | Tarayıcı ile doğrudan iletişim (WebSocket) | Tarayıcı içinde çalışır (JavaScript) | WebDriver protokolü (Tarayıcı sürücüleri) |
| **Paralel Test** | Dahili ve güçlü destek | `cypress-parallel` gibi eklentilerle veya CI/CD ile | Selenium Grid ile güçlü destek |
| **Otomatik Bekleme**| Dahili, akıllı beklemeler | Dahili, akıllı beklemeler | Manuel veya yardımcı kütüphanelerle |
| **API Desteği** | JavaScript, TypeScript, Python, Java, C# | JavaScript, TypeScript | JavaScript, Python, Java, C#, Ruby, PHP, Perl |\
| **Öğrenme Eğrisi** | Orta (Modern API, iyi dökümantasyon) | Kolay (Geliştirici dostu, kapsamlı dökümantasyon) | Yüksek (WebDriver protokolü karmaşıklığı) |\
| **Ekosistem** | Hızla büyüyen, Microsoft desteği | Büyük ve olgun, zengin eklenti ekosistemi | Çok büyük ve olgun, endüstri standardı |\
| **Kurumsal Destek** | Microsoft ve aktif topluluk | Cypress firması ve aktif topluluk | Open-source topluluk |\
| **Kullanım Alanı** | E2E test, web scraping, tarayıcı otomasyonu | E2E test, entegrasyon test, bileşen test | E2E test, tarayıcı otomasyonu, web scraping |
**Yorum:** 2026 itibarıyla Playwright, modern web uygulamaları için en dengeli ve geleceğe yönelik çözümlerden biri olarak öne çıkıyor. Özellikle çoklu tarayıcı desteği ve dahili paralel test yetenekleri, onu büyük projeler için cazip kılıyor. Cypress, geliştirici dostu arayüzü ve hızlı test geri bildirimiyle küçük ve orta ölçekli projelerde hala güçlü bir alternatifken, Selenium geniş dil desteği ve olgun ekosistemiyle legacy sistemler ve çok dilli projelerde tercih edilmeye devam ediyor. Ancak performans ve modern API açısından Playwright, pek çok senaryoda rakiplerine göre avantaj sağlamaktadır.
## Kurulum ve İlk Adımlar (2026)
Playwright ile performans optimizasyonuna başlamadan önce, sisteminizde Playwright'ın kurulu ve çalışır durumda olması gerekir. İşte 2026 itibarıyla güncel kurulum adımları ve ilk testinizi çalıştırma rehberi:
**Ön Gereksinimler:**
* Node.js (LTS sürümü önerilir, 2026 itibarıyla v20.x veya üzeri)
* npm veya Yarn
1. **Yeni Bir Proje Başlatın (veya Mevcut Projenize Ekleyin):**
Boş bir dizinde yeni bir Node.js projesi başlatın:
```bash
mkdir playwright-performans-optimizasyon
cd playwright-performans-optimizasyon
npm init -y
```
2. **Playwright'ı Kurun:**
Playwright CLI'ı kullanarak kütüphaneyi ve gerekli tarayıcıları kurun. Bu komut, Chromium, Firefox ve WebKit tarayıcılarını otomatik olarak indirir:
```bash
npm init playwright@latest
# veya
# yarn create playwright
```
Kurulum sırasında test klasörü, örnek test dosyası ve GitHub Actions gibi seçenekleri yapılandırabilirsiniz. Varsayılanları kabul edebilirsiniz.
3. **İlk Testinizi Çalıştırın:**
`tests` klasöründe otomatik olarak oluşturulan `example.spec.ts` dosyasını kullanabilir veya kendiniz basit bir test oluşturabilirsiniz. Örneğin, `tests/ilk-test.spec.ts` adında bir dosya oluşturalım:
```typescript
// tests/ilk-test.spec.ts
import { test, expect } from '@playwright/test';
test('Google ana sayfası başlığı doğru olmalı', 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/);
// Arama kutusunu bul ve bir şeyler yaz
await page.fill('textarea[name="q"]', 'Playwright performans optimizasyonu 2026');
// Arama düğmesine tıkla (veya Enter tuşuna bas)
await page.press('textarea[name="q"]', 'Enter');
// Sonuç sayfasının yüklenmesini bekle ve bir başlık doğrula
await page.waitForURL(/search/);
await expect(page).toHaveTitle(/Playwright performans optimizasyonu 2026 - Google/);
});
```
Bu testi çalıştırmak için terminalde şu komutu kullanın:
```bash
npx playwright test tests/ilk-test.spec.ts
```
Playwright, varsayılan olarak headless modda (UI olmadan) çalışır. Eğer tarayıcıyı görmek isterseniz `--headed` bayrağını kullanabilirsiniz:
```bash
npx playwright test tests/ilk-test.spec.ts --headed
```
Bu adımlarla Playwright ortamınızı 2026 standartlarına uygun olarak kurmuş ve ilk çalışan testinizi oluşturmuş olursunuz. Artık performans optimizasyonu tekniklerine geçmeye hazırız!
## Temel Kullanım ve Örnekler
Playwright'ın temel kullanımını anlamak, performans optimizasyonu için kritik öneme sahiptir. İşte sıkça kullanılan senaryolar ve kod örnekleri:
1. **Sayfaya Gitme ve Element Etkileşimi:**
*Problem:* Belirli bir URL'ye gitmek ve bir düğmeye tıklamak.
*Çözüm:*
```typescript
import { test, expect } from '@playwright/test';
test('Ana sayfaya gidip login butonuna tıkla', async ({ page }) => {
await page.goto('https://www.example.com');
await page.click('button:has-text("Giriş Yap")');
await expect(page).toHaveURL(/.*login/);
});
```
2. **Form Doldurma ve Gönderme:**
*Problem:* Bir formdaki input alanlarını doldurup formu göndermek.
*Çözüm:*
```typescript
import { test, expect } from '@playwright/test';
test('Login formu doldur ve gönder', async ({ page }) => {
await page.goto('https://www.example.com/login');
await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'testpass123');
await page.click('button[type="submit"]');
await expect(page.locator('.welcome-message')).toContainText('Hoş Geldiniz, testuser');
});
```
3. **Elementlerin Görünürlüğünü ve Metnini Doğrulama:**
*Problem:* Bir elementin sayfada göründüğünü ve doğru metni içerdiğini kontrol etmek.
*Çözüm:*
```typescript
import { test, expect } from '@playwright/test';
test('Ürün isminin ve fiyatının doğru olduğunu kontrol et', async ({ page }) => {
await page.goto('https://www.example.com/products/123');
const productName = page.locator('.product-name');
const productPrice = page.locator('.product-price');
await expect(productName).toBeVisible();
await expect(productName).toContainText('Akıllı Telefon X Pro 2026');
await expect(productPrice).toContainText('₺19.999');
});
```
4. **Ağ İsteklerini Engelleme/Taklit Etme (Mocking):**
*Problem:* Testlerin harici API bağımlılıklarından etkilenmemesi veya belirli senaryoları simüle etmek.
*Çözüm:* Bu, özellikle performans testlerinde kritik bir adımdır. Harici kaynakları engellemek, testin sadece uygulamanın kendi performansına odaklanmasını sağlar.
```typescript
import { test, expect } from '@playwright/test';
test('API isteğini taklit et ve sayfayı kontrol et', async ({ page }) => {
// Belirli bir API isteğini taklit et
await page.route('**/api/products', route => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify([
{ id: 1, name: 'Mock Ürün 1', price: 100 },
{ id: 2, name: 'Mock Ürün 2', price: 200 }
]),
});
});
await page.goto('https://www.example.com/products');
await expect(page.locator('.product-list li')).toHaveCount(2);
await expect(page.locator('.product-list li:first-child')).toContainText('Mock Ürün 1');
});
```
## İleri Seviye Teknikler
Playwright'ın gücünü tam anlamıyla kullanmak ve testlerinizi daha verimli hale getirmek için bazı ileri seviye tekniklere ihtiyaç duyulur. Bu teknikler, özellikle büyük ve karmaşık uygulamaların testinde kritik rol oynar.
1. **Page Object Model (POM) Uygulaması:**
*Design Pattern:* POM, test kodunuzu daha okunabilir, sürdürülebilir ve yeniden kullanılabilir hale getirir. Her sayfa veya sayfa bileşeni için ayrı bir sınıf oluşturarak element seçicileri ve etkileşim metotlarını bu sınıflarda toplarsınız. Bu, element seçiciler değiştiğinde sadece ilgili POM dosyasını güncellemeniz gerektiği anlamına gelir.
*Problem:* Test kodunun karmaşıklaşması ve element seçiciler değiştiğinde birden çok test dosyasında güncelleme yapma zorunluluğu.
*Çözüm:*
```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 goto() {
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();
}
}
// tests/login.spec.ts (kullanım örneği)
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
test('Başarılı giriş testi', async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.login('testuser', 'testpass123');
await expect(page).toHaveURL(/.*dashboard/);
});
```
2. **Global Setup/Teardown Kullanımı:**
*Problem:* Testler arasında tekrar eden başlangıç (örneğin, veritabanı temizliği, test kullanıcısı oluşturma) veya bitiş (örneğin, veritabanı temizleme) işlemlerini yönetmek.
*Çözüm:* `playwright.config.ts` dosyasında `globalSetup` ve `globalTeardown` seçeneklerini kullanarak tüm test süitiniz için bir kerelik işlemler tanımlayabilirsiniz. Bu, her test dosyasında tekrar eden kod yazmaktan kaçınmanızı sağlar ve test ortamının tutarlılığını artırır.
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
// ... diğer yapılandırmalar ...
globalSetup: require.resolve('./global-setup'),
globalTeardown: require.resolve('./global-teardown'),
});
```
```typescript
// global-setup.ts
import { FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
console.log('Global Setup: Test ortamı hazırlanıyor...');
// Veritabanı temizleme, test kullanıcısı oluşturma gibi işlemler burada yapılabilir.
// Örneğin, bir API çağrısı ile test verilerini hazırlayabiliriz.
// await api.createTestUser();
console.log('Global Setup tamamlandı.');
}
export default globalSetup;
```
```typescript
// global-teardown.ts
import { FullConfig } from '@playwright/test';
async function globalTeardown(config: FullConfig) {
console.log('Global Teardown: Test ortamı temizleniyor...');
// Veritabanı temizliği, oluşturulan test kullanıcısını silme gibi işlemler burada yapılabilir.
// await api.deleteTestUser();
console.log('Global Teardown tamamlandı.');
}
export default globalTeardown;
```
3. **Custom Fixture (Test Bağlamı) Oluşturma:**
*Problem:* Testler arasında paylaşılan karmaşık nesneleri veya durumları yönetmek.
*Çözüm:* Playwright'ın `test` nesnesini genişleterek kendi özel fixture'larınızı (test bağlamı) tanımlayabilirsiniz. Bu, testlerinize özel bir `APIClient` veya `LoggedInUser` gibi nesneler sağlamak için kullanılabilir.
```typescript
// fixtures/my-fixtures.ts
import { test as base, expect } from '@playwright/test';
// Kendi test fixture'ımızı tanımlayalım
export const test = base.extend<{ loggedInPage: Page }>({ // 'page' yerine 'loggedInPage' kullanacağız
loggedInPage: async ({ page }, use) => {
// Her testten önce giriş yapma işlemi
await page.goto('https://www.example.com/login');
await page.fill('input[name="username"]', 'admin');
await page.fill('input[name="password"]', 'adminpass');
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/.*dashboard/);
// Testi çalıştır
await use(page);
// Test bittikten sonra yapılacak işlemler (örneğin, çıkış yapma)
// await page.click('button:has-text("Çıkış Yap")');
},
});
export { expect } from '@playwright/test';
// tests/dashboard.spec.ts (kullanım örneği)
import { test, expect } from '../fixtures/my-fixtures'; // Özel fixture'ımızı import ediyoruz
test('Dashboard sayfasının yüklendiğini doğrula', async ({ loggedInPage }) => {
await expect(loggedInPage.locator('.dashboard-title')).toContainText('Yönetim Paneli');
});
```
Bu ileri seviye teknikler, test süitinizin büyüklüğü arttıkça ve karmaşıklık arttıkça daha da önemli hale gelir. Doğru mimari yaklaşımlarla, Playwright testlerinizin hem performansını hem de sürdürülebilirliğini artırabilirsiniz.
## Best Practices & Anti-Patterns
Playwright ile performanslı ve kararlı testler yazmak için belirli **best practices**'leri takip etmek ve bazı **anti-patterns**'lerden kaçınmak önemlidir. 2026 itibarıyla edindiğim deneyimlerle, işte size kritik tavsiyeler:
* **✅ Akıllı Beklemeler Kullanın:** Playwright'ın `locator.waitFor()`, `expect().toBeVisible()`, `expect().toHaveText()` gibi otomatik beklemelerini tercih edin. Bu metotlar, elementin hazır olmasını bekler ve testlerinizi daha kararlı hale getirir.
*Neden önemli:* `page.waitForTimeout()` gibi sabit beklemeler, testleri yavaşlatır ve gereksiz zaman kayıplarına yol açar. Elementin daha erken hazır olması durumunda bile test bekler, bu da performansı düşürür.
* **❌ `page.waitForTimeout()` Kullanmaktan Kaçının:** Sabit bekleme süreleri, testlerinizi yavaşlatır ve "flaky" (istikrarsız) hale getirir. Uygulamanın performansına göre testleriniz bazen başarılı, bazen başarısız olabilir.
*Neden önemli:* Uygulamanın yüklenme süresi değişebilir. Sabit bir bekleme süresi, ya gereksiz yere test süresini uzatır ya da yetersiz kalıp testin başarısız olmasına neden olur.
* **✅ `test.use()` ile Test Bağlamını Optimize Edin:** Her testten önce tekrar eden giriş yapma gibi işlemleri `test.use()` veya `test.beforeEach()` bloklarına taşıyın. Bu, testlerin daha hızlı başlamasını sağlar.
*Neden önemli:* Her testin sıfırdan başlaması yerine, ortak bir başlangıç durumundan devam etmesi test süresini önemli ölçüde kısaltır.
* **❌ Her Testte Baştan Sona Tüm Akışı Tekrarlamayın:** Eğer bir login işlemi birçok test için ortak bir ön koşulsa, her test dosyasında login işlemini tekrarlamayın. Bunun yerine `globalSetup` veya `fixture` kullanarak bir kerelik login yapın ve oturum açma durumunu (örneğin, çerezleri) paylaşın.
*Neden önemli:* Gereksiz yere tekrarlanan işlemler, test süresini uzatır ve kaynak tüketimini artırır.
* **✅ Paralel Testleri Kullanın:** Playwright'ın dahili paralel test yeteneğini `playwright.config.ts` dosyasındaki `workers` yapılandırmasıyla etkinleştirin. Bu, testlerinizi aynı anda birden fazla tarayıcıda veya worker'da çalıştırmanızı sağlar.
*Neden önemli:* Test süresini dramatik bir şekilde azaltır, özellikle büyük test süitlerinde olmazsa olmazdır.
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
// ...
workers: process.env.CI ? 1 : undefined, // CI ortamında tek worker, lokalde CPU çekirdeği kadar
// veya sabit bir sayı:
// workers: 4,
// ...
});
```
* **❌ Gereksiz Tarayıcı İşlemlerinden Kaçının:** Test senaryonuzun gerektirmediği durumlarda yeni bir sayfa veya tarayıcı bağlamı açmaktan kaçının. Her yeni bağlam, kaynak tüketimini artırır.
*Neden önemli:* Tarayıcı başlatma ve kapatma işlemleri zaman alır ve bellek tüketir. Mümkün olduğunca mevcut bağlamları yeniden kullanın.
* **✅ Ağ İsteklerini Taklit Edin (Mocking/Stubbing):** Harici API çağrılarını `page.route()` ile taklit ederek testlerinizi hızlandırın ve dış bağımlılıklardan izole edin. Bu, özellikle üçüncü taraf servislerin yavaş yanıt verdiği durumlarda kritik öneme sahiptir.
*Neden önemli:* Gerçek API çağrıları yavaş olabilir, ağ sorunlarına yol açabilir veya beklenmedik yanıtlar verebilir. Taklit etme, testlerinizi daha hızlı ve kararlı hale getirir.
* **❌ Tüm Tarayıcılarda Her Testi Çalıştırmayın:** Tüm test süitinizi her zaman tüm tarayıcılarda çalıştırmak yerine, kritik testleri (smoke/regression) tüm tarayıcılarda, diğerlerini ise ana tarayıcıda (örneğin Chromium) çalıştırın. `playwright.config.ts` dosyasındaki `projects` kısmını kullanın.
*Neden önemli:* Test süresini ve CI/CD kaynak tüketimini azaltır. Tarayıcıya özgü hataları bulmak için hedeflenmiş testler daha verimlidir.
* **✅ Headless Modu Tercih Edin:** CI/CD ortamlarında ve genel olarak testleri çalıştırırken headless (başsız) modu kullanın. Bu, tarayıcı UI'sının render edilmesini engelleyerek kaynak tüketimini azaltır ve testleri hızlandırır.
*Neden önemli:* UI render etme, CPU ve GPU kaynaklarını tüketir. Headless mod, bu yükü ortadan kaldırarak testleri daha hızlı ve daha az kaynakla çalıştırır.
* **✅ Element Seçicileri Optimize Edin:** CSS veya XPath seçiciler yerine, `page.getByRole()`, `page.getByLabel()`, `page.getByText()`, `page.getByTestId()` gibi Playwright'ın yerleşik ve öncelikli seçicilerini kullanın. Bunlar genellikle daha hızlı ve daha kararlıdır.
*Neden önemli:* Yerleşik seçiciler, DOM'da daha verimli arama yapar ve uygulamanın iç yapısı değiştiğinde daha az kırılma eğilimindedir. `data-testid` gibi attribute'lar, testler için özel olarak tasarlanmıştır ve UI değişikliklerinden etkilenmez.
## Yaygın Hatalar ve Çözümleri
Playwright ile çalışırken karşılaşılan bazı yaygın hatalar, test performansını ve kararlılığını olumsuz etkileyebilir. İşte 2026 itibarıyla sıkça görülen sorunlar ve bu sorunlara yönelik çözümler:
1. **Hata: `Timeout exceeded while waiting for selector`**
*Sebep:* Playwright, varsayılan olarak bir elementin görünür olmasını 30 saniye bekler. Eğer element bu süre içinde yüklenmezse veya DOM'a eklenmezse bu hata oluşur. Genellikle yavaş API yanıtları, büyük DOM ağaçları veya asenkron yüklenen bileşenler nedeniyle ortaya çıkar.
*Çözüm:* Öncelikle uygulamanın kendisindeki performans sorunlarını gidermeye çalışın. Eğer bu mümkün değilse, `locator.waitFor()` veya `page.waitForSelector()` gibi metotlarda daha uzun bir `timeout` değeri belirleyebilirsiniz. Ancak bu, test süresini uzatacaktır. Daha iyi bir yaklaşım, elementin neden geciktiğini anlamak ve test stratejinizi buna göre ayarlamaktır (örneğin, bir yükleme göstergesinin kaybolmasını beklemek).
```typescript
// Daha uzun timeout ile bekleme
await page.locator('.delayed-element').waitFor({ timeout: 60000 }); // 60 saniye bekle
```
2. **Hata: `Navigation timeout of 30000 ms exceeded`**
*Sebep:* `page.goto()` veya `page.click()` gibi navigasyon tetikleyen işlemler sırasında sayfanın belirtilen süre içinde yüklenememesi. Bu genellikle ağ sorunları, sunucu yanıt sürelerinin yavaş olması veya sayfanın çok büyük kaynaklar yüklemesi nedeniyle olur.
*Çözüm:* `page.goto()` metoduna `timeout` seçeneği ekleyerek bekleme süresini artırabilirsiniz. Ayrıca, `waitUntil` seçeneğini `domcontentloaded` veya `networkidle` yerine `load` olarak ayarlayarak daha erken bir yükleme olayını bekleyebilirsiniz. Eğer sorun sunucu tarafındaysa, uygulamanın performansını iyileştirmek esastır.
```typescript
// Daha uzun timeout ile sayfa navigasyonu
await page.goto('https://www.example.com/slow-page', { timeout: 60000 });
// Daha erken yükleme olayını bekle
await page.goto('https://www.example.com/fast-page', { waitUntil: 'domcontentloaded' });
```
3. **Hata: Testler "flaky" (istikrarsız) çalışıyor**
*Sebep:* Testlerin bazen geçip bazen kalması. Genellikle elementlerin DOM'a eklenme veya etkileşime hazır olma zamanlamasındaki tutarsızlıklar, animasyonlar veya asenkron işlemlerden kaynaklanır. `page.waitForTimeout()` kullanımı da bu duruma yol açabilir.
*Çözüm:* Playwright'ın otomatik beklemelerini ve `expect()` metotlarını doğru kullanın. `locator.waitFor()`, `expect().toBeVisible()`, `expect().toBeEnabled()` gibi metotlar, elementlerin hazır olmasını garanti eder. Ayrıca, testlerinizi izole edin ve her testin temiz bir başlangıç noktasına sahip olduğundan emin olun (`test.beforeEach()` veya `globalSetup`).
```typescript
// Yanlış: Sabit bekleme
// await page.click('button');
// await page.waitForTimeout(2000); // Test yavaş ve flaky olabilir
// Doğru: Akıllı bekleme
await page.click('button');
await expect(page.locator('.success-message')).toBeVisible(); // Elementin görünür olmasını bekle
```
## Performans Optimizasyonu Teknikleri (2026)
Playwright testlerinizin performansını artırmak, CI/CD süreçlerinizi hızlandırmak ve kaynak tüketimini azaltmak için 2026'nın en güncel ve etkili tekniklerini burada bulacaksınız. Bu teknikler, hem test süresini kısaltmaya hem de testlerin daha kararlı çalışmasına odaklanır.
1. **Paralel Test Yürütme (`workers`):**
*Açıklama:* Playwright, testleri birden fazla worker sürecinde paralel olarak çalıştırma yeteneğine sahiptir. Bu, özellikle çok sayıda testiniz olduğunda test süresini önemli ölçüde azaltır. `playwright.config.ts` dosyasındaki `workers` yapılandırmasıyla kontrol edilir.
*Metrikler:* Test süresi (Total Run Time).
*Before/After:* Tek worker ile 300 test 15 dakika sürerken, 4 worker ile aynı testler 4 dakikaya düşebilir.
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
// ...
workers: process.env.CI ? 2 : undefined, // CI'da 2 worker, lokalde varsayılan (CPU çekirdeği sayısı)
// Veya belirli bir sayı:
// workers: 4,
// ...
});
```
> **Pro Tip:** CI/CD ortamlarında `workers` sayısını, mevcut CPU çekirdeği sayısına veya pipeline'ınızın kapasitesine göre dikkatlice ayarlayın. Çok fazla worker, kaynak yetersizliğine ve yavaşlamaya neden olabilir.
2. **Headless Mod Kullanımı:**
*Açıklama:* Tarayıcıyı UI (grafik arayüz) olmadan çalıştırmak, CPU ve bellek tüketimini azaltır. Bu, özellikle CI/CD sunucularında veya kaynakları kısıtlı ortamlarda testleri hızlandırır.
*Metrikler:* CPU kullanımı, bellek tüketimi, test süresi.
*Before/After:* Headless mod, genellikle UI'lı moda göre %20-30 daha hızlı çalışır ve daha az kaynak tüketir.
```bash
# Headless modda çalıştırma (varsayılan)
npx playwright test
# UI'lı modda çalıştırma (hata ayıklama için)
npx playwright test --headed
```
3. **Ağ Trafiğini Engelleme/Taklit Etme (`page.route()`):**
*Açıklama:* Test senaryonuz için gereksiz olan harici kaynakları (örneğin, analitik scriptler, reklamlar, resimler) engellemek veya API yanıtlarını taklit etmek, ağ isteklerini azaltır ve sayfa yükleme süresini kısaltır.
*Metrikler:* Ağ istek sayısı, sayfa yükleme süresi (ms).
*Before/After:* Gereksiz 3. parti scriptleri engellemek, sayfa yükleme süresini 500ms ile 2 saniye arasında azaltabilir.
```typescript
// tests/optimizasyon.spec.ts
import { test, expect } from '@playwright/test';
test('Gereksiz kaynakları engelle', async ({ page }) => {
await page.route('**/*.{png,jpg,jpeg,gif,svg}', route => route.abort()); // Resimleri engelle
await page.route('**/analytics.js', route => route.abort()); // Analitik scriptleri engelle
await page.route('**/api/third-party/**', route => route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ mockData: 'ok' }),
})); // Harici API'yi taklit et
await page.goto('https://www.example.com');
// Test işlemlerine devam et
});
```
4. **Depolama Durumunu Yeniden Kullanma (`storageState`):**
*Açıklama:* Kullanıcının oturum açma durumunu (çerezler, localStorage) bir kez kaydedip sonraki testlerde yeniden kullanarak her test için tekrar giriş yapma maliyetinden kaçının. Bu, `globalSetup` ile birlikte kullanılabilir.
*Metrikler:* Test başına düşen oturum açma süresi.
*Before/After:* Her testte 5 saniyelik bir login işlemi yerine, `storageState` ile bu süreyi sıfıra indirebilirsiniz.
```typescript
// global-setup.ts
import { FullConfig, chromium } from '@playwright/test';
async function globalSetup(config: FullConfig) {
const browser = await chromium.launch();
const page = await br