Playwright Mimari Tasarımı: AI ve Modern Test Otomasyonu Rehberi

## Playwright Mimari Tasarımı ve Temel Bileşenler **Playwright**, Microsoft tarafından geliştirilen, modern web uygulamaları için uçtan uca (E2E) test otomasyonu sağlayan açık kaynaklı bir kütüphanedir. Geleneksel Selenium tabanlı araçların aksine, Playwright doğrudan tarayıcı motorları (Chromium, WebKit, Firefox) ile iletişim kurar. Bu iletişim, **WebSocket** protokolü üzerinden tek bir bağlantı üzerinden gerçekleşir, bu da testlerin daha hızlı ve daha az hata payı ile çalışmasını sağlar. Playwright'ın mimarisi, **Client-Server** yapısına dayanır. Test kodunuz (Client), Playwright Server ile konuşur ve bu server tarayıcı sürücülerini kontrol eder. En büyük farkı, her test için yeni bir tarayıcı örneği başlatmak yerine, **BrowserContext** kavramını kullanarak izole edilmiş oturumlar oluşturmasıdır. ### Mimari Bileşen Tablosu | Bileşen | Görevi | Avantajı | | :--- | :--- | :--- | | **Browser** | Tarayıcı motorunun bir örneği. | Düşük kaynak tüketimi. | | **BrowserContext** | İzole edilmiş kullanıcı oturumu. | Paralel test yürütme hızı. | | **Page** | Tarayıcı içindeki tek bir sekme. | Çoklu sekme desteği. | | **Selectors** | DOM öğelerini bulma mekanizması. | Auto-waiting (Otomatik bekleme). | ## Playwright Kurulumu ve Proje Yapılandırması Playwright mimarisini projenize dahil etmek oldukça basittir ancak kurumsal bir yapıda **TypeScript** kullanımı önerilir. Bu, tip güvenliği ve daha iyi IDE desteği sağlar. ```bash npm init playwright@latest ``` Kurulum sırasında projenize `playwright.config.ts` dosyası eklenir. Bu dosya, mimarinin kalbidir ve global ayarları barındırır. ```typescript import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: 'html', use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry', screenshot: 'only-on-failure', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, ], }); ``` ## Modern Test Mimarisinde BrowserContext ve Sayfa Yönetimi Playwright mimarisinin en güçlü yönü **BrowserContext** yapısıdır. Bir tarayıcıyı bir kez başlatıp, içinde yüzlerce izole bağlam oluşturabilirsiniz. Bu, her testin temiz bir çerez ve yerel depolama (local storage) ile başlamasını sağlar. ```typescript import { test, expect } from '@playwright/test'; test('Çoklu Bağlam ve Sayfa Yönetimi', async ({ browser }) => { // Yeni bir izole bağlam oluşturulur const context = await browser.newContext(); const page1 = await context.newPage(); const page2 = await context.newPage(); await page1.goto('https://example.com'); await page2.goto('https://google.com'); // Bağlamlar arası izolasyon kontrolü expect(page1.url()).not.toBe(page2.url()); await context.close(); }); ``` ## AI ve Makine Öğrenmesi ile Akıllı Seçici (Locator) Stratejileri **AI & Machine Learning** kategorisinde Playwright, özellikle görsel tanıma ve semantik seçicilerle öne çıkar. AI destekli test süreçlerinde, öğelerin CSS veya XPath yerine rollerine (Role) göre seçilmesi, testlerin kırılganlığını azaltır. Playwright'ın `getByRole` ve `getByText` gibi metodları, erişilebilirlik ağacını (Accessibility Tree) kullanır. ```typescript // AI dostu semantik seçici örneği await page.getByRole('button', { name: 'Giriş Yap' }).click(); await page.getByLabel('E-posta adresi').fill('admin@example.com'); ``` > **Not:** Modern mimarilerde AI tabanlı self-healing (kendi kendini iyileştiren) testler için Playwright'ın Trace Viewer verileri ML modellerini eğitmek amacıyla kullanılabilir. ## Playwright Test Runner: Paralel Yürütme ve İzolasyon Playwright, testleri varsayılan olarak paralel çalıştırır. Her test dosyası kendi **Worker Process** (işçi süreci) içinde çalışır. Bu mimari, test süresini dramatik şekilde azaltır. ```typescript import { test } from '@playwright/test'; // Bu testler paralel olarak farklı worker'larda çalışacaktır test.describe('Paralel Mimari Testleri', () => { test('Test A', async ({ page }) => { await page.goto('/'); }); test('Test B', async ({ page }) => { await page.goto('/dashboard'); }); }); ``` ## Gelişmiş Ağ Manipülasyonu ve API Testing Entegrasyonu Playwright sadece bir UI test aracı değildir; aynı zamanda güçlü bir ağ izleme ve manipülasyon aracıdır. **Mocking** ve **Intercepting** özellikleri, AI modelleriyle beslenen veri setlerini test etmek için idealdir. ```typescript // API Yanıtını Mocklama await page.route('**/api/v1/products', async route => { const json = [{ id: 1, name: 'AI Destekli Robot' }]; await route.fulfill({ json }); }); await page.goto('/products'); ``` ## CI/CD Süreçlerinde Playwright Mimari Entegrasyonu Kurumsal mimarilerde Playwright, GitHub Actions, GitLab CI veya Jenkins ile tam uyumlu çalışır. Docker konteynerleri içinde çalıştırılması, ortam bağımlılıklarını ortadan kaldırır. ```yaml # Örnek GitHub Action Yapılandırması jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - name: Install dependencies run: npm ci - name: Install Playwright Browsers run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test ``` ## Görsel Regresyon Testleri ve AI Destekli Karşılaştırmalar Playwright, pikselleri karşılaştırmanın ötesine geçerek ekran görüntülerini yönetebilir. AI tabanlı görsel test araçlarıyla (Applitools, Percy vb.) entegre edilerek, UI üzerindeki anormallikler tespit edilebilir. ```typescript import { test, expect } from '@playwright/test'; test('Görsel Karşılaştırma Testi', async ({ page }) => { await page.goto('https://example.com'); // İlk çalıştırmada snapshot oluşturur, sonrakilerde karşılaştırır await expect(page).toHaveScreenshot('homepage.png'); }); ``` ## Playwright Best Practices: Sürdürülebilir Test Mimarisi 1. **Page Object Model (POM) Kullanımı:** Kodun tekrar kullanılabilirliğini artırır. 2. **Global Setup/Teardown:** Kimlik doğrulama gibi işlemleri bir kez yapıp tüm testlerde kullanın. 3. **Soft Assertions:** Testin başarısız olsa bile devam etmesini istediğiniz durumlar için kullanın. ```typescript // Page Object Model Örneği export class LoginPage { constructor(private page: Page) {} async navigate() { await this.page.goto('/login'); } async login(user: string, pass: string) { await this.page.fill('#user', user); await this.page.fill('#pass', pass); await this.page.click('text=Submit'); } } ``` ## Sık Yapılan Mimari Hatalar ve Çözüm Yolları - **Hard-coded Waits:** `page.waitForTimeout(5000)` kullanımı en büyük hatadır. Bunun yerine Playwright'ın otomatik bekleme (auto-waiting) özelliğini veya dinamik seçicileri kullanın. - **Birbirine Bağlı Testler:** Her test tamamen bağımsız olmalıdır. Bir testin çıktısı diğerinin girdisi olmamalıdır. - **Seçici Kırılganlığı:** Çok uzun XPath'ler yerine `data-testid` özniteliklerini tercih edin. ```typescript // Yanlış Kullanım await page.waitForTimeout(3000); // Doğru Kullanım (Mimari Yaklaşım) await page.locator('.dynamic-element').waitFor({ state: 'visible' }); ``` ## Performans Optimizasyonu ve Kaynak Yönetimi Playwright mimarisinde performansı artırmak için gereksiz kaynakların (resimler, fontlar) yüklenmesini engelleyebilirsiniz. Özellikle AI veri kazıma (scraping) işlemlerinde bu kritik öneme sahiptir. ```typescript await page.route('**/*.{png,jpg,jpeg}', route => route.abort()); ``` ## Sık Sorulan Sorular (FAQ) 1. **Playwright neden Selenium'dan daha hızlı?** Playwright, HTTP üzerinden değil, WebSocket üzerinden asenkron olarak tarayıcıyla iletişim kurar ve BrowserContext yapısı sayesinde paralel çalışmada çok daha verimlidir. 2. **Playwright ile mobil uygulama testi yapılabilir mi?** Doğrudan native mobil uygulamalar (APK/IPA) test edilemez ancak mobil tarayıcı emülasyonu (Viewport, User Agent) mükemmel şekilde yapılır. 3. **Testlerde kimlik doğrulama (Auth) her seferinde yapılmalı mı?** Hayır. `storageState` özelliği ile bir kez giriş yapıp, oturum bilgilerini JSON dosyasına kaydederek diğer testlerde bu dosyayı yükleyebilirsiniz. 4. **Playwright hangi dilleri destekliyor?** TypeScript, JavaScript, Python, Java ve .NET (C#) dillerini resmi olarak destekler. 5. **Shadow DOM öğelerine erişebilir mi?** Evet, Playwright'ın en büyük avantajlarından biri Shadow DOM içindeki öğelere ek bir konfigürasyon yapmadan doğrudan erişebilmesidir. ## Özet ve Sonuç Playwright, modern web mimarilerine uyum sağlamak üzere tasarlanmış, hız ve güvenilirlik odaklı bir otomasyon aracıdır. **AI entegrasyonu**, **paralel yürütme** ve **izole bağlam yapısı** ile kurumsal projelerde test süreçlerini optimize etmek için en iyi tercihlerden biridir. Doğru mimari kararlar ve best practice uygulamalarıyla, bakım maliyeti düşük ve yüksek kapsayıcılığa sahip bir test suite oluşturmak mümkündür.