Gerçek Hayat QA & DOM

Gerçek Hayat QA & DOM: querySelector — DOM'da Element Seçimi Gerçek otomasyon projelerinde (Playwright veya Cypress), asenkron API çağrılarını ve sayfa yüklenmelerini beklemek kr

querySelector — DOM'da Element Seçimi

Gerçek otomasyon projelerinde (Playwright veya Cypress), asenkron API çağrılarını ve sayfa yüklenmelerini beklemek kritik önem taşır. `await page.click('button')` yazdığımızda, arkadaki asenkron sözün (Promise) çözülmesini bekleriz. Bunu bir restoranda sipariş vermek gibi düşün: `Thread.sleep(5000)` yazmak, garsonu çağırıp 'yemeğim 5 dakikada gelir herhalde' deyip tam 5 dakika sonra kör bir şekilde masaya uzanmaktır — erken gelirse soğur, geç gelirse elin boşa gider. `await` ise garsonun tabağı masaya bıraktığı ANI beklemektir: ne bir saniye erken, ne bir saniye geç. Peki madem ikisi de bekliyor, sabit bir süre beklemek neden bu kadar kötü? Çünkü sabit süre iki hatayı aynı anda üretir: makine yavaşken YETERSİZ kalır (flaky test), hızlıyken GEREKSİZ uzundur (200 testlik suite'te birikip yarım saate mal olur). Java'da `Thread.sleep()` yerine `WebDriverWait`/`ExplicitWait` kullanmanı söyleyen kural burada da aynıdır; fark şu ki JavaScript'te bekleme dile gömülüdür — `await` yazmayı unuttuğunda kod hata vermez, sadece Promise nesnesinin kendisiyle çalışmaya devam eder ve assertion'ın sessizce geçer. QA açısından flaky test şikâyetlerinin büyük kısmı tam olarak bu iki satırın arasındadır.

Playwright ile Asenkron Test Yazımı

import { test, expect } from '@playwright/test'; test('Asenkron veri yükleme testi', async ({ page }) => { // 1. Web sitesine git (Promise döner, await ile yüklenmesini bekle) await page.goto('https://example.com'); // 2. Butona tıkla (Playwright arka planda otomatik olarak elementin hazır olmasını bekler) await page.click('#load-data-btn'); // 3. API'den veri dönüp ekranda belirene kadar bekle const welcomeText = page.locator('.welcome-msg'); await expect(welcomeText).toBeVisible({ timeout: 5000 }); });

Micro Lab: JavaScript QA kod yazma

TODO satirini beklenen cozumdeki kritik satirla degistir. Bu gercek runtime degil; amac dogru yapinin yazilmasini kontrollu olarak pekistirmek.

await Olmadan Bu Test Neden Rastgele Başarısız Olurdu?

await page.goto(...) çalıştığında…

await page.goto(...) çalıştığında JavaScript, sayfa TAMAMEN yüklenip Promise ÇÖZÜLENE kadar bir SONRAKİ satıra GEÇMEZ — await olmasaydı kod hemen devam eder, sayfa henüz açılmamış olabilirdi.

await page.click(...) çağrısı ÖNCE…

await page.click(...) çağrısı ÖNCE elementin actionability kontrolünü (görünür/enabled/stable) bekler, SONRA tıklar — bu bekleme Playwright'ın içinde OTOMATİK gerçekleşir, sen ayrıca bir "sleep" yazmazsın.

const welcomeText = page.locator(...) satırı…

const welcomeText = page.locator(...) satırı HENÜZ hiçbir DOM sorgusu ÇALIŞTIRMAZ — locator'lar "lazy"dir, gerçek arama await expect(...) çağrılana kadar ERTELENİR.

await expect(welcomeText).toBeVisible({ timeout: 5000 })…