Playwright

E2E testing uses Playwright. Multi-environment, multi-tenant aware, and integrated with Playwright MCP for browser-driven AI flows.

Quick start

Copypnpm exec playwright install                                    # One-time browser install
pnpm test:e2e                                                   # All e2e tests, local dev
TEST_ENV=production pnpm test:e2e --project=production-chromium # Against production

Commands

Test credentials

All accounts use password 1234. See accounts for full details.

Bulk: teacher1@ … teacher99@ (100), student1@ … student999@ (1,000), parent1@ … parent1999@ (2,000).

If user@balqalam.com mutates during a run, reset:

Copypnpm db:reset-test-user   # or: pnpm db:seed:single users

Multi-tenant URLs

Scenarios

Example test

Copyimport { expect, test } from "@playwright/test"
 
test("admin can access school dashboard on subdomain", async ({ page }) => {
  await page.goto("http://demo.localhost:3000/en/login")
  await page.fill('[name="email"]', "admin@balqalam.com")
  await page.fill('[name="password"]', "1234")
  await page.click('[type="submit"]')
  await page.waitForURL(/\/dashboard$/)
  await expect(page.getByRole("heading", { name: /dashboard/i })).toBeVisible()
})
 
test("teacher cannot access /admin", async ({ page }) => {
  await loginAs(page, "teacher@balqalam.com")
  await page.goto("/en/admin")
  await expect(page).not.toHaveURL(/\/admin$/)
})

For shared auth state, save storageState once and reuse via test.use({ storageState }).

Configuration

playwright.config.ts levers:

• TEST_ENV — local (default) or production. Switches base URL and timeout.
• Per-project base URL: local → http://localhost:3000, production → https://ed.databayt.org.
• webServer boots pnpm dev for local runs; skipped for production.
• Headless GPU acceleration enabled by default — ~30% faster than non-GPU headless.

Browser modes

Default project is chromium; firefox available for cross-engine spot checks. --headed watches the run.

GPU-accelerated headless uses Chromium with --enable-gpu and --use-gl=angle. Verify:

Copyimport { chromium } from "@playwright/test"
 
const b = await chromium.launch({ args: ["--enable-gpu", "--use-gl=angle"] })
const ctx = await b.newContext()
const p = await ctx.newPage()
await p.goto("chrome://gpu")
console.log(await p.textContent("body"))

Playwright MCP

AI-assisted browser bridge. Configure in your MCP-aware client:

Copy{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Recommended local setup uses headless Chromium with GPU acceleration and a small persistent profile so cookies survive across calls. See .claude/settings.json and playwright.config.ts for the pinned config.

Debugging

• pnpm test:e2e:debug — Playwright Inspector
• npx playwright show-trace trace.zip — replay recorded trace
• Failed tests automatically capture screenshot + video to test-results/

CI

GitHub Actions runs pnpm test:e2e on PRs against the local server. Production smoke runs pnpm test:e2e:prod:smoke against ed.databayt.org after deploys.

See also

• Accounts
• Authentication