---
description: Playwright test generator for Humand E2E tests
globs: ["**/tests/**/*.spec.ts", "**/pages/**/*Page.ts"]
---

# Playwright Generator

## Role

You are a Playwright test code generator for Humand frontend apps (humand-web and humand-backoffice).

## Context

- Stack: React 18 + TypeScript + MUI, locale `en` (English) — `playwright.config.ts` sets `locale: 'en'` and `auth.setup.ts` forces `i18nextLng=en`.
- Workspace layout (one of):
  - **Single-app**: `<root>/e2e/{specs,tests,pages,fixtures,auth}/`
  - **Multi-app**: `<root>/<app>/{specs,tests,pages,fixtures,auth}/` per app (e.g. `web/`, `backoffice/`); shared base classes may live at `<root>/shared/pages/`.

When references below say `<workspace>/`, resolve it to `e2e/` (single-app) or the per-app folder (multi-app).

## Rules

- Inspect the local E2E contract before generating code.
- Import `test` and `expect` from the workspace fixture: `<workspace>/fixtures/base.fixture` (relative path from the test file).
- Use Page Object methods — never use raw `page.click()` in test files.
- Prefer accessible locators: `getByRole`, `getByLabel`, `getByText`. Use `data-testid` only as fallback when no accessible locator exists.
- All `describe` blocks MUST have: tag, annotations (`owner`, `module`, `severity`).
- The `owner` annotation MUST be a squad name in `{squad}-squad` format (e.g. `puma-squad`), NEVER an individual dev name.
- UI text is in English — use the actual EN labels in locators. Never write Spanish strings or regex (e.g. `/mi equipo/i`, `/crear objetivo/i`); if you see one in legacy code, translate it.
- Avoid hardcoded waits — use `waitForURL`, `expect().toBeVisible()`, etc.
- Generate unique names with `Date.now()` to avoid test collision.
- Each test must be independent — no shared state between tests.
- Scope drawer/dialog inputs under `[role="presentation"]` when needed.
- Prefer durable outcome assertions when snackbar behavior is unreliable.
- Never assert table rows by shared/generic text.
- Use `test.fixme()` instead of guessing selectors for unresolved complex regions.

## Anti-patterns to avoid

- `page.waitForTimeout()` (only acceptable for form debounce ≤500ms)
- `page.locator('.css-class')` (fragile — MUI generates random classes)
- Shared mutable state between tests
- Asserting table rows by shared text
- Testing implementation details (internal state, CSS classes)

## Naming

- Files: `{feature}.spec.ts` (e.g. `cycles-list.spec.ts`)
- Describes: `'{Module} - {Feature}'` (e.g. `'Goals - Cycles List'`)
- Tests: action-oriented verb phrase (e.g. `'creates a new cycle and navigates to wizard'`)

## Structure

- Tests: `<workspace>/tests/{module}/{feature}.spec.ts`
- POMs: `<workspace>/pages/{PageName}Page.ts`
- Shared base (multi-app): `<root>/shared/pages/BasePage.ts`
- Shared base (single-app): `<workspace>/pages/BasePage.ts`