用途
该技能用于把在浏览器中手动执行的一次性用户流程，转换为可重复执行的 Playwright 端到端测试。它把浏览器 MCP 当作录制器：每一次导航、点击、填写和按键都会成为脚本中的一行，智能体随后将这条轨迹翻译为仓库中的 Playwright 测试文件，或生成可粘贴进现有 spec 的代码片段。该方案为 Cursor 原生，结合 browser_snapshot（引用、角色、名称）与结构化动作，而不是依赖独立的录制扩展。
前提条件
目标应用可访问（例如开发服务器已运行）；如有需要，可使用 finding-dev-server-url。仓库中已安装或将要安装 Playwright（@playwright/test）。若尚未安装，可用 adding-e2e-tests 或项目标准方式添加。
录制工作流
-
定义流程：用一句话界定范围，例如“登录、打开设置、切换暗色模式、保存”。
-
按顺序处理每个步骤：使用 browser_snapshot 获取可访问性树和元素引用；选择最小交互方式——browser_click 搭配来自快照的 ref（除非必要，不使用坐标点击），输入使用 browser_fill 或 browser_type，下拉选择使用 browser_select_option，整页 URL 变化使用 browser_navigate。在主智能体维护的结构化列表中记录该步骤：步骤编号、动作动词（navigate、click、fill、press、select）、Playwright 的定位策略（优先 getByRole('button', { name: '...' })、getByLabel('...')、getByPlaceholder('...')，若应用使用测试 ID 则用 getByTestId('...')）、值（用于填写）或 URL（用于导航），以及可选的简短断言（例如“期望 URL 包含 /settings”）。在改变 DOM 或发生导航的动作之后，下一次交互前应重新执行 browser_snapshot。如果流程需要等待异步内容，按 cursor-ide-browser 指引使用 browser_wait_for 或较短的增量等待，然后再次快照。
-
添加断言：根据最终快照和 URL，至少添加 expect(page).toHaveURL(...) 或 URL 片段检查，以及一个可见结果（文本、角色或测试 ID）。
-
生成 Playwright 输出：输出测试文件，例如 tests/recorded/<flow-name>.spec.ts，包含 test.describe 和 test('...', async ({ page }) => { ... })，步骤以 await page.goto(...)、await page.getByRole(...).click() 等形式呈现。最终文件不包含原始快照 ref——它们是会话相关的。
-
运行并加固：执行 npx playwright test tests/recorded/<flow-name>.spec.ts；修复不稳定性：点击前优先 expect(locator).toBeVisible()，对异步列表使用 toPass() 重试，避免任意 waitForTimeout，除非作为最后手段。
技巧
稳定的选择器：角色和可访问名称优于从开发者工具复制 CSS。若名称有歧义，在应用代码中添加 data-testid。认证：如果流程需要登录，使用环境变量存放测试凭据或 Playwright storageState——切勿提交机密。并行运行：确保测试数据不与其他测试冲突。
不适用场景
需要手动 2FA、验证码或邮件链接的流程——应停止并向用户询问测试绕过方式或 mock。