1.1. should-add-single-todo

1.1. should-add-single-todo

File: tests/adding-todos/should-add-single-todo.spec.ts

Steps:

1. Navigate to the TodoMVC application - expect: The application loads successfully - expect: The input field 'What needs to be done?' is visible
2. Type 'Buy groceries' into the input field - expect: The text appears in the input field
3. Press Enter to submit the todo - expect: The new todo 'Buy groceries' appears in the todo list - expect: The input field is cleared - expect: The todo counter shows '1 item left'

### 5.2 种子文件与 fixture（页面初始状态）

种子文件 [seed.spec.ts](https://gitcode.com/GitHub_Trending/pl/playwright/blob/46cd5008d12d4e1297793d921e6cc3b595e388da/examples/todomvc/tests/seed.spec.ts?utm_source=gitcode_repo_files) 是一个近乎空白的测试：

```ts
import { test, expect } from './fixtures';

test('seed', async ({ page }) => {
  // This test tells agents how to start recording the test
  // so that the page was already configured.
});

其注释直接点明了用途：告诉代理"如何开始录制测试，以便页面已经完成配置"。真正的初始化逻辑在 fixtures.ts 中——它扩展了 @playwright/test 的 page fixture，在每次测试开始前执行 page.goto('https://demo.playwright.dev/todomvc')。因此 generator_setup_page 运行种子测试后，页面即停留在 TodoMVC demo 首页，代理从"输入框可见"这一步开始实时执行，无需重复导航。

5.3 生成产物（输出）

对照 should-add-single-todo.spec.ts，可以看到代理规范在真实产物中的体现：

// seed: tests/seed.spec.ts

import { test, expect } from '../fixtures';

test.describe('Adding Todos', () => {
  test('should add single todo', async ({ page }) => {
    // Step 1: Navigate to the TodoMVC application
    // Expect: The application loads successfully, The input field 'What needs to be done?' is visible
    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();

    // Step 2: Type 'Buy groceries' into the input field
    await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Buy groceries');
    // Expect: The text appears in the input field
    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toHaveValue('Buy groceries');

    // Step 3: Press Enter to submit the todo
    await page.keyboard.press('Enter');
    // Expect: The new todo 'Buy groceries' appears in the todo list
    await expect(page.getByText('Buy groceries')).toBeVisible();
    // Expect: The input field is cleared
    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toHaveValue('');
    // Expect: The todo counter shows '1 item left'
    await expect(page.getByText('1 item left')).toBeVisible();
  });
});

逐条验证规范落实情况：

• 单测试单文件：整个文件只有一个 test()；
• 文件名 fs-friendly：计划场景名 should-add-single-todo 直接作为文件名；
• describe 与顶层计划条目一致：计划 ### 1. Adding Todos → test.describe('Adding Todos')；
• test 标题与场景名一致：test('should add single todo')；
• 步骤注释：每个步骤前有 // Step N: ... 注释，预期写成 // Expect: ...，且一个步骤的多条预期合并为一条注释，未重复；
• 最佳实践体现：选择器全部来自实时执行时拿到的可访问性信息——getByRole('textbox', { name: 'What needs to be done?' }) 这类基于 ARIA role 的稳定选择器，而非脆弱的 CSS 路径。

tests/ 目录下按功能子目录（adding-todos/、completing-todos/、editing-todos/、deleting-todos/、filtering-todos/、todo-creation/）组织了十余个此类生成文件，与计划中的 **File:** 字段一一对应，印证了 generator_write_test 中"按 project 的 testDir 校验并自动建目录写入"的行为。

5.4 运行环境配置

playwright.config.ts 声明了 testDir: './tests'（即 generator_write_test 的合法写入边界）、timeout: 15_000、expect.timeout: 5_000、CI 下的 retries: 2 与 workers: 1，以及仅启用 chromium 项目（devices['Desktop Chrome']，firefox/webkit 项目被注释保留）。package.json 提供四个脚本：

"scripts": {
  "test": "playwright test",
  "ctest": "playwright test --project=chromium",
  "ftest": "playwright test --project=firefox",
  "wtest": "playwright test --project=webkit"
}