When executing a task list that involves the front-end (e.g., from task_plan.md: [ ] Connect calendar drag-and-drop with the left-side task list), the Agent must first establish operating procedures for the browser due to the E2E testing workflow.
1. Scripting the Cyber-Human's Click Path
You don't need to write the code by hand. Just give the Agent a prompt like this:
"Please implement the task flow we just discussed. For the front-end task chain of creating and syncing a calendar event, create a complete Playwright flow test for me. It must cover: logging in -> locating the 'new' button -> filling out the form -> clicking submit. Finally, it must assert that a green toast notification actually pops up on the right side of the page."
2. The Ultimate UI Moat: Decoupled Binding
A smart Agent, constrained by the guidelines in e2e-testing.md, will generate high-quality, robust code at this stage:
Instead of using the traditional page.locator('.bg-blue-500').click(), it first modifies the React component:
<button data-testid="task-submit-btn">提交</button>
Then, in the test code, it securely binds to this immutable identifier:
await page.getByTestId('task-submit-btn').click();
This is an example of the AI performing systematic self-improvement: tests influence the code's structural design, and in turn, robust components protect the stable integration of the entire system.