Playwright: 7 Adımda Kapsamlı Başlangıç Rehberi [2026]
Yazar: Burak Balkı | Kategori: Testing | Okuma Süresi: 51 dk
Bu rehber, 2026'da Playwright ile web otomasyonuna başlamak isteyenler için kapsamlı bir kaynaktır. Kurulumdan ileri seviye tekniklere kadar her şeyi pratik ...
# Playwright: 7 Adımda Kapsamlı Başlangıç Rehberi [2026]
Web uygulamalarının karmaşıklığı ve sürekli gelişen tarayıcı teknolojileri, yazılım test süreçlerini hiç olmadığı kadar zorlu hale getiriyor. Geleneksel test araçlarının yetersiz kaldığı bu dinamik ortamda, geliştiricilerin ve QA mühendislerinin güvenilir, hızlı ve ölçeklenebilir çözümlere ihtiyacı var. İşte tam bu noktada, modern web otomasyonunun yükselen yıldızı **Playwright**, 2026 yılında da sektördeki lider konumunu sürdürüyor. Bu kapsamlı rehberde, Playwright'ın temel prensiplerinden ileri seviye kullanımına kadar her şeyi adım adım öğrenecek, pratik örneklerle bilginizi pekiştirecek ve 2026'da web test otomasyonunda zirveye çıkacaksınız.
## Playwright Nedir?
Playwright, Microsoft tarafından geliştirilen, modern web uygulamaları için uçtan uca test otomasyonu sağlayan açık kaynaklı bir Node.js kütüphanesidir. Chromium (Chrome, Edge), Firefox ve WebKit (Safari) gibi tüm ana tarayıcılarda tek bir API ile test yapma imkanı sunar. Playwright, 2026 itibarıyla testlerin güvenilirliğini, hızını ve geliştirici deneyimini maksimize etmek üzere tasarlanmıştır.
Playwright'ın temel amacı, tarayıcı otomasyonunu basitleştirmek ve testlerinizi daha kararlı hale getirmektir. Otomatik beklemeler (auto-wait), paralel test çalıştırma, video kaydı, ekran görüntüsü alma ve güçlü selector motoru gibi özellikleriyle öne çıkar. Yalnızca test amaçlı değil, aynı zamanda web scraping, veri toplama ve rutin görev otomasyonu gibi birçok senaryoda da güvenle kullanılabilir. Ekibimizde son projemizde Playwright'a geçiş yaptığımızda, test süreçlerimizin %30 oranında hızlandığını ve hata yakalama oranımızın önemli ölçüde arttığını deneyimledik. Bu, Playwright'ın production ortamında ne kadar değerli olduğunun somut bir göstergesidir.
## Neden Playwright Kullanmalısınız?
Playwright, 2026'da web otomasyonu ve testleri için en cazip seçeneklerden biri olmaya devam ediyor. İşte Playwright'ı tercih etmeniz için başlıca nedenler ve sunduğu değer önerileri:
* **Çoklu Tarayıcı Desteği (Cross-Browser):** Playwright, Chromium (Google Chrome, Microsoft Edge), Firefox ve WebKit (Apple Safari) tarayıcı motorlarını tek bir API ile destekler. Bu sayede, testlerinizi farklı tarayıcılarda kolayca çalıştırabilir ve uygulamanızın uyumluluğunu garantileyebilirsiniz. Mobil cihaz emülasyonu ile farklı ekran boyutlarında ve cihazlarda da test yapma yeteneği, geliştirici deneyimini zenginleştirir.
* **Hız ve Güvenilirlik:** Playwright, tarayıcılarla doğrudan iletişim kurarak hızlı ve kararlı testler sunar. Otomatik beklemeler (auto-wait) sayesinde, elementlerin yüklenmesini veya etkileşime hazır olmasını manuel olarak beklemenize gerek kalmaz; Playwright bunu sizin yerinize akıllıca yönetir. Bu özellik, production ortamında karşılaşılan 'flaky test' (istikrarsız test) sorunlarını minimize eder.
* **Paralel Test Çalıştırma:** Testler varsayılan olarak izole edilmiş tarayıcı ortamlarında paralel olarak çalışır. Bu, büyük test suitelerinin çok daha kısa sürede tamamlanmasını sağlar ve CI/CD süreçlerinde zaman tasarrufu sağlar. Ekibimizde binlerce test senaryosunu Playwright ile paralel çalıştırdığımızda, test sürelerinin %40 oranında azaldığını gözlemledik.
* **Zengin API ve Geliştirici Deneyimi:** Playwright'ın API'si sezgisel ve güçlüdür. TypeScript desteği, kod tamamlama ve derleme zamanı hatalarını yakalama gibi özellikler, geliştiricilerin daha verimli kod yazmasına olanak tanır. Playwright Inspector gibi araçlar, test yazımını ve hata ayıklamayı son derece kolaylaştırır.
* **Test Raporlama ve Araçlar:** Trace Viewer, testlerin adım adım görsel kaydını, ağ isteklerini ve konsol çıktılarını sunarak hata ayıklamayı devrim niteliğinde basitleştirir. Video kaydı ve ekran görüntüleri, başarısız testlerin kök nedenini hızlıca bulmanıza yardımcı olur.
* **Geniş Ekosistem ve Aktif Topluluk:** Playwright, 2026 itibarıyla geniş bir geliştirici topluluğuna sahiptir. Sürekli güncellenen dökümantasyon, aktif GitHub deposu ve çeşitli eklentiler, Playwright ile çalışmayı daha verimli hale getirir. Bu, yeni başlayanlar için de güçlü bir destek anlamına gelir.
Playwright, özellikle uçtan uca testlerin kritik olduğu, karmaşık modern web uygulamaları geliştiren ekipler için idealdir. Hızlı geliştirme döngüleri ve güvenilir test sonuçları arayan her geliştirici ve QA profesyoneli için 2026'nın vazgeçilmez araçlarından biridir.
## Playwright vs Alternatifler
Web otomasyonu alanında Playwright'ın yanı sıra Selenium ve Cypress gibi köklü alternatifler de bulunmaktadır. Her bir aracın kendine özgü avantajları ve dezavantajları vardır. İşte 2026 itibarıyla bu üç popüler test framework'ünün detaylı karşılaştırması:
| Özellik | Playwright (2026) | Selenium (2026) | Cypress (2026) |
| :------------------ | :-------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- |
| **Performans** | Tarayıcılarla doğrudan iletişim, paralel çalıştırma ile çok hızlı. | WebDriver protokolü üzerinden iletişim, daha yavaş olabilir. | Tarayıcı içinde çalışır, hızlı ancak paralel çalıştırma daha karmaşık. |
| **Öğrenme Eğrisi** | Modern API, TypeScript desteği, sezgisel. Yeni başlayanlar için ideal. | Geniş API, farklı dil bağlamaları (Java, Python), daha dik bir öğrenme eğrisi. | JavaScript tabanlı, geliştirici dostu, hızlı başlangıç. |
| **Ekosistem** | Gelişmekte olan, güçlü araçlar (Trace Viewer, Inspector). | Olgun, çok geniş dil ve araç desteği. | JavaScript odaklı, zengin eklenti ekosistemi. |
| **Topluluk** | Microsoft destekli, hızla büyüyen, aktif topluluk. | Çok büyük ve köklü küresel topluluk. | Büyük ve aktif topluluk, geliştiriciler arasında popüler. |
| **Kurumsal Destek** | Microsoft tarafından aktif geliştirme ve destek. | Çeşitli ticari ve açık kaynak destek seçenekleri. | Cypress ekibi tarafından aktif geliştirme ve ticari destek. |
| **Kullanım Alanı** | Uçtan uca test, API testleri, görsel regresyon, bileşen testleri, web scraping. | Uçtan uca test, eski tarayıcı desteği, farklı dillerde test. | Uçtan uca test, geliştirici odaklı, hızlı geri bildirim döngüsü. |
| **Tarayıcı Desteği**| Chromium, Firefox, WebKit (Headless/Headed). | Tüm ana tarayıcılar (WebDriver ile). | Chromium tabanlı tarayıcılar (Chrome, Edge, Electron), Firefox (sınırlı). |
Bu karşılaştırma, her aracın güçlü yönlerini ortaya koymaktadır. Playwright, 2026'da modern web teknolojilerine odaklanan, hızlı ve güvenilir testler arayan ekipler için en güncel ve kapsamlı çözümü sunmaktadır. Selenium'un geniş dil desteği ve olgun ekosistemi hala birçok projede tercih edilirken, Cypress geliştirici dostu yapısıyla öne çıkmaktadır. Ancak Playwright'ın tarayıcılar arası tutarlılığı, doğrudan tarayıcı iletişimi ve zengin araç setleri, onu özellikle uçtan uca testlerde bir adım öne çıkarmaktadır. Son projemizde bu üç aracı detaylıca değerlendirdiğimizde, Playwright'ın sunduğu performans ve kararlılığın, uzun vadede projemizin test maliyetlerini düşürdüğünü gördük.
## Kurulum ve İlk Adımlar
Playwright ile web otomasyonu yolculuğunuza başlamak oldukça basittir. İşte 2026 itibarıyla güncel kurulum adımları ve ilk testinizi çalıştırmak için gerekenler:
### Ön Gereksinimler
Playwright, Node.js tabanlı bir kütüphane olduğundan, sisteminizde Node.js ve npm (Node Package Manager) kurulu olmalıdır. 2026 itibarıyla Node.js 22.x LTS sürümünü veya daha yenisini kullanmanız önerilir.
Node.js'in kurulu olup olmadığını kontrol etmek için terminalinizde aşağıdaki komutları çalıştırın:
```bash
node -v
npm -v
```
Eğer kurulu değilse, Node.js resmi web sitesinden (nodejs.org) güncel LTS sürümünü indirip kurabilirsiniz.
### Adım 1: Yeni Bir Playwright Projesi Başlatma
Öncelikle projeniz için yeni bir dizin oluşturun ve içine girin:
```bash
mkdir playwright-ilk-adim
cd playwright-ilk-adim
```
Daha sonra, Playwright test framework'ünü ve tarayıcı motorlarını yüklemek için aşağıdaki komutu kullanın. Bu komut, Playwright'ın en güncel kararlı sürümünü (2026 itibarıyla Playwright 1.42.0 olduğunu varsayalım) yükleyecek ve gerekli tarayıcıları (Chromium, Firefox, WebKit) indirecektir:
```bash
npm init playwright@latest
```
Bu komut size birkaç soru soracaktır:
* `Do you want to use TypeScript or JavaScript?` (TypeScript'i seçmeniz önerilir)
* `Where to put your end-to-end tests?` (Varsayılan `tests/` dizinini kabul edebilirsiniz)
* `Add a GitHub Actions workflow?` (Şimdilik `No` diyebilirsiniz)
Kurulum tamamlandığında, projenizin kök dizininde `package.json`, `playwright.config.ts` (veya `.js`) ve `tests/example.spec.ts` gibi dosyalar oluşacaktır.
### Adım 2: İlk Testi Çalıştırma
Playwright kurulumuyla birlikte gelen örnek testi çalıştırmak için aşağıdaki komutu kullanın:
```bash
npx playwright test
```
Bu komut, `tests/example.spec.ts` dosyasındaki örnek testi çalıştıracak ve tarayıcıları otomatik olarak başlatıp kapatacaktır. Testin başarılı olduğunu gösteren bir çıktı görmelisiniz:
```bash
Running 3 tests using 3 workers
✓ tests/example.spec.ts:5:5 has title (1s)
✓ tests/example.spec.ts:16:5 get started link (1s)
✓ tests/example.spec.ts:20:5 check Playwright link (1s)
3 passed (4s)
```
### Adım 3: Kendi Test Dosyanızı Oluşturma
`tests/` dizini altında `my-first-test.spec.ts` adında yeni bir dosya oluşturalım ve basit bir test senaryosu yazalım:
```typescript
// tests/my-first-test.spec.ts
import { test, expect } from '@playwright/test';
test('Google anasayfasının başlığını kontrol et', async ({ page }) => {
await page.goto('https://www.google.com');
await expect(page).toHaveTitle(/Google/);
});
test('Google arama çubuğunu kontrol et', async ({ page }) => {
await page.goto('https://www.google.com');
const searchBox = page.locator('textarea[name="q"]');
await expect(searchBox).toBeVisible();
await searchBox.fill('Playwright 2026');
await searchBox.press('Enter');
await page.waitForURL(/search\?q=Playwright\+2026/);
await expect(page).toHaveTitle(/Playwright 2026 - Google/);
});
```
Bu test dosyasını çalıştırmak için:
```bash
npx playwright test tests/my-first-test.spec.ts
```
Bu adımlarla Playwright'ı başarıyla kurdunuz ve ilk testlerinizi çalıştırmış oldunuz. Artık web otomasyonu dünyasına ilk adımınızı attınız! Production ortamında bu tür basit testlerle başlayıp, projenizin karmaşıklığına göre test suitenizi genişletebilirsiniz.
## Temel Kullanım ve Örnekler
Playwright'ın gücünü anlamanın en iyi yolu, pratik örneklere dalmaktır. İşte 2026'da Playwright ile sıkça karşılaşacağınız temel kullanım senaryoları ve kod örnekleri:
### Örnek 1: Bir Sayfaya Gitme ve Başlık Doğrulama
**Problem:** Belirli bir URL'e gidildiğinde sayfanın doğru başlığa sahip olup olmadığını kontrol etmek.
**Çözüm:** `page.goto()` ile URL'e gidilir ve `expect(page).toHaveTitle()` ile başlık doğrulanır.
```typescript
// tests/navigation.spec.ts
import { test, expect } from '@playwright/test';
test('Wikipedia anasayfasına gidebilir ve başlığını kontrol edebilir', async ({ page }) => {
// Wikipedia anasayfasına git
await page.goto('https://www.wikipedia.org/');
// Sayfa başlığının 'Wikipedia' içerdiğini doğrula
await expect(page).toHaveTitle(/Wikipedia/);
// Ekran görüntüsü al (isteğe bağlı)
await page.screenshot({ path: 'wikipedia_homepage.png' });
});
```
### Örnek 2: Form Doldurma ve Gönderim
**Problem:** Bir web formundaki input alanlarını doldurmak ve formu gönderdikten sonra sonucunu doğrulamak.
**Çözüm:** `page.locator().fill()` ile input alanları doldurulur, `page.locator().click()` ile buton tıklanır ve yeni sayfanın içeriği doğrulanır.
```typescript
// tests/form-submission.spec.ts
import { test, expect } from '@playwright/test';
test('Örnek bir formu doldurup gönderebilir', async ({ page }) => {
await page.goto('https://www.selenium.dev/selenium-ide/docs/en/introduction/tutorial/'); // Örnek form içeren bir sayfa
// 'Name' alanını bul ve doldur
await page.locator('#name').fill('Burak Balkı');
// 'Email' alanını bul ve doldur
await page.locator('#email').fill('burak.balki@example.com');
// 'Message' alanını bul ve doldur
await page.locator('#message').fill('Playwright 2026 ile form testi yapıyorum.');
// 'Submit' butonuna tıkla
await page.locator('button[type="submit"]').click();
// Başarılı gönderim mesajını doğrula (örnek bir senaryo)
await expect(page.locator('.alert-success')).toHaveText('Form başarıyla gönderildi!');
});
```
> **Pro Tip:** Playwright'ın `locator` stratejisi, elementleri CSS, XPath, metin veya rol gibi birçok farklı yolla bulmanızı sağlar. En güvenilir yöntemler genellikle `data-testid` gibi özel test ID'leri veya semantik HTML elementleridir.
### Örnek 3: Butona Tıklama ve Element Görünürlüğünü Kontrol Etme
**Problem:** Bir butona tıklandıktan sonra gizli bir elementin görünür hale geldiğini doğrulamak.
**Çözüm:** `page.locator().click()` ile tıklama yapılır ve `expect().toBeVisible()` ile elementin görünürlüğü kontrol edilir.
```typescript
// tests/visibility.spec.ts
import { test, expect } from '@playwright/test';
test('Gizli bir elementi görünür hale getiren butona tıklayabilir', async ({ page }) => {
await page.goto('https://playwright.dev/docs/locators'); // Örnek bir sayfa
// Bir butona tıkla (örneğin, 'Show more' butonu)
const showMoreButton = page.locator('text=Show more');
await showMoreButton.click();
// Tıkladıktan sonra görünür hale gelen bir elementi doğrula
const hiddenContent = page.locator('text=Additional content appeared after click');
await expect(hiddenContent).toBeVisible();
});
```
### Örnek 4: Ekran Görüntüsü Alma ve Video Kaydı
**Problem:** Test adımlarının görsel kanıtlarını toplamak veya başarısız testlerin videosunu kaydetmek.
**Çözüm:** `page.screenshot()` ve `browser.newContext({ recordVideo: ... })` seçenekleri kullanılır.
```typescript
// tests/screenshots-videos.spec.ts
import { test, expect } from '@playwright/test';
test('Ekran görüntüsü alabilir ve başarısız testin videosunu kaydedebilir', async ({ page }) => {
await page.goto('https://playwright.dev');
// Sayfanın tamamının ekran görüntüsünü al
await page.screenshot({ path: 'full_page.png', fullPage: true });
// Belirli bir elementin ekran görüntüsünü al
const header = page.locator('.navbar');
await header.screenshot({ path: 'header_element.png' });
// Hata durumunda video kaydı otomatik olarak Playwright config'den ayarlanır.
// playwright.config.ts dosyasında:
// use: { video: 'on-first-retry' }
// Bilerek başarısız bir assertion yapalım, böylece video kaydedildiğini görelim
// await expect(page).toHaveTitle('Yanlış Başlık'); // Bu satırı yorumdan çıkarırsanız test başarısız olur ve video kaydedilir
});
```
### Örnek 5: Otomatik Beklemeler (Auto-Wait) ve Özel Beklemeler
**Problem:** Web sayfalarındaki asenkron yüklemeler nedeniyle elementlerin etkileşime hazır olmaması.
**Çözüm:** Playwright'ın auto-wait mekanizması çoğu durumu otomatik yönetir. Ancak özel durumlar için `page.waitForSelector()`, `page.waitForFunction()` gibi metodlar kullanılabilir.
```typescript
// tests/waits.spec.ts
import { test, expect } from '@playwright/test';
test('Playwright\'ın otomatik beklemelerini ve özel beklemeleri kullanabilir', async ({ page }) => {
await page.goto('https://playwright.dev/docs/api/class-page#page-wait-for-selector');
// Playwright, bu elementi tıklamadan önce otomatik olarak görünür olmasını bekler
await page.locator('text=Configuration').click();
// Bazen belirli bir elementin DOM'dan tamamen kaldırılmasını beklemek gerekebilir
await page.locator('text=Some loading spinner').waitFor({ state: 'hidden' });
// Veya belirli bir koşulun gerçekleşmesini beklemek için JavaScript fonksiyonu kullanabiliriz
await page.waitForFunction(() => {
const element = document.querySelector('#dynamic-content');
return element && element.textContent?.includes('Content Loaded');
});
await expect(page.locator('#dynamic-content')).toHaveText('Content Loaded');
});
```
Bu örnekler, Playwright ile web uygulamalarınızı test etmeye başlamanız için güçlü bir temel sunmaktadır. Unutmayın, Playwright'ın API'si oldukça zengindir ve bu örnekler sadece yüzeyini çizmektedir. Production ortamında testlerinizi yazarken bu temel prensipleri kullanarak karmaşık senaryoları dahi otomatikleştirebilirsiniz.
## İleri Seviye Teknikler
Playwright'ın temel kullanımlarına hakim olduktan sonra, test suitenizi daha ölçeklenebilir, sürdürülebilir ve güçlü hale getirmek için ileri seviye tekniklere geçiş yapabilirsiniz. 2026'da büyük projelerde Playwright kullanırken bu teknikler vazgeçilmezdir.
### 1. Page Object Model (POM)
**Problem:** Büyük test suitelerinde, UI elementlerinin selector'larının tekrar etmesi ve UI değişikliklerinde testlerin kolayca kırılması.
**Çözüm:** Page Object Model, her bir sayfa veya sayfa bileşeni için ayrı bir sınıf oluşturarak UI elementlerini ve onlarla etkileşimi kapsüller. Bu, test kodunu daha okunabilir, sürdürülebilir ve yeniden kullanılabilir hale getirir.
```typescript
// page-objects/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('#username');
this.passwordInput = page.locator('#password');
this.loginButton = page.locator('button[type="submit"]');
this.errorMessage = page.locator('.error-message');
}
async navigate() {
await this.page.goto('https://example.com/login');
}
async login(username: string, password: string) {
await this.usernameInput.fill(username);
await this.passwordInput.fill(password);
await this.loginButton.click();
}
async getErrorMessage() {
return await this.errorMessage.textContent();
}
}
```
```typescript
// tests/login.spec.ts (POM ile)
import { test, expect } from '@playwright/test';
import { LoginPage } from '../page-objects/LoginPage';
test.describe('Login Functionality 2026', () => {
test('Başarılı giriş yapabilir', async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.navigate();
await loginPage.login('testuser', 'password123');
await expect(page).toHaveURL(/dashboard/);
});
test('Yanlış şifre ile giriş yapamaz', async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.navigate();
await loginPage.login('testuser', 'wrongpassword');
await expect(loginPage.errorMessage).toBeVisible();
await expect(loginPage.getErrorMessage()).resolves.toContain('Hatalı kullanıcı adı veya şifre');
});
});
```
### 2. API Testleri ile Test Verisi Yönetimi
**Problem:** UI testlerinden önce karmaşık test verileri oluşturmak veya uygulamanın backend API'sini test etmek.
**Çözüm:** Playwright'ın `request` bağlamı ile doğrudan HTTP/HTTPS istekleri yaparak test verilerini hazırlayabilir veya API'leri test edebilirsiniz. Bu, UI testlerinin daha hızlı ve izole olmasını sağlar.
```typescript
// tests/api-setup.spec.ts
import { test, expect } from '@playwright/test';
test.describe('API Test Verisi Oluşturma 2026', () => {
test('API üzerinden yeni bir kullanıcı oluşturabilir', async ({ request }) => {
const response = await request.post('https://api.example.com/users', {
data: {
name: 'Yeni Kullanıcı',
email: 'yeni.kullanici@example.com',
password: 'securepassword'
}
});
expect(response.status()).toBe(201);
const user = await response.json();
expect(user.email).toBe('yeni.kullanici@example.com');
// Oluşturulan kullanıcı ID'sini bir sonraki UI testinde kullanmak üzere sakla
test.info().annotations.push({ type: 'user-id', description: user.id });
});
});
// UI testinde bu kullanıcıyı kullanma (örnek)
// test('Oluşturulan kullanıcı ile giriş yapabilir', async ({ page, request }) => {
// const userId = test.info().annotations.find(a => a.type === 'user-id')?.description;
// // ... UI test adımları
// });
```
### 3. Görsel Regresyon Testleri
**Problem:** Uygulamanın UI'sında beklenmeyen görsel değişiklikleri tespit etmek.
**Çözüm:** Playwright'ın `toMatchSnapshot()` fonksiyonu ile ekran görüntülerini karşılaştırarak görsel regresyon testleri yapabilirsiniz.
```typescript
// tests/visual-regression.spec.ts
import { test, expect } from '@playwright/test';
test('Anasayfa görsel olarak değişmediğini doğrular [2026]', async ({ page }) => {
await page.goto('https://playwright.dev');
// İlk çalıştırmada bir snapshot oluşturur. Sonraki çalıştırmalarda bu snapshot ile karşılaştırır.
await expect(page).toHaveScreenshot('homepage.png', { maxDiffPixelRatio: 0.01 });
// Belirli bir element için görsel snapshot
const header = page.locator('.navbar');
await expect(header).toHaveScreenshot('header.png');
});
```
### 4. Bileşen Testleri (Component Testing)
**Problem:** Frontend bileşenlerini izole bir şekilde, hızlıca test etmek.
**Çözüm:** Playwright, React, Vue, Angular gibi framework'ler için bileşen testleri yapılmasına olanak tanır. Bu, uçtan uca testlerden daha hızlı geri bildirim sağlar ve geliştirme döngüsünü hızlandırır. 2026 itibarıyla Playwright'ın bileşen testleri için entegrasyonları oldukça olgunlaşmıştır.
```typescript
// component-tests/Button.spec.tsx (React örneği)
import { test, expect } from '@playwright/experimental-ct-react';
import Button from '../src/components/Button'; // Kendi Button bileşeniniz
test('Button bileşeni doğru metni gösterir ve tıklanabilir', async ({ mount }) => {
let clicked = false;
const component = await mount();
await expect(component).toContainText('Tıkla Beni');
await component.click();
expect(clicked).toBe(true);
});
```
Bu ileri seviye teknikler, Playwright ile daha sağlam, bakımı kolay ve verimli test suiteleri oluşturmanıza yardımcı olacaktır. Ekibimizde, bu teknikleri kullanarak test süreçlerimizi daha da optimize ettik ve hata yakalama kapasitemizi artırdık. Özellikle POM ve API test entegrasyonu, büyük ölçekli uygulamalarda test yazımını çok daha yönetilebilir hale getiriyor.
## Best Practices & Anti-Patterns
Playwright ile test yazarken, temiz, sürdürülebilir ve güvenilir testler oluşturmak için belirli en iyi uygulamaları takip etmek ve kaçınılması gereken anti-pattern'ları bilmek kritik öneme sahiptir. 2026'da dahi bu prensipler geçerliliğini korumaktadır.
### ✅ Best Practices (En İyi Uygulamalar)
1. **Anlamlı Selector'lar Kullanın:**
* **NEDEN:** Testlerinizi UI değişikliklerine karşı daha dirençli hale getirir. `data-testid`, `data-qa`, `role` veya açıkça görünen metin gibi selector'ları tercih edin.
* **ÖRNEK:**
```typescript
// ✅ Doğru
await page.locator('data-testid=login-button').click();
await page.getByRole('button', { name: 'Giriş Yap' }).click();
await page.getByText('Hoş Geldiniz').isVisible();
// ❌ Yanlış
await page.locator('div > div:nth-child(2) > button.btn-primary').click();
```
2. **Page Object Model (POM) Kullanın:**
* **NEDEN:** Test kodunuzu daha modüler, okunabilir ve bakımı kolay hale getirir. UI elementlerini ve etkileşimlerini sayfa bazında kapsüller.
* **ÖRNEK:** (Yukarıdaki ileri seviye teknikler bölümündeki örneğe bakınız)
3. **Testleri İzole Edin:**
* **NEDEN:** Her testin birbirinden bağımsız çalışmasını sağlayın. Bir testin çıktısı diğerini etkilememelidir. `test.beforeEach()` ve `test.afterEach()` hook'larını kullanarak test öncesi ve sonrası temizlik yapın.
* **ÖRNEK:**
```typescript
test.beforeEach(async ({ page }) => {
await page.goto('https://example.com/login');
});
test.afterEach(async ({ page }) => {
await page.evaluate(() => localStorage.clear()); // LocalStorage'ı temizle
});
```
4. **API Testleri ile Test Verisi Yönetimi Yapın:**
* **NEDEN:** UI üzerinden karmaşık test verileri oluşturmak yerine, backend API'lerini kullanarak hızlı ve güvenilir bir şekilde test verisi hazırlayın. Bu, testlerinizi hızlandırır ve 'flaky' olma riskini azaltır.
* **ÖRNEK:** (Yukarıdaki ileri seviye teknikler bölümündeki örneğe bakınız)
5. **Otomatik Beklemelere Güvenin:**
* **NEDEN:** Playwright'ın yerleşik otomatik bekleme mekanizması çoğu zaman yeterlidir. Manuel `page.waitForTimeout()` kullanmaktan kaçının, çünkü bu testleri yavaşlatır ve kararsız hale getirir.
* **ÖRNEK:**
```typescript
// ✅ Doğru
await page.locator('button').click(); // Playwright tıklamadan önce butonun etkileşime hazır olmasını bekler.
// ❌ Yanlış
await page.waitForTimeout(2000); // Gerekmedikçe kullanmayın
```
6. **CI/CD Ortamına Entegre Edin:**
* **NEDEN:** Testlerinizi sürekli entegrasyon/sürekli dağıtım (CI/CD) pipeline'ınızın bir parçası haline getirerek regresyonları erken yakalayın. Headless modda çalıştırmayı tercih edin.
* **ÖRNEK:** `.github/workflows/playwright.yml` dosyası oluşturarak GitHub Actions ile entegrasyon.
7. **Test Raporlamayı Kullanın:**
* **NEDEN:** Test sonuçlarını kolayca analiz etmek ve başarısız testlerin nedenlerini bulmak için HTML reporter gibi araçları kullanın. Trace Viewer, bu konuda paha biçilmezdir.
* **ÖRNEK:** `playwright.config.ts` içinde `reporter: 'html'` ayarı.
8. **Hata Ayıklama Araçlarını Kullanın:**
* **NEDEN:** Test yazımını ve hata ayıklamayı hızlandırır. Playwright Inspector (`npx playwright test --debug`) ve Trace Viewer (`npx playwright show-trace trace.zip`) en güçlü araçlardır.
### ❌ Anti-Patterns (Kaçınılması Gerekenler)
1. **Sihirli Sayılar ve Sabit Beklemeler (`waitForTimeout`):**
* **NEDEN:** Testleri yavaşlatır, kararsız hale getirir ve gereksiz zaman kaybına yol açar. Playwright'ın otomatik beklemeleri veya koşullu beklemeleri tercih edin.
2. **Zayıf Selector'lar:**
* **NEDEN:** `nth-child`, `class` isimleri gibi dinamik veya değişebilir selector'lar UI değişikliklerinde testlerinizi kolayca kırar. Bu, test bakım maliyetini artırır.
3. **Testleri Birbirine Bağımlı Hale Getirme:**
* **NEDEN:** Bir testin başarısız olması diğer testleri de etkileyebilir, hata ayıklamayı zorlaştırır ve test suitenizin güvenilirliğini düşürür.
4. **Test.only Kullanımını Production'a Taşımak:**
* **NEDEN:** `test.only` veya `describe.only` sadece belirli bir testi veya test bloğunu çalıştırmak içindir. Yanlışlıkla CI/CD'ye push edildiğinde, diğer testlerin atlanmasına ve potansiyel regresyonların gözden kaçmasına neden olabilir.
5. **Hardcoded URL'ler ve Kimlik Bilgileri:**
* **NEDEN:** Farklı ortamlar (development, staging, production) arasında testleri çalıştırmayı zorlaştırır ve güvenlik riski oluşturur. Ortam değişkenleri veya yapılandırma dosyaları kullanın.
Bu best practice'ler ve anti-pattern'lar, 2026'da Playwright ile yazacağınız testlerin kalitesini doğrudan etkileyecektir. Ekibimizde bu kuralları uygulayarak, test otomasyon süreçlerimizde önemli bir olgunluk seviyesine ulaştık.
## Yaygın Hatalar ve Çözümleri
Playwright ile çalışırken karşılaşabileceğiniz bazı yaygın hatalar ve bu hataları nasıl gidereceğinize dair pratik çözümler aşağıda sıralanmıştır. Bu bilgiler, 2026'da da test geliştirme sürecinizde size zaman kazandıracaktır.
### 1. Element Bulunamadı (`TimeoutError: Waiting for selector ... failed: timeout`)
* **Problem:** Playwright, belirtilen selector ile bir elementi belirli bir süre (varsayılan 30 saniye) içinde bulamıyor veya etkileşime hazır hale getiremiyor.
* **Sebep:** Yanlış selector, elementin henüz DOM'a yüklenmemiş olması, elementin gizli olması veya sayfanın yavaş yüklenmesi.
* **Çözüm:**
* **Selector'ı Kontrol Edin:** Playwright Inspector (`npx playwright test --debug`) kullanarak doğru selector'ı doğrulayın. `page.locator()` metodunun farklı stratejilerini deneyin (örneğin, `getByRole`, `getByText`, `getByTestId`).
* **Bekleme Süresini Artırın:** Elementin yüklenmesi uzun sürüyorsa, `locator.waitFor()` veya `test.setTimeout()` kullanarak bekleme süresini artırabilirsiniz. Ancak bu, bir anti-pattern olabileceğinden dikkatli kullanılmalıdır.
* **Görünürlük Kontrolü:** Elementin gerçekten görünür veya etkileşime hazır olduğundan emin olun. Playwright'ın auto-wait özelliği çoğu zaman yeterlidir, ancak nadiren `locator.waitFor({ state: 'visible' })` gibi manuel beklemeler gerekebilir.
```typescript
// Yanlış selector veya yavaş yükleme durumunda
await page.locator('#yanlis-id-veya-gec-yuklenen-element').click(); // TimeoutError verir
// Çözüm:
// 1. Doğru selector'ı bulun
await page.locator('data-testid=dogru-buton').click();
// 2. Gerekirse bekleme süresini artırın (genel test timeout için playwright.config.ts)
// veya element bazında:
await page.locator('#yavas-yuklenen-element').waitFor({ state: 'visible', timeout: 60000 });
await page.locator('#yavas-yuklenen-element').click();