Playwright Test Hatalari ve Cozumleri: 6 Yaygin Hata ve Fix Rehberi (2026)

Hata Mesajı / Error Message:

Error: locator.click: Timeout 30000ms exceeded.
Call log:
  - waiting for locator('button.submit')
  - locator resolved to 0 elements

✅ Çözümler / Solutions:

// ❌ Yanlış - Sabit bekleme / Wrong - Fixed wait
await page.waitForTimeout(5000);
await page.click('button.submit');

// ✅ Doğru - Element görünene kadar bekle / Wait for element
await page.locator('button.submit').waitFor({ state: 'visible' });
await page.locator('button.submit').click();

// ✅ Alternatif - Timeout süresini artır / Increase timeout
await page.locator('button.submit').click({ timeout: 60000 });

// ✅ En iyi - playwright.config.ts'de global ayar
// Best - Global setting in playwright.config.ts
export default defineConfig({
  timeout: 60000,
  expect: {
    timeout: 10000,
  },
});

Hata Mesajı / Error Message:

Error: locator.click: Error: strict mode violation:
locator('button') resolved to 3 elements:
  1) <button class="btn-primary">Kaydet</button>
  2) <button class="btn-secondary">İptal</button>
  3) <button class="btn-danger">Sil</button>

✅ Çözümler / Solutions:

// ❌ Yanlış - Çok genel selector / Wrong - Too generic
await page.locator('button').click();

// ✅ Doğru - Spesifik selector / Correct - Specific selector
await page.locator('button.btn-primary').click();

// ✅ Doğru - Metin ile bulma / Find by text
await page.getByRole('button', { name: 'Kaydet' }).click();

// ✅ Doğru - Test ID kullanma / Use test ID
await page.getByTestId('save-button').click();

// ✅ nth() ile spesifik element seç / Select specific with nth()
await page.locator('button').nth(0).click();

// ✅ first() veya last() kullan / Use first() or last()
await page.locator('button').first().click();

✅ Çözüm 1: Retry Mekanizması (Retry Mechanism):

// playwright.config.ts
export default defineConfig({
  retries: process.env.CI ? 2 : 0,  // CI'da 2 retry
  workers: process.env.CI ? 1 : undefined,
});

✅ Çözüm 2: Network İsteklerini Bekle (Wait for Network):

// API yanıtını bekle / Wait for API response
await Promise.all([
  page.waitForResponse(resp =>
    resp.url().includes('/api/data') && resp.status() === 200
  ),
  page.click('button.load-data'),
]);

✅ Çözüm 3: Web-First Assertions Kullan:

// ❌ Yanlış - Anlık kontrol / Wrong - Instant check
const text = await page.locator('.result').textContent();
expect(text).toBe('Başarılı');

// ✅ Doğru - Otomatik bekleme / Correct - Auto-waiting
await expect(page.locator('.result')).toHaveText('Başarılı');

Hata Mesajı / Error Message:

Error: locator.click: Timeout 30000ms exceeded.
Call log:
  - waiting for locator('#dynamic-content')
  - locator resolved to 0 elements

✅ Çözümler / Solutions:

// Playwright Inspector ile debug et / Debug with Playwright Inspector
npx playwright test --debug

// Veya UI modunda çalıştır / Or run in UI mode
npx playwright test --ui

// Trace viewer ile analiz et / Analyze with trace viewer
npx playwright test --trace on
npx playwright show-trace trace.zip

Hata Mesajı / Error Message:

Error: browserType.launch: Executable doesn't exist at
/home/user/.cache/ms-playwright/chromium-1140/chrome-linux/chrome

✅ Çözümler / Solutions:

# Tarayıcıları yükle / Install browsers
npx playwright install

# Sistem bağımlılıklarıyla birlikte / With system dependencies
npx playwright install --with-deps

# Sadece belirli tarayıcı / Only specific browser
npx playwright install chromium

# Docker için / For Docker
FROM mcr.microsoft.com/playwright:v1.50.0-jammy
WORKDIR /app
COPY . .
RUN npm ci
CMD ["npx", "playwright", "test"]

Hata Mesajları / Error Messages:

Error: page.goto: net::ERR_CONNECTION_REFUSED
Error: page.goto: Navigation timeout of 30000ms exceeded
Error: page.goto: net::ERR_NAME_NOT_RESOLVED

✅ Çözümler / Solutions:

// Sunucunun hazır olmasını bekle / Wait for server to be ready
// playwright.config.ts
export default defineConfig({
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120000,
  },
});

// Navigation için doğru bekleme / Correct wait for navigation
await page.goto('http://localhost:3000', {
  waitUntil: 'networkidle',
  timeout: 60000,
});

// Network intercept ile mock / Mock with network intercept
await page.route('**/api/users', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify([{ id: 1, name: 'Test' }]),
  });
});

// pages/login.page.ts
export class LoginPage {
  constructor(private page: Page) {}

  async login(email: string, password: string) {
    await this.page.getByLabel('E-posta').fill(email);
    await this.page.getByLabel('Şifre').fill(password);
    await this.page.getByRole('button', { name: 'Giriş Yap' }).click();
  }
}

// tests/login.spec.ts
test('kullanıcı giriş yapabilmeli', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('test@alestaweb.com', 'sifre123');
  await expect(page).toHaveURL('/dashboard');
});