Pengujian E2E

TurboJet mengintegrasikan Playwright untuk pengujian end-to-end terhadap app SaaS (@repo/saas).

Unit test (Vitest) dibahas di Testing.

Prasyarat (lokal)

1. Jalankan layanan Docker (Postgres + Mailpit):

pnpm docker:up

2. Pastikan .env root menyertakan SMTP / Mailpit lokal (lihat .env.example):

SMTP_HOST=localhost
SMTP_PORT=1025
MAILPIT_URL=http://localhost:8025
SEED_EMAIL=[email protected]
E2E_USER_EMAIL=[email protected]

Saat SMTP_HOST disetel, @repo/mail mengirim lewat SMTP (Mailpit) alih-alih Resend.

3. Instal browser pertama kali:

pnpm --filter @repo/saas exec playwright install chromium

Menjalankan pengujian e2e

Dari root monorepo:

pnpm test:e2e
# setara dengan:
pnpm --filter @repo/saas test:e2e

Buka UI Playwright:

pnpm --filter @repo/saas test:e2e:ui

Tampilkan laporan HTML terakhir:

pnpm --filter @repo/saas test:e2e:report

Cara server dijalankan

Secara default, webServer Playwright membangun app SaaS dalam mode production dan menjalankan pnpm start di port 3000, menunggu /api/status. Secara lokal ia bisa memakai ulang server yang sudah jalan saat tidak di CI.

Untuk mengarah ke server yang sudah ada dan melewati langkah build/start, setel:

E2E_BASE_URL=http://localhost:3000

(NEXT_PUBLIC_SAAS_URL juga diterima sebagai fallback base URL; default http://localhost:3000.)

Global setup

Sebelum spec jalan, e2e/setup/global-setup.ts:

1. Menjalankan pnpm --filter @repo/database db:migrate:deploy
2. Menjalankan pnpm --filter @repo/database db:seed (menyemai SEED_EMAIL dan E2E_USER_EMAIL)

Auth storage state

Proyek chromium-setup menjalankan e2e/setup/auth.setup.ts, yang masuk lewat OTP dan menulis storage state ke e2e/.playwright/auth/user.json. Spec yang cocok dengan *.authenticated.spec.ts memuat state itu secara otomatis.

Menjalankan e2e di CI

Workflow: .github/workflows/e2e-saas.yml

CI tidak membutuhkan secrets GitHub Actions untuk suite default. Workflow menyalin .env.ci yang di-commit ke .env (placeholder untuk auth, payments, AI, S3, dll., plus DATABASE_URL untuk layanan Postgres CI).

Layanan workflow:

• Postgres 15 — ci / ci / ci di 5432
• Mailpit — SMTP 1025, UI 8025

Langkah menginstal Chromium beserta deps, lalu menjalankan pnpm --filter @repo/saas test:e2e. Artefak:

• Laporan HTML: apps/saas/e2e/playwright-report (14 hari)
• Trace / hasil tes saat gagal: apps/saas/e2e/test-results (7 hari)

CI utama (.github/workflows/ci.yml) tidak menjalankan e2e.

Jika Anda menambah integrasi yang membutuhkan kredensial nyata di CI, taruh di GitHub Settings → Secrets and variables → Actions dan hubungkan ke workflow / .env.ci seperti untuk .env lokal.

Di mana tes berada

E2E dicolokasi dengan app SaaS:

apps/saas/
├── playwright.config.ts
└── e2e/
    ├── constants.ts          # baseURL, paths, e2e user, Mailpit URL, auth state path
    ├── env.ts                # loads root ../../.env
    ├── helpers/
    │   └── mailbox.ts        # Mailpit API: clear, wait, extract OTP / magic link
    ├── pages/
    │   ├── sign-in.page.ts
    │   └── dashboard.page.ts
    ├── setup/
    │   ├── global-setup.ts   # migrate + seed
    │   └── auth.setup.ts     # OTP login → storage state
    ├── specs/
    │   ├── auth.sign-in.spec.ts
    │   └── dashboard.authenticated.spec.ts
    ├── .playwright/          # gitignored (auth state)
    ├── playwright-report/    # gitignored
    └── test-results/         # gitignored

Sorotan config (apps/saas/playwright.config.ts):

• testDir: ./e2e
• workers: 1, fullyParallel: false
• Proyek: chromium-setup → chromium (spec tanpa auth) dan chromium-authenticated (*.authenticated.spec.ts + storageState)
• Reporter: list + HTML di e2e/playwright-report

Menulis pengujian e2e

Tambahkan suite baru di apps/saas/e2e/specs/ sebagai file *.spec.ts. Playwright akan memungutnya secara otomatis.

Alur tanpa autentikasi / publik:

import { expect, test } from "@playwright/test";

test.describe("some feature", () => {
	test("should do something", async ({ page }) => {
		await page.goto("/sign-in");

		await expect(
			page.getByRole("heading", { name: /sign in/i }),
		).toBeVisible();
	});
});

Alur terautentikasi — namai file *.authenticated.spec.ts agar berjalan di proyek chromium-authenticated dengan sesi tersimpan:

import { expect, test } from "@playwright/test";
import { paths } from "../constants";
import { DashboardPage } from "../pages/dashboard.page";

test.describe("dashboard", () => {
	test("loads for signed-in user", async ({ page }) => {
		const dashboard = new DashboardPage(page);
		await page.goto(paths.dashboard);
		await dashboard.waitForReady();
		await expect(page).toHaveURL(/dashboard/);
	});
});

Lebih baik pakai page object di e2e/pages/ dan helper Mailpit di e2e/helpers/mailbox.ts untuk auth berbasis email.

Pelajari lebih lanjut di dokumentasi Playwright.

Cakupan saat ini

Belum ada spec e2e untuk billing, admin, onboarding, atau marketing.

Cheat sheet perintah

Terkait

• Testing — unit test Vitest