E2E testing 2026: Playwright, Cypress, and sustainable browser automation

[Aior]

E2E test neden değerli, neden tehlikeli?​

End-to-end test gerçek tarayıcı ile kullanıcı flow'u doğrular. AIOR projelerinde kritik akışlar (kayıt, ödeme, kontrol panelinde temel işlemler) için zorunlu. Ancak yanlış uygulanan E2E test maliyet üretir: flaky, yavaş, bakımı zor.

Playwright vs Cypress — 2026 tercihi​

İki dominant E2E framework. AIOR'da Playwright tercih ediyoruz, özellikle yeni başlangıçlarda:

• Playwright — Microsoft, multi-browser (Chromium, Firefox, WebKit), parallel execution güçlü, network interception clean.
• Cypress — daha sade syntax, daha iyi developer experience (interactive debugging UI), ama browser desteği sınırlı (Chrome-based).

Cypress'ten Playwright'a göç ediyoruz çoğu projede — özellikle multi-browser test gerekiyorsa.

Page Object Pattern​

E2E test bakımı için en kritik pattern. UI selector'ları test koduna dağıtmak yerine Page Object class'larında topla:

class LoginPage {
  async login(email, password) {
    await page.fill('[data-test=email]', email);
    await page.fill('[data-test=password]', password);
    await page.click('[data-test=submit]');
  }
}

UI değiştiğinde bir yerde güncelleme yeterli. AIOR projelerinde POM standart.

Selector stratejisi​

• En iyi: `data-test`, `data-testid` öznitelikler — stable, test için tasarlanmış.
• İyi: ARIA roles (`getByRole`) — accessibility ve test bir arada.
• Kabul edilebilir: text içerik (`getByText`) — i18n problemi olabilir.
• Tehlikeli: CSS class veya XPath — refactor'da kırılır.

Flaky test'lerle savaş​

Flaky test'in en sık sebepleri: timing assumption (sabit `sleep`), async UI state, test izolasyonu eksikliği. AIOR'ın yaklaşımı:

• Hard-coded sleep yasak — `waitFor`, `expect.toBeVisible()` kullan.
• Network mock'ları kontrollü — beklenmeyen API call'lar bekletilir.
• Test data izolasyonu — her test kendi fresh data ile başlar.
• Retry strategy — geçici network sorunları için 1-2 retry kabul.
• Flaky test root cause analysis — sebepsiz fail'leri tolere etme.

Test data setup​

E2E test fresh data ile başlamalı. AIOR yaklaşımı:

• API'lar üzerinden test data üretimi (UI değil, hızlı).
• Database seed scripts ile fixture loading.
• Test sonrası cleanup zorunlu.
• Production database'e dokunmama (sandbox env zorunlu).

Parallel execution​

Playwright doğal parallel desteği — multiple worker, multiple browser. AIOR projelerinde CI'da 4-8 worker paralel çalışır. Test izolasyonu kritik (state sızıntısı paralel'de katmerli sorun).

Visual regression testing​

UI'da görsel kırılma yakalama. Playwright `expect(page).toHaveScreenshot()` API, Percy, Chromatic gibi servisler. AIOR projelerinde kritik sayfalar için visual regression standart.

Mobile testing — Maestro​

Mobil E2E için Maestro AIOR'ın tercihi — cross-platform (iOS + Android), declarative YAML syntax, Appium'dan çok daha kararlı.

CI ve raporlama​

E2E test'ler CI'da çalışırken:

• Screenshot ve video capture fail'lerde.
• Trace viewer (Playwright) — step-by-step debug.
• Allure raporu — okunaklı test sonuçları.
• Slack/email notification fail'lerde.
• Test stability metrics izleme — flaky test ratio düşük tutulmalı.

Smoke test vs full E2E​

• Smoke test — production'da deploy sonrası 5-10 dakika, kritik akışlar.
• Full E2E suite — staging'de PR öncesi, 30-60 dakika.

AIOR'da bu ayırım net; production'da uzun E2E suite çalıştırmayız.

Sonuç​

E2E test pahalı ama kritik akışlarda vazgeçilmez. Playwright + POM + data-test selector'lar + disiplinli flaky test yönetimi ile sürdürülebilir E2E suite kurulabilir. AIOR'da müşteri projelerinde standart paket olarak E2E test infrastructure teslim ediyoruz. Sizin E2E pipeline'ınızda en sık başınızı ağrıtan ne — flakiness, hız, yoksa test data hazırlığı mı?

Why E2E tests are valuable — and dangerous​

End-to-end tests verify user flows with a real browser. They're mandatory on AIOR projects for critical flows (signup, payment, core operations in admin panels). But misapplied E2E produces cost: flaky, slow, hard to maintain.

Playwright vs Cypress — 2026 pick​

Two dominant E2E frameworks. AIOR prefers Playwright, especially on new starts:

• Playwright — Microsoft, multi-browser (Chromium, Firefox, WebKit), strong parallel execution, clean network interception.
• Cypress — simpler syntax, better DX (interactive debugging UI), but limited browser support (Chrome-based).

We migrate from Cypress to Playwright on most projects — especially when multi-browser testing is needed.

Page Object Pattern​

The most critical pattern for E2E maintenance. Instead of spreading UI selectors across tests, collect them in Page Object classes:

class LoginPage {
  async login(email, password) {
    await page.fill('[data-test=email]', email);
    await page.fill('[data-test=password]', password);
    await page.click('[data-test=submit]');
  }
}

When the UI changes, one update suffices. POM is standard on AIOR projects.

Selector strategy​

• Best: `data-test`, `data-testid` attributes — stable, designed for tests.
• Good: ARIA roles (`getByRole`) — accessibility and test together.
• Acceptable: text content (`getByText`) — may break across i18n.
• Dangerous: CSS classes or XPath — break on refactor.

Fighting flaky tests​

The most common causes of flakiness: timing assumptions (fixed `sleep`), async UI state, missing test isolation. AIOR's approach:

• Hard-coded sleeps banned — use `waitFor`, `expect.toBeVisible()`.
• Controlled network mocks — unexpected API calls trigger waits.
• Test data isolation — every test starts with fresh data.
• Retry strategy — 1–2 retries acceptable for transient network issues.
• Flaky test root-cause analysis — never tolerate fails without a cause.

Test data setup​

E2E tests must start with fresh data. The AIOR approach:

• Generate test data via APIs (not UI, faster).
• Fixture loading with database seed scripts.
• Post-test cleanup mandatory.
• Never touch production DB (sandbox env mandatory).

Parallel execution​

Playwright supports parallel natively — multi-worker, multi-browser. AIOR runs 4–8 workers in parallel on CI. Test isolation is critical (state leakage multiplies the issue in parallel).

Visual regression testing​

Catches visual breakage in the UI. Playwright's `expect(page).toHaveScreenshot()` API, plus Percy, Chromatic services. AIOR projects use visual regression as standard on critical pages.

Mobile testing — Maestro​

AIOR's pick for mobile E2E is Maestro — cross-platform (iOS + Android), declarative YAML syntax, much more stable than Appium.

CI and reporting​

E2E in CI:

• Screenshot and video capture on failure.
• Trace viewer (Playwright) — step-by-step debug.
• Allure reports — readable test results.
• Slack/email notifications on failure.
• Test stability metrics tracked — flaky-test ratio kept low.

Smoke test vs full E2E​

• Smoke test — 5–10 minutes after production deploy, critical flows only.
• Full E2E suite — pre-PR on staging, 30–60 minutes.

The split is clear at AIOR; we don't run long E2E suites in production.

Bottom line​

E2E is expensive but irreplaceable for critical flows. Playwright + POM + data-test selectors + disciplined flaky-test management lets you build a sustainable E2E suite. AIOR delivers E2E test infrastructure as a standard package on customer projects. What's the biggest pain on your E2E pipeline — flakiness, speed, or test data preparation?