Oyun Yazarı Test Kılavuzu: Next.js Uygulamaları için E2E Testleri

Uçtan uca testler, birim testlerinin gözden kaçırdığı hataları (bozuk kimlik doğrulama akışları, form gönderme hataları, gezinme hataları ve tarayıcılar arası işleme sorunları) yakalar. Microsoft tarafından oluşturulan Playwright, çoklu tarayıcı desteği, otomatik bekleme yetenekleri ve güçlü hata ayıklama araçlarıyla önde gelen E2E test çerçevesi haline geldi.

Önemli Çıkarımlar

• Oyun yazarı testleri Chromium, Firefox ve WebKit'te tek bir test paketinden gerçekleştirilir
• Otomatik bekleme, öğelerin etkileşime girmeden önce eyleme geçirilebilir olmasını bekleyerek hatalı testleri ortadan kaldırır
• Daha hızlı yürütme için kimlik doğrulama durumu testler arasında paylaşılabilir
• GitHub Actions ile CI entegrasyonu, her çekme isteğinde otomatik test sağlar

---

Proje Kurulumu

Kurulum

npm init playwright@latest

Bu, Playwright'ı yükler, bir yapılandırma dosyası oluşturur ve tarayıcı ikili dosyalarını indirir. Next.js projeleri için web sunucusunu otomatik olarak başlayacak şekilde yapılandırın:

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "./e2e",
  timeout: 30000,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: "http://localhost:3000",
    screenshot: "only-on-failure",
    trace: "on-first-retry",
  },
  webServer: {
    command: "npm run dev",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    { name: "chromium", use: { browserName: "chromium" } },
    { name: "firefox", use: { browserName: "firefox" } },
    { name: "webkit", use: { browserName: "webkit" } },
  ],
});

---

İlk Testinizi Yazma

Temel Navigasyon Testi

// e2e/navigation.spec.ts
import { test, expect } from "@playwright/test";

test("home page loads and displays title", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/ECOSIRE/);
  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
});

test("navigation to services page", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("link", { name: "Services" }).click();
  await expect(page).toHaveURL(/services/);
  await expect(page.getByRole("heading", { name: /Services/ })).toBeVisible();
});

Form Gönderim Testi

test("contact form submission", async ({ page }) => {
  await page.goto("/contact");

  await page.getByLabel("Name").fill("Test User");
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByLabel("Message").fill("This is a test message");
  await page.getByRole("button", { name: "Send" }).click();

  await expect(page.getByText("Message sent")).toBeVisible();
});

---

Sayfa Nesnesi Kalıbı

Bakım kolaylığı için sayfa etkileşimlerini sayfa nesnelerinde kapsülleyin:

// e2e/pages/login.page.ts
import { Page, expect } from "@playwright/test";

export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto("/login");
  }

  async login(email: string, password: string) {
    await this.page.getByLabel("Email").fill(email);
    await this.page.getByLabel("Password").fill(password);
    await this.page.getByRole("button", { name: "Sign In" }).click();
  }

  async expectLoggedIn() {
    await expect(this.page).toHaveURL(/dashboard/);
  }

  async expectError(message: string) {
    await expect(this.page.getByText(message)).toBeVisible();
  }
}

Testlerde kullanın:

test("successful login", async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login("[email protected]", "password123");
  await loginPage.expectLoggedIn();
});

---

Kimlik Doğrulama Testi

Paylaşılan Kimlik Doğrulama Durumu

Kimlik doğrulama durumunu kaydederek her testten önce oturum açmaktan kaçının:

// e2e/auth.setup.ts
import { test as setup } from "@playwright/test";

setup("authenticate", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByLabel("Password").fill("admin-password");
  await page.getByRole("button", { name: "Sign In" }).click();
  await page.waitForURL("/dashboard");

  // Save authentication state
  await page.context().storageState({ path: ".auth/user.json" });
});

playwright.config.ts'de yapılandırın:

projects: [
  { name: "setup", testMatch: /auth\.setup\.ts/ },
  {
    name: "authenticated",
    dependencies: ["setup"],
    use: { storageState: ".auth/user.json" },
  },
],

---

Görsel Regresyon Testi

Ekran görüntüsü karşılaştırmalarıyla istenmeyen görsel değişiklikleri yakalayın:

test("home page visual regression", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveScreenshot("home-page.png", {
    maxDiffPixelRatio: 0.01,
  });
});

İlk çalıştırmada Oyun Yazarı temel ekran görüntülerini kaydeder. Sonraki çalıştırmalar temel değerlerle karşılaştırılır ve farklar eşiği aşarsa başarısız olur. Değişiklikler kasıtlı olduğunda temel çizgileri --update-snapshots ile güncelleyin.

---

API Alaycılığı

Deterministik testler için sahte API yanıtları:

test("displays products from API", async ({ page }) => {
  await page.route("/api/products", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify([
        { id: 1, name: "Product A", price: 29.99 },
        { id: 2, name: "Product B", price: 49.99 },
      ]),
    });
  });

  await page.goto("/products");
  await expect(page.getByText("Product A")).toBeVisible();
  await expect(page.getByText("Product B")).toBeVisible();
});

---

CI/CD Entegrasyonu

GitHub Eylemleri

name: E2E Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Başarısız olan test raporları, ekran görüntüleri, izler ve video kayıtları da dahil olmak üzere hata ayıklamaya yönelik yapılar olarak yüklenir.

---

Hata Ayıklama Araçları

• Oyun Yazarı Denetçisi: Adım adım yürütme için testleri --debug bayrağıyla çalıştırın
• İz Görüntüleyici: Her eylemi, ağ isteğini ve DOM anlık görüntüsünü görmek için izleri açın
• Codegen: Tarayıcı etkileşimlerini kaydetmek ve test kodu oluşturmak için npx playwright codegen komutunu çalıştırın
• VS Code Extension: Tıkla ve bul öğeleriyle testleri doğrudan VS Code'dan çalıştırın ve hata ayıklayın

---

En İyi Uygulamalar

1. Rol tabanlı seçicileri kullanın: CSS seçicileri yerine getByRole, getByLabel, getByText'i tercih edin
2. Sabit kodlu beklemelerden kaçının: page.waitForTimeout() yerine otomatik beklemeye güvenin
3. İzole testleri: Her test bağımsız olmalı ve diğer testlere bağlı olmamalıdır
4. Uygulamayı değil, kullanıcı akışlarını test edin: Kodun nasıl çalıştığına değil, kullanıcıların ne yaptığına odaklanın
5. Testleri hızlı tutun: Kurulum için API kısayollarını kullanın (test verilerini kullanıcı arayüzüyle değil, API aracılığıyla oluşturun)
6. CI'da Çalıştır: Her çekme isteğinin birleştirme öncesinde E2E testlerini geçmesi gerekir

---

Sıkça Sorulan Sorular

S: Oyun Yazarı Cypress'le nasıl karşılaştırılıyor?

Oyun Yazarı yerel olarak birden fazla tarayıcıyı (Chromium, Firefox, WebKit) desteklerken Cypress öncelikle Chromium'u hedefler. Oyun Yazarı paralel yürütme için daha hızlıdır ve birden fazla sekmeyi/pencereyi yönetir. Cypress'in biraz daha kolay bir öğrenme eğrisi ve daha güçlü zaman yolculuğu hata ayıklaması vardır.

S: Kesintili testleri nasıl halledeceğiz?

Oyun yazarının otomatik beklemesi çoğu düzensizliği ortadan kaldırır. Kalan sorunlar için: önce web iddialarını kullanın (konum belirleyiciyi bekleyin), zamanlamaya bağlı davranışı test etmekten kaçının ve CI'da yeniden denemeleri yapılandırın. İzleme raporları, aralıklı arızaların temel nedeninin belirlenmesine yardımcı olur.

S: Her sayfayı test etmeli miyiz?

Kritik kullanıcı akışlarına odaklanın: kimlik doğrulama, temel iş akışları, form gönderimleri ve ödeme akışları. Her sayfanın E2E testine ihtiyacı yoktur; bileşen düzeyinde kapsam için birim ve entegrasyon testlerini kullanın.

S: E2E testleri ne kadar sürmeli?

Bireysel testler 30 saniyeden kısa sürede tamamlanmalıdır. Orta ölçekli bir uygulamaya (50-100 test) yönelik tam bir paket, paralel yürütmeyle 10 dakikadan kısa sürede çalışmalıdır.

---

Sırada Ne Var

Playwright ile E2E testi, uygulamanızın kullanıcı açısından doğru çalıştığına dair güven sağlar. Kritik akışlarla başlayın ve uygulamanız büyüdükçe kapsamı genişletin.

Otomasyon yardımını test etmek için ECOSIRE ile iletişime geçin veya kalite garantili ERP dağıtımı için Odoo uygulama hizmetlerimizi inceleyin.

---

ECOSIRE tarafından yayınlandı - işletmelerin kurumsal yazılım çözümleriyle ölçeklenmesine yardımcı oluyor.