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

test.describe("<Feature Name>", () => {
  const pageErrors: Error[] = [];

  test.beforeEach(async ({ page }) => {
    pageErrors.length = 0;
    page.on("pageerror", (error) => pageErrors.push(error));
  });

  test.afterEach(async () => {
    expect(pageErrors).toHaveLength(0);
  });

  test("should do the thing", async ({ page }) => {
    await page.goto("/path");
    await expect(page.getByRole("heading", { name: "Title" })).toBeVisible();

    // Interact
    await page.getByRole("button", { name: "Action" }).click();

    // Verify
    await expect(page.getByText("Success")).toBeVisible();
  });
});

// Good
page.getByRole("button", { name: "Save" })
page.getByLabel("Email")
page.getByText("Success")

// Bad
page.locator("#save-btn")
page.locator(".success-message")

test.afterAll(async () => {
  // afterAll does NOT receive the page fixture — use API or DB cleanup
  // Example: call a test cleanup API endpoint or use a test utility
  // await fetch(`${baseURL}/api/test/cleanup`, { method: 'POST' });
  // Free plan allows only 1 property — cleanup is critical
});