Phase 5 / Ep 22: Building an E2E Headless Test Automation Flow

All core backend business operations are up and running, so next we need to render the interface on the screen. Writing UI is what Large Language Models (LLMs) excel at, but it's also the area where they are most likely to produce code that is "all style and no substance."

It might write you a beautiful "Sync Calendar" button, but clicking this button does absolutely nothing. Therefore, we must deploy End-to-End (E2E) headless browser testing.

1. Establishing a Dedicated Workflow

Set the rules in .agents/workflows/e2e-testing.md:

description: E2E testing execution and development flow
1. Tasks involving browser feature clickstreams must be verified via Playwright.
2. In any situation requiring button selection, to combat Tailwind's ugly mutating class names, **it is mandatory to first add clear `data-testid` attributes** on components in the `app/` layer. Selecting based on relative paths like `div > div > button` is strictly prohibited.
3. Please start the project on a dedicated isolated testing port (to prevent conflicts).

2. Preventing Test Environment Crashes

Why do we need the third rule? Many programmers using unrefined AI will let it run automated tests, only for the AI to connect to the production network locally and wipe the database clean while running tests.

By establishing this workflow, we condition the Agent before executing commands: once browser flow operations are involved, isolation and reset mechanisms must be strictly followed. Testing is meant to put out fires; it absolutely must not burn down the base camp instead.