writing-browser-e2e-tests

Playwright E2E Testing Standards

Purpose

Progressive disclosure of Playwright end-to-end testing standards for agents writing E2E tests.

Authoritative Source: docs/explanation/software-engineering/automation-testing/tools/playwright/README.md

Usage: Auto-loaded for agents when writing Playwright E2E tests. Provides quick reference to test organization, selectors, assertions, page objects, and debugging patterns.

Quick Standards Reference

• Test Organization, Selectors, Assertions — file structure, naming, accessibility-first selector priority, web-first assertions
• Page Object Model and Configuration — class-based POM pattern, playwright.config.ts standards
• Best Practices, Anti-Patterns, Debugging — test isolation, API+UI combination, common anti-patterns, trace viewer/inspector

OSE Platform Context

Islamic Finance Testing

Zakat Calculator Tests:

test("calculates zakat correctly", async ({ page }) => {
  await page.goto("/zakat-calculator");
  await page.getByLabel("Wealth Amount").fill("100000");
  await page.getByRole("button", { name: "Calculate" }).click();

  // Verify 2.5% calculation
  await expect(page.getByTestId("zakat-amount")).toHaveText("RM 2,500.00");
});

Murabaha Contract Tests:

test("murabaha contract workflow", async ({ page }) => {
  const murabaha = new MurabahaPage(page);
  await murabaha.goto();
  await murabaha.createContract({
    asset: "Vehicle",
    cost: 50000,
    profitRate: 5,
  });

  await expect(page.getByText("Contract Created")).toBeVisible();
  await expect(page.getByTestId("total-payment")).toContainText("52,500");
});

Test-Driven Development for E2E

TDD applies to E2E test authoring: write the failing Playwright spec — or a failing Playwright-MCP manual verification script — before the feature implementation exists. Both forms follow Red→Green→Refactor: