AI 编程与开发

让 Codex 把手动验收写成浏览器测试

新增任务、刷新、确认它还在——手动点一次不难。每次改代码都重复点，容易漏掉一步。可以把这些动作写成浏览器测试，让它反复检查同一个结果。

这篇沿用待办清单项目，用 Playwright 把“改好了”变成可检查的行为。

从一条看得见的结果开始

下面摘自演示中的刷新测试，省去了项目服务配置：

1
2
3
4
5
6
7
8
9
test('刷新后保留新增任务', async ({ page }) => {
  await page.goto('/after/');
  await page.getByLabel('新的待办').fill('写一条测试');
  await page.getByRole('button', { name: '添加 +' }).click();
  await expect(page.getByText('写一条测试', { exact: true })).toBeVisible();
  await page.reload();
  await expect(page.getByText('写一条测试', { exact: true })).toBeVisible();
  await expect(page.getByRole('listitem')).toHaveCount(1);
});

测试需要项目已有的 test、expect 导入和服务配置；页面名称也要与真实界面一致。这里检查的是任务文字和数量，不是某个函数有没有被调用。

Playwright 的网页断言会等待条件满足或超时。相比先固定睡几秒，再猜页面有没有准备好，这种写法更直接。Playwright 断言说明

每项测试自己准备数据

删除测试应自己新增要删的任务，不能等上一项测试留下数据。独立的浏览器上下文也能避免缓存、登录和本地存储串到下一项。Playwright 测试实践

原项目首先覆盖四件事：新增后刷新、删除后刷新、空白输入、坏 JSON 后仍能新增保存。

还要看看测试能不能抓住问题

原实验在主动关闭持久化的教学对照版运行刷新断言，出现预期失败；保存版的4项测试全部通过。这样至少知道这条断言能发现“刷新就丢”的问题，没有只检查一条永远成立的条件。

给 Codex 的任务可以这样写：

1
2
3
4
为待办项目补上这四项浏览器验收，每项独立准备数据。
先证明刷新测试在教学对照版失败，再检查保存版。
保留原有样式和功能，不要为通过测试删除断言。
报告运行命令、结果以及没有覆盖的浏览器和场景。

原测试于2026年10月5日运行，环境为 Windows 本地 Edge、Playwright Test 1.63.0。本文10月27日整理，引用的是当时的4项验收；后续项目另增了第5项结构异常测试。这里没有重跑，也未验证 Safari、Firefox、手机或跨设备同步。

本文发表日期：