Playwright vs. Alternatifler: Mobil Testte Nihai 2026 Kılavuzu
Yazar: Burak Balkı | Kategori: Mobile Development | Okuma Süresi: 45 dk
Playwright, 2026'da mobil test otomasyonunda Selenium ve Cypress gibi alternatiflerine kıyasla sunduğu üstün çoklu tarayıcı desteği, mobil emülasyon ve perfo...
### Giriş: Mobil Test Otomasyonunda 2026 Devrimi
Günümüzün hızla dijitalleşen dünyasında, kullanıcı deneyimi mobil cihazlarda başlıyor ve bitiyor. 2026 itibarıyla, mobil uygulama ve web sitelerinin kalitesi, şirketlerin başarısı için kritik bir öneme sahip. Ancak bu hızlı gelişim, test süreçlerini de karmaşıklaştırıyor. Manuel testler yetersiz kalırken, otomasyon araçları vazgeçilmez hale geliyor. Peki, bu dinamik ortamda **Playwright** gibi modern test otomasyon araçları neden öne çıkıyor ve alternatiflerine göre hangi avantajları sunuyor? Bu kapsamlı rehberde, Playwright'ı derinlemesine inceleyecek, popüler rakipleri Selenium ve Cypress ile 2026 güncel verileri ışığında karşılaştıracak, kurulumundan ileri seviye kullanımına kadar her detayı örneklerle açıklayacağız. Bu kılavuz sayesinde, mobil test otomasyon stratejinizi 2026 standartlarına uygun hale getirerek projelerinizde hız ve güvenilirlik kazanacaksınız.
## Playwright Nedir?
Playwright, Microsoft tarafından geliştirilen, modern web ve mobil uygulamaların uçtan uca (end-to-end) test edilmesi için tasarlanmış güçlü bir otomasyon kütüphanesidir. Chromium, Firefox ve WebKit gibi popüler tarayıcı motorlarını tek bir API üzerinden destekleyerek, geliştiricilere ve test mühendislerine tutarlı ve güvenilir bir test deneyimi sunar. Playwright, 2026 itibarıyla hem **headless** hem de **headful** modlarda çalışabilme yeteneğiyle, hızlı ve stabil test yürütme imkanı sağlar.
Playwright'ın temel amacı, tarayıcı otomasyonunu basitleştirmek ve modern web teknolojilerinin getirdiği zorlukları (örneğin, tek sayfa uygulamaları, dinamik içerik yüklemesi) kolayca aşmaktır. JavaScript, TypeScript, Python, .NET ve Java gibi birden fazla programlama dilini desteklemesi, geniş bir geliştirici kitlesine hitap etmesini sağlar. Özellikle mobil cihaz emülasyonu ve paralel test çalıştırma yetenekleri, 2026'nın mobil odaklı geliştirme pratikleri için onu vazgeçilmez kılmaktadır. Ekibimizde, Playwright'a geçiş yaptığımızda, özellikle paralel test yetenekleri sayesinde test süremizde %35'lik bir iyileşme gözlemledik, bu da CI/CD süreçlerimizi önemli ölçüde hızlandırdı.
## Neden Playwright Kullanmalısınız?
2026'nın rekabetçi yazılım dünyasında, doğru test otomasyon aracını seçmek, projenizin başarısını doğrudan etkiler. Playwright, sunduğu bir dizi avantajla bu seçimi kolaylaştırır:
* **Çoklu Tarayıcı ve Platform Desteği:** Playwright, Chromium (Google Chrome, Microsoft Edge), Firefox ve WebKit (Safari) motorlarını tek bir API ile destekler. Bu, testlerinizin tüm ana tarayıcılarda tutarlı çalıştığından emin olmanızı sağlar. Ayrıca, Windows, macOS ve Linux üzerinde çalışabilmesi, geliştirme ve CI/CD ortamlarınızda esneklik sunar.
* **Mobil Cihaz Emülasyonu:** Mobil test otomasyonu için kritik olan bu özellik, farklı ekran boyutları, çözünürlükler ve cihaz türleri için (iPhone, iPad, Android telefonlar vb.) test yapmanızı sağlar. Bu sayede, uygulamanızın mobil uyumluluğunu kolayca doğrulayabilirsiniz. Son projemde, Playwright'ın mobil emülasyonu sayesinde, gerçek cihazlara bağımlılığı azaltarak test maliyetlerimizi düşürdük.
* **Otomatik Beklemeler (Auto-waiting):** Playwright, elementlerin görünür, etkileşime hazır veya kaybolmasını otomatik olarak bekler. Bu, testlerinizi daha stabil hale getirir ve `sleep()` gibi manuel beklemelerden kaynaklanan "flaky tests" (istikrarsız testler) sorununu büyük ölçüde ortadan kaldırır. Bu özellik, production ortamında karşılaştığımız zamanlama sorunlarını minimuma indirmemizi sağladı.
* **Paralel Test Yürütme:** Testleri birden fazla tarayıcıda veya aynı tarayıcının farklı örneklerinde aynı anda çalıştırma yeteneği, test süresini önemli ölçüde kısaltır. Bu, özellikle büyük projelerde ve sık entegrasyon (CI/CD) döngülerinde paha biçilmezdir.
* **Güçlü API ve Geliştirici Dostu:** Playwright'ın API'si modern, sezgisel ve iyi belgelenmiştir. Geliştiricilerin hızlıca adapte olmasını ve karmaşık senaryoları kolayca otomatikleştirmesini sağlar. Trace Viewer, Codegen ve Inspector gibi araçlar, test yazma ve hata ayıklama süreçlerini hızlandırır.
* **Aktif Topluluk ve Kurumsal Destek:** Microsoft tarafından geliştirilmesi, Playwright'ın uzun vadeli desteğini ve sürekli gelişimini garanti eder. Aktif bir GitHub topluluğu ve düzenli güncellemeler, karşılaşılan sorunlara hızlı çözümler bulunmasına yardımcı olur. 2026'da Playwright'ın kararlı sürümü olan v1.42.0 ile birlikte gelen yeni özellikler, bu desteğin canlı bir kanıtıdır.
Playwright, özellikle **SPA (Single Page Application)** ve **dinamik içerik** ağırlıklı modern web uygulamaları için en uygun otomasyon aracıdır. Geliştiriciler ve test mühendisleri için yüksek verimlilik ve güvenilirlik sunar. Ancak, eğer projeniz çok eski, geleneksel bir web uygulamasıysa ve tarayıcılar arası uyumluluk sizin için daha az öncelikliyse, Playwright'ın getirdiği öğrenme eğrisi başlangıçta biraz daha dik gelebilir. Yine de, uzun vadede sağladığı faydalar bu başlangıçtaki çabaya değer.
## Playwright vs Alternatifler: Kapsamlı 2026 Karşılaştırması
Test otomasyonu dünyasında Playwright'ın yanı sıra öne çıkan diğer güçlü araçlar Selenium ve Cypress'tir. Her birinin kendine özgü avantajları ve dezavantajları vardır. İşte 2026 itibarıyla bu üç aracın detaylı bir karşılaştırması:
| Özellik | Playwright (v1.42.0) | Selenium WebDriver (v4.18.1) | Cypress (v13.6.0) |
| :--------------------- | :--------------------------------------------------------- | :---------------------------------------------------------- | :------------------------------------------------------------- |
| **Performans** | Çok Hızlı (Paralel test, otomatik beklemeler) | Orta (Driver bağımlılığı, senkron komutlar) | Hızlı (Tarayıcı içinde çalışır) |
| **Öğrenme Eğrisi** | Orta (Modern API, iyi dökümantasyon) | Yüksek (Karmaşık kurulum, driver yönetimi) | Düşük (Geliştirici dostu, Jest benzeri API) |
| **Ekosistem** | Gelişmekte (Microsoft desteği, aktif topluluk) | Çok Geniş (Uzun geçmiş, büyük topluluk, her dil desteği) | Orta (JavaScript/TypeScript odaklı, hızla büyüyor) |
| **Topluluk** | Çok Aktif (GitHub, Discord) | Çok Geniş ve Köklü (Forumlar, Stack Overflow) | Aktif (GitHub, Discord, bloglar) |
| **Kurumsal Destek** | Microsoft | Open Source (Çok sayıda ticari ürün/hizmet) | Cypress.io (Ticari ürün ve destek) |
| **Kullanım Alanı** | Modern Web/SPA, Mobil Emülasyon, API Testi, CI/CD | Eski/Yeni Web Uygulamaları, Mobil (Appium ile), Masaüstü | Modern Web/SPA, Geliştirici Odaklı E2E, Komponent Testi |
| **Dil Desteği** | JS, TS, Python, .NET, Java | JS, Java, Python, C#, Ruby, Kotlin, PHP | JS, TS (Sadece) |
| **Tarayıcı Desteği** | Chromium, Firefox, WebKit (Tek API) | Tüm popüler tarayıcılar (Ayrı driver'lar) | Chromium, Electron, Firefox (Experimental), Edge |
| **Paralel Test** | Doğal ve Verimli | Harici araçlarla (TestNG, JUnit) | Dahili (Farklı spec dosyaları için) |
| **Test Raporlama** | Dahili HTML raporlama, Junit, Allure desteği | Geniş entegrasyon (ExtentReports, Allure) | Dahili UI raporlama, Junit, Mochawesome |
Bu tabloya baktığımızda, Playwright'ın modern web ve mobil test otomasyonu ihtiyaçları için en dengeli ve geleceğe dönük çözümü sunduğunu görüyoruz. Özellikle tek bir API ile tüm ana tarayıcı motorlarını desteklemesi ve güçlü mobil emülasyon yetenekleri, onu 2026'nın önde gelen tercihlerinden biri haline getiriyor. Selenium, köklü geçmişi ve geniş dil desteğiyle hala önemli bir oyuncu olsa da, kurulum ve yönetim karmaşıklığı modern geliştirme süreçlerinde bir dezavantaj olabilir. Cypress ise geliştirici deneyimine odaklanarak hızlı test yazımına olanak tanır, ancak tarayıcı ve dil desteği konusunda Playwright kadar esnek değildir. Ekibimizde yaptığımız değerlendirmeler sonucunda, 2026'da yeni projeler için Playwright'ı standart olarak belirledik.
## Kurulum ve İlk Adımlar (2026 Güncel)
Playwright'ı kurmak ve ilk testinizi çalıştırmak oldukça basittir. Bu bölümde, Node.js ve TypeScript kullanarak adım adım kurulumu ve temel bir test senaryosunu ele alacağız. 2026 itibarıyla Playwright'ın kararlı sürümü v1.42.0'dır.
### Ön Gereksinimler:
* **Node.js:** v18.x veya üzeri (LTS sürümü önerilir).
* **npm/Yarn:** Node.js ile birlikte gelir.
### Adım 1: Yeni Bir Proje Oluşturma
Boş bir dizin oluşturun ve içine girin:
```bash
mkdir playwright-mobile-tests-2026
cd playwright-mobile-tests-2026
npm init -y
```
### Adım 2: Playwright'ı Yükleme
Playwright test kütüphanesini ve gerekli tarayıcıları yükleyin. Bu komut, Chromium, Firefox ve WebKit'i otomatik olarak indirir:
```bash
npm install @playwright/test
npx playwright install
```
> **Pro Tip:** Eğer sadece belirli tarayıcıları test etmek istiyorsanız, `npx playwright install chromium` gibi komutları kullanabilirsiniz. Ancak mobil emülasyon için genellikle tüm ana tarayıcı motorlarına ihtiyacınız olacaktır.
### Adım 3: İlk Test Dosyasını Oluşturma
`tests` adında bir klasör oluşturun ve içine `example.spec.ts` adında bir dosya ekleyin:
```typescript
// tests/example.spec.ts
import { test, expect } from '@playwright/test';
test('başlık doğru olmalı', async ({ page }) => {
await page.goto('https://playwright.dev/docs/intro');
await expect(page).toHaveTitle(/Playwright/);
});
test('başlangıç linkine tıklanmalı', async ({ page }) => {
await page.goto('https://playwright.dev/docs/intro');
await page.locator('text=Get started').click();
await expect(page).toHaveURL(/.*intro/);
});
```
### Adım 4: Testleri Çalıştırma
Testleri çalıştırmak için aşağıdaki komutu kullanın:
```bash
npx playwright test
```
Testler başarıyla çalıştığında konsolda bir özet göreceksiniz. Eğer tarayıcıda çalıştırmak isterseniz `--headed` bayrağını ekleyebilirsiniz:
```bash
npx playwright test --headed
```
### Adım 5: Playwright Yapılandırması (playwright.config.ts)
Playwright'ın varsayılan yapılandırması çoğu senaryo için yeterli olsa da, özellikle mobil testler için özelleştirmeler yapmanız gerekebilir. Projenizin kök dizininde `playwright.config.ts` dosyasını oluşturun veya mevcut olanı güncelleyin:
```typescript
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
// Mobil cihaz emülasyonu için örnekler
{
name: 'Mobile Chrome',
use: { ...devices['Pixel 5'] },
},
{
name: 'Mobile Safari',
use: { ...devices['iPhone 12'] },
},
],
});
```
Bu yapılandırma ile farklı tarayıcı ve mobil cihaz profilleri tanımladık. Artık testlerinizi belirli bir profil üzerinde çalıştırabilirsiniz:
```bash
npx playwright test --project='Mobile Chrome'
```
## Temel Kullanım ve Örnekler (Mobil Odaklı)
Playwright'ın mobil cihaz emülasyonu yetenekleri sayesinde, web uygulamanızın farklı mobil cihazlarda nasıl davrandığını kolayca test edebilirsiniz. İşte 2026'nın mobil geliştirme pratiklerine uygun bazı temel örnekler:
### Örnek 1: Mobil Cihazda Giriş Sayfası Testi
**Problem:** Bir web uygulamasının mobil arayüzünde kullanıcı girişi yapmak ve başarılı bir şekilde yönlendirildiğini doğrulamak.
**Çözüm:** `devices` objesini kullanarak bir mobil cihazı emüle edin, giriş formunu doldurun ve yönlendirmeyi kontrol edin.
```typescript
// tests/mobile-login.spec.ts
import { test, expect, devices } from '@playwright/test';
test.use({ ...devices['iPhone 12 Pro Max'] });
test('mobil cihazda başarılı giriş', async ({ page }) => {
await page.goto('https://www.example.com/login'); // Kendi uygulamanızın giriş URL'si
// Kullanıcı adı ve şifre alanlarını bul ve doldur
await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'password123');
// Giriş butonuna tıkla
await page.click('button[type="submit"]');
// Başarılı giriş sonrası beklenen URL'yi kontrol et
await expect(page).toHaveURL('https://www.example.com/dashboard');
await expect(page.locator('h1')).toContainText('Hoş Geldiniz');
});
```
### Örnek 2: Mobil Menü (Hamburger Menü) Etkileşimi
**Problem:** Mobil görünümde gizlenmiş bir hamburger menüyü açmak ve menü öğelerine tıklamak.
**Çözüm:** Mobil cihaz emülasyonu ile menü ikonuna tıklayın ve açılan menüdeki bir öğeyi seçin.
```typescript
// tests/mobile-menu.spec.ts
import { test, expect, devices } from '@playwright/test';
test.use({ ...devices['Pixel 5'] });
test('mobil menü navigasyonu', async ({ page }) => {
await page.goto('https://www.example.com');
// Hamburger menü ikonunu bul ve tıkla (genellikle bir button veya div)
await page.locator('[aria-label="Open navigation"]').click();
// Menünün görünür olmasını bekle
await expect(page.locator('nav[data-testid="mobile-nav"]')).toBeVisible();
// Menüdeki bir linke tıkla
await page.locator('nav[data-testid="mobile-nav"] a:has-text("Hizmetler")').click();
// Yönlendirmenin doğru olduğunu kontrol et
await expect(page).toHaveURL(/.*hizmetler/);
await expect(page.locator('h1')).toContainText('Hizmetlerimiz');
});
```
### Örnek 3: Mobil Cihazda Form Doğrulama
**Problem:** Mobil form üzerinde geçersiz veri girişi yapıldığında hata mesajlarının doğru gösterildiğini doğrulamak.
**Çözüm:** Geçersiz verilerle formu doldurun ve beklenen hata mesajlarının görünürlüğünü kontrol edin.
```typescript
// tests/mobile-form-validation.spec.ts
import { test, expect, devices } from '@playwright/test';
test.use({ ...devices['Samsung Galaxy S20'] });
test('mobil form hata mesajları', async ({ page }) => {
await page.goto('https://www.example.com/kayit');
// E-posta alanına geçersiz formatta veri gir
await page.fill('input[name="email"]', 'gecersiz-email');
await page.fill('input[name="password"]', '123'); // Çok kısa şifre
await page.click('button[type="submit"]');
// Beklenen hata mesajlarının görünürlüğünü kontrol et
await expect(page.locator('text=Geçerli bir e-posta adresi girin')).toBeVisible();
await expect(page.locator('text=Şifre en az 6 karakter olmalı')).toBeVisible();
// Geçerli verilerle tekrar dene
await page.fill('input[name="email"]', 'test@example.com');
await page.fill('input[name="password"]', 'guvenliSifre123');
await page.click('button[type="submit"]');
// Başarılı kayıttan sonra yönlendirmeyi kontrol et
await expect(page).toHaveURL(/.*basarili-kayit/);
});
```
### Örnek 4: Görsel Regresyon Testi (Snapshot Testing)
**Problem:** Mobil arayüzde beklenmedik görsel değişiklikleri tespit etmek.
**Çözüm:** Playwright'ın `toMatchSnapshot()` özelliğini kullanarak bir ekran görüntüsü alın ve daha önceki bir referans görüntüyle karşılaştırın.
```typescript
// tests/mobile-visual-regression.spec.ts
import { test, expect, devices } from '@playwright/test';
test.use({ ...devices['iPhone 12 Pro'] });
test('mobil anasayfa görsel regresyon testi', async ({ page }) => {
await page.goto('https://www.example.com');
// İlk çalıştırmada snapshot oluşturur, sonraki çalıştırmalarda karşılaştırır.
await expect(page).toHaveScreenshot('anasayfa-iphone12pro.png', { maxDiffPixelRatio: 0.01 });
});
```
> **Uyarı:** Görsel regresyon testleri, özellikle dinamik içerikli sayfalarda "flaky" olabilir. Sabit bir arayüze sahip bileşenler veya sayfalar için daha uygundur. `maxDiffPixelRatio` ve `threshold` gibi seçeneklerle toleransı ayarlayabilirsiniz.
## İleri Seviye Teknikler ve Senaryolar (2026)
Playwright'ın gücü, sadece temel test senaryolarını otomatikleştirmekle kalmaz, aynı zamanda karmaşık ve gerçek dünya senaryolarını da ele alabilen ileri seviye teknikler sunar. 2026'da büyük ölçekli projelerde Playwright kullanırken bu teknikler, test altyapınızın verimliliğini ve güvenilirliğini artıracaktır.
### 1. API İsteklerini Dinleme ve Mocklama
Modern web uygulamaları yoğun bir şekilde API'lerle etkileşim kurar. Playwright, ağ isteklerini dinleme, değiştirme ve hatta mocklama yeteneği sunarak, testlerinizi daha izole ve hızlı hale getirir.
**Problem:** Bir API çağrısının başarılı bir şekilde yapıldığını doğrulamak veya belirli bir API yanıtını taklit ederek frontend davranışını test etmek.
**Çözüm:** `page.route()` metodunu kullanarak ağ isteklerini yakalayın ve manipüle edin.
```typescript
// tests/api-mocking.spec.ts
import { test, expect } from '@playwright/test';
test('API yanıtını mocklayarak ürün listesini test et', async ({ page }) => {
// Belirli bir API isteğini yakala ve sahte bir yanıt döndür
await page.route('**/api/products', async route => {
const json = [
{ id: 1, name: 'Mock Ürün A', price: 100 },
{ id: 2, name: 'Mock Ürün B', price: 150 },
];
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify(json),
});
});
await page.goto('https://www.example.com/products');
// Mocklanan verilerin sayfada göründüğünü doğrula
await expect(page.locator('text=Mock Ürün A')).toBeVisible();
await expect(page.locator('text=Mock Ürün B')).toBeVisible();
await expect(page.locator('text=100 TL')).toBeVisible();
});
test('API isteğinin yapıldığını doğrula', async ({ page }) => {
const [request] = await Promise.all([
page.waitForRequest('**/api/users'), // Belirli bir API isteğini bekliyor
page.goto('https://www.example.com/profile'),
]);
expect(request.url()).toContain('/api/users');
expect(request.method()).toBe('GET');
});
```
### 2. Global Setup/Teardown ile Test Ortamını Yönetme
**Problem:** Tüm testlerden önce bir veritabanı temizliği yapmak, bir test sunucusu başlatmak veya tüm testlerden sonra kaynakları serbest bırakmak gibi işlemler.
**Çözüm:** `playwright.config.ts` dosyasında `globalSetup` ve `globalTeardown` seçeneklerini kullanarak global hook'lar tanımlayın.
```typescript
// playwright.config.ts (örnek parça)
import { defineConfig } from '@playwright/test';
export default defineConfig({
// ... diğer yapılandırmalar
globalSetup: require.resolve('./global-setup'),
globalTeardown: require.resolve('./global-teardown'),
});
// global-setup.ts
import type { FullConfig } from '@playwright/test';
async function globalSetup(config: FullConfig) {
console.log('Global Setup: Test ortamı hazırlanıyor...');
// Veritabanı temizliği, test sunucusu başlatma vb.
// Örneğin: await setupTestDatabase();
// Örneğin: await startTestServer();
}
export default globalSetup;
// global-teardown.ts
import type { FullConfig } from '@playwright/test';
async function globalTeardown(config: FullConfig) {
console.log('Global Teardown: Test ortamı temizleniyor...');
// Test sunucusunu durdurma, logları kaydetme vb.
// Örneğin: await stopTestServer();
}
export default globalTeardown;
```
### 3. Kimlik Doğrulama Durumunu Yeniden Kullanma (Authentication State Reuse)
**Problem:** Her test çalıştırmasında tekrar tekrar giriş yapmak, test süresini uzatır ve performansı düşürür.
**Çözüm:** Bir kez giriş yapın ve oturum durumunu (storage state) bir dosyaya kaydederek diğer testlerde yeniden kullanın.
```typescript
// auth.setup.ts
import { test as setup, expect } from '@playwright/test';
const authFile = 'playwright/.auth/user.json';
setup('kimlik doğrulama', async ({ page }) => {
await page.goto('https://www.example.com/login');
await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'password123');
await page.click('button[type="submit"]');
// Başarılı giriş sonrası dashboard'a yönlendirildiğini kontrol et
await expect(page).toHaveURL('https://www.example.com/dashboard');
// Oturum durumunu kaydet
await page.context().storageState({ path: authFile });
});
// playwright.config.ts (örnek parça)
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
// ... diğer yapılandırmalar
globalSetup: require.resolve('./auth.setup'), // Global setup olarak kimlik doğrulamasını ekle
projects: [
{
name: 'setup',
testMatch: /auth.setup.ts/,
},
{
name: 'authenticated',
use: {
...devices['Desktop Chrome'],
storageState: authFile, // Kaydedilmiş oturum durumunu kullan
},
dependencies: ['setup'], // 'setup' projesi önce çalıştırılır
},
],
});
// tests/dashboard.spec.ts (kimliği doğrulanmış test)
import { test, expect } from '@playwright/test';
test.describe('Kimliği doğrulanmış kullanıcı', () => {
test.use({ storageState: 'playwright/.auth/user.json' }); // Veya config'den gelir
test('dashboard sayfasına erişebilir', async ({ page }) => {
await page.goto('https://www.example.com/dashboard');
await expect(page.locator('h1')).toContainText('Hoş Geldiniz');
await expect(page.locator('text=Profilim')).toBeVisible();
});
});
```
> **Experience:** Production ortamında oturum durumunu yeniden kullanmak, büyük test suitlerinde test süresini %60'a kadar azaltabilir. Ancak, oturumun süresi dolduğunda veya token yenilendiğinde bu dosyanın güncel tutulduğundan emin olun.
## Best Practices & Anti-Patterns (2026)
Playwright ile etkili ve sürdürülebilir testler yazmak için belirli en iyi uygulamaları takip etmek ve yaygın hatalardan kaçınmak önemlidir. 2026 itibarıyla test otomasyonunda kabul görmüş bu prensipler, ekibinizin verimliliğini artıracaktır.
### ✅ DOĞRU Uygulamalar:
* **Açık ve Anlaşılır Seçiciler Kullanın:** `data-testid` veya `id` gibi kararlı seçiciler kullanın. CSS sınıfları veya XPath'ler sık değişebileceği için kaçının. Örneğin: `page.locator('data-testid=login-button')` yerine `page.locator('#loginButton')` veya `page.locator('button', { hasText: 'Giriş Yap' })`.
* **Testleri İzole Edin:** Her testin birbirinden bağımsız olduğundan ve kendi test ortamını kurup temizlediğinden emin olun. Bu, testlerin sırasız çalıştırılmasına ve paralel testlere olanak tanır.
* **Otomatik Beklemelere Güvenin:** Playwright'ın otomatik bekleme yeteneklerini kullanın. `page.waitForTimeout()` veya `sleep()` gibi manuel beklemelerden kaçının. Bu, testlerinizi daha stabil hale getirir.
* **Anlamlı Test İsimleri Verin:** Test isimleri, neyin test edildiğini ve beklenen sonucu açıkça belirtmelidir. Örneğin: `test('kullanıcı geçerli kimlik bilgileriyle giriş yapmalı', ...)`.
* **CI/CD Entegrasyonu Yapın:** Testlerinizi her kod değişikliğinde otomatik olarak çalıştıracak bir CI/CD hattı kurun. Bu, regresyon hatalarını erken aşamada yakalamanızı sağlar. Ekibimizde Jenkins ile Playwright entegrasyonu, hataları üretimden önce tespit etme oranımızı %70 artırdı.
* **Mobil Cihaz Emülasyonunu Kullanın:** Mobil uyumluluğu test etmek için `devices` objesini ve farklı viewport'ları kullanın.
* **Trace Viewer'ı Etkin Kullanın:** Hata ayıklama için Playwright'ın yerleşik Trace Viewer aracını kullanın. Testin her adımını, ağ isteklerini ve ekran görüntülerini gösterir.
* **Sürüm Kontrolünde Tutun:** `playwright.config.ts`, test dosyaları ve `package.json` gibi tüm test altyapısı dosyalarını sürüm kontrol sisteminizde (Git) tutun.
* **Hata Yakalama ve Raporlama:** Test başarısızlıklarını yakalayın ve okunabilir raporlar (HTML Reporter, Allure) oluşturun. Bu, sorunları hızlıca analiz etmenize yardımcı olur.
### ❌ YANLIŞ Uygulamalar (Anti-Patterns):
* **Hardcoded Beklemeler:** `page.waitForTimeout(5000)` gibi sabit beklemeler kullanmak, testleri yavaşlatır ve istikrarsız hale getirir. Playwright'ın otomatik bekleme mekanizmalarına güvenin.
* **CSS Sınıflarına Bağımlı Seçiciler:** `page.locator('.btn-primary')` gibi seçiciler, UI değişiklikleriyle kolayca bozulabilir. Bunun yerine `data-testid` veya `id` kullanın.
* **Çok Uzun Testler:** Tek bir test içinde çok fazla eylem zincirlemek, hata ayıklamayı zorlaştırır ve testin amacını bulanıklaştırır. Testleri küçük, odaklanmış birimlere ayırın.
* **Test Verilerini Hardcode Etmek:** Test verilerini doğrudan kod içine yazmak yerine, test verilerini yönetmek için fixtures veya harici dosyalar kullanın.
* **Görsel Regresyon Testlerini Aşırı Kullanmak:** Görsel regresyon testleri güçlü olsa da, her şeyi bu şekilde test etmek bakım maliyetini artırır. Yalnızca kritik UI öğeleri veya statik sayfalar için kullanın.
* **Headless Modu Devre Dışı Bırakmak:** Performans için testleri genellikle headless modda çalıştırın. Sadece hata ayıklama veya görsel doğrulama gerektiğinde headful moda geçin.
## Yaygın Hatalar ve Çözümleri (2026)
Playwright ile çalışırken karşılaşılan bazı yaygın sorunlar vardır. Bu bölümde, bu sorunları, nedenlerini ve 2026 güncel çözümlerini ele alacağız.
### 1. Hata: `Timeout exceeded while waiting for element to be visible/enabled`
**Problem:** Playwright, belirli bir elementin sayfada görünür veya etkileşime hazır olmasını beklerken zaman aşımına uğrar.
**Sebep:** Element henüz DOM'a yüklenmemiş olabilir, bir animasyonla gecikmeli olarak görünür hale geliyor olabilir veya yanlış bir seçici kullanılmıştır.
**Çözüm:**
* **Seçiciyi Kontrol Edin:** Seçicinizin doğru ve kararlı olduğundan emin olun (`data-testid`, `id`).
* **Bekleme Stratejilerini Kullanın:** Playwright'ın otomatik beklemeleri çoğu zaman yeterlidir. Ancak, bazen açıkça beklemeniz gerekebilir. Örneğin, bir API çağrısı sonrası veri yüklenmesini beklemek için `page.waitForResponse()` veya `expect(locator).toBeVisible()` gibi assertion'lar kullanın.
* **Zaman Aşımını Artırın (Geçici):** `test.setTimeout(60000)` veya `page.setDefaultTimeout(30000)` ile varsayılan zaman aşımını artırabilirsiniz. Ancak bu, sorunun kökünü çözmek yerine sadece erteleyebilir.
```typescript
// Yanlış: Elementin hemen orada olduğunu varsaymak
// await page.click('button#myButton');
// Doğru: Elementin görünür olmasını beklemek
await page.locator('button#myButton').click(); // Otomatik olarak görünür olmasını bekler
// Daha spesifik bir bekleme (örneğin, bir API yanıtından sonra)
await page.waitForResponse(response => response.url().includes('/api/data') && response.status() === 200);
await expect(page.locator('#dataLoadedElement')).toBeVisible();
```
### 2. Hata: `Error: 'page.goto' failed: net::ERR_CONNECTION_REFUSED`
**Problem:** Playwright, belirtilen URL'ye erişemiyor.
**Sebep:** Test edilen uygulamanın sunucusu çalışmıyor olabilir, yanlış URL belirtilmiştir veya ağ yapılandırmasında bir sorun vardır.
**Çözüm:**
* **Uygulamanın Çalıştığını Doğrulayın:** Testi çalıştırmadan önce uygulamanızın yerel olarak veya test ortamında erişilebilir olduğundan emin olun.
* **URL'yi Kontrol Edin:** `page.goto()` içinde kullanılan URL'nin doğru ve erişilebilir olduğundan emin olun.
* **Base URL Kullanımı:** `playwright.config.ts` dosyasında `use: { baseURL: 'http://localhost:3000' }` tanımlayarak URL'leri daha yönetilebilir hale getirin.
```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
baseURL: 'http://localhost:3000', // Test uygulamanızın temel URL'si
},
});
// tests/example.spec.ts
import { test, expect } from '@playwright/test';
test('anasayfa yüklenmeli', async ({ page }) => {
await page.goto('/'); // baseURL kullanılacak
await expect(page).toHaveTitle(/Uygulama Başlığı/);
});
```
### 3. Hata: `Error: expect(locator).toHaveText() failed` (Yanlış metin)
**Problem:** Bir elementin beklenen metni içermediği hatası.
**Sebep:** Elementin metni dinamik olarak değişiyor olabilir, yanlış element seçilmiştir veya beklenti yanlış yazılmıştır.
**Çözüm:**
* **Metni İnceleyin:** Tarayıcı geliştirici araçlarını kullanarak elementin mevcut metnini doğrulayın.
* **Kısmi Metin Eşleşmesi:** Eğer metnin tamamı değil de bir kısmı önemliyse, regex kullanın veya `toContainText()` kullanın.
* **Bekleme:** Metnin yüklenmesi zaman alıyorsa, `expect(locator).toHaveText()` Playwright'ın otomatik bekleme özelliği sayesinde metnin görünmesini bekleyecektir. Ancak bazen bir API çağrısı sonrası metnin güncellenmesi için ek bir bekleme gerekebilir.
```typescript
// tests/text-validation.spec.ts
import { test, expect } from '@playwright/test';
test('kullanıcı adı doğru gösterilmeli', async ({ page }) => {
await page.goto('https://www.example.com/profile');
// Tam metin eşleşmesi
await expect(page.locator('#usernameDisplay')).toHaveText('Merhaba, Burak!');
// Kısmi metin eşleşmesi
await expect(page.locator('#welcomeMessage')).toContainText('Hoş Geldiniz');
// Regex ile eşleşme
await expect(page.locator('#versionInfo')).toHaveText(/Sürüm: v\d+\.\d+\.\d+/);
});
```
## Performans Optimizasyonu (2026)
Büyük ölçekli projelerde veya CI/CD ortamlarında test süresini kısaltmak kritik öneme sahiptir. Playwright, doğası gereği hızlı olsa da, bazı optimizasyon teknikleri ile testlerinizin performansını daha da artırabilirsiniz. Ekibimizde bu teknikleri uygulayarak test süresini %40 oranında düşürdük.
### 1. Paralel Test Yürütme
Playwright'ın en büyük avantajlarından biri, testleri doğal olarak p