《实用笔记》：为企业级用户界面构建代理型Playwright工具包。

本指南将逐步构建从原材料到可运行系统的完整流程，用于开发适用于企业级 UI 自动化的代理型 Playwright 工具集。重点在于可操作的步骤、明确的检查点，以及可直接放入代码仓库的代码，无需猜测其用途。 在概览阶段，应在修改代码之前明确输入参数、各步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行相应步骤，而无需猜测隐藏的状态。 除了功能结果外，还需记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在流程从演示环境过渡到共享环境时出现意外费用。

我们要解决的问题

在处理“我们面临的问题”阶段时，首先写下相关契约：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 将配置信息与应用程序代码分开存放。环境文件、密钥存储以及功能开关应集中于一个位置，这样操作人员无需查看整个系统结构即可进行审计。 为每次调用记录工具名称、参数哈希值、延迟时间以及执行结果。如果没有这些记录，调试代理将陷入无止境的循环，耗费大量时间。

Use the harness to add manager role CRM coverage.

check MCP access,
inspect existing coverage,
use Playwright Agents or capture workflows,
reuse framework layers,
run focused tests,
update the graph,
and report evidence.

日常工作流程

在处理“日常工作流程”阶段时，首先写下相关契约：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 同时记录正常流程和异常恢复流程。重试机制、人工审核环节以及死信处理都是产品本身的组成部分，而非后续需要补充的功能。 需为每次调用记录工具名称、参数哈希值、延迟时间以及最终结果。没有这些记录，调试代理将陷入无止境的循环，耗费大量时间。

Prompt: create tests for manager role flow
  -> check whether MCP is available and allowed
  -> if yes, use official Playwright Agents for exploration or healing
  -> if no, use capture workflows and Playwright CLI evidence
  -> in both paths, follow the same harness standards
  -> verify with npx playwright test

模式1：MCP可用

在处理模式1的MCP Available阶段时，首先需明确合同规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 建议采用小型、可测试的单元而非庞大的脚本。当某个步骤失败时，故障应能指向单一责任点，而非复杂的流程链。 需为每次调用记录工具名称、参数哈希值、延迟时间以及最终结果。没有这些记录，调试代理循环将会耗费大量时间。 在处理模式1的MCP Available阶段时，首先需明确合同规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 应在功能结果旁记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外费用。

Official Playwright Agents
  + MCP browser context
  + Harness standards
  + Playwright test verification
  = faster generation with team governance

模式2：MCP不可用

将模式2的“MCP不可用”状态视为可测量的表面来处理效果最佳。在扩大范围之前，需记录一份理想运行案例、一个故障案例以及回滚说明。 配置应置于应用程序代码之外。环境文件、密钥存储和功能标志应集中存放，以便操作员无需查看整个系统结构即可进行审计。 提供具有严格数据结构定义及明确副作用标签的工具。主机需要在自动批准之前知道哪些调用会修改系统状态。

Prompt
  + local context files
  + capture workflows
  + playwright-cli snapshots
  + npx playwright test
  + trace/report evidence
  = no-MCP agentic Playwright workflow

捕获工作流：实用的CLI层

捕获工作流：将“实际应用阶段”视为可度量的对象能更好地发挥作用。在扩大范围之前，先记录一个成功的案例、一个失败案例以及回滚说明。同时记录正常流程和恢复流程。重试机制、人工审核环节以及错误处理都是产品本身的一部分，而非后续需要补充的内容。应提供具有明确结构定义和清晰副作用标识的工具，这样主机在自动批准之前就能知道哪些调用会改变状态。

playwright-cli open http://127.0.0.1:4173/login
playwright-cli localstorage-set ...
playwright-cli goto http://127.0.0.1:4173/crm/accounts
playwright-cli snapshot --filename=contexts/captures/crm-manager-accounts-loaded.yml

npm run capture:recipes:generate
npm run capture:recipe -- --list
npm run capture:crm:manager -- --dry-run
npm run capture:crm:manager

第一天、第二天及之后

将“第1天 第2天”阶段视为可度量的对象来处理效果最佳。在扩大范围之前，需记录一份理想的执行日志、一个故障案例以及回滚说明。 相比庞大的脚本，应优先选择小型且可测试的单元。当某一步骤出现故障时，故障应指向单一责任模块，而非复杂的流程链。 应使用具有明确结构规范和清晰副作用标注的工具。主机需要在自动批准之前知道哪些调用会修改状态。 将“第1天 第2天”阶段视为可度量的对象来处理效果最佳。在扩大范围之前，需记录一份理想的执行日志、一个故障案例以及回滚说明。 除了功能结果外，还需记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外费用。

第1天：添加新流程

在第一天“添加阶段”时，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 配置信息应置于应用程序代码之外。环境文件、密钥存储以及功能标志应集中存放于一个位置，这样操作人员无需查看整个流程即可进行审计。 在网关处进行身份验证，在数据层再次授权。仅凭承载令牌并不足以界定租户边界。

Create manager role flow tests and assert which buttons are accessible and not
accessible.

第二天：运行现有测试

在第二天进行“运行阶段”测试时，应在修改代码之前明确输入参数、该步骤的负责人以及终止标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 需同时记录正常流程和异常恢复流程。重试机制、人工审核环节以及错误消息处理都是产品功能的一部分，而非后续需要补充的内容。 在网关处进行身份验证，在数据层再次授权。仅凭承载令牌并不足以界定租户边界。

npm test
npm run test:smoke
APP_BASE_URL=http://127.0.0.1:4173 npm run sample:crm:test

后续：仅刷新已变更的内容

仅适用于后续更新：在修改代码之前，需明确当前阶段、输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测其中的隐藏状态。 优先选择小型、可测试的单元，而非庞大的脚本。当某个步骤失败时，故障应能指向具体的责任主体，而非复杂的流程链。 在网关处进行身份验证，在数据层再次授权。仅凭承载令牌并不足以界定租户边界。 仅适用于后续更新：在修改代码之前，需明确当前阶段、输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测其中的隐藏状态。 在功能结果旁记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在流程从演示环境转向共享环境时出现意外账单。

Failure on manager reports page
  -> inspect Playwright output and trace
  -> check existing reports capture
  -> refresh manager reports capture if stale
  -> fix the owning layer
  -> rerun the focused test

框架层次结构

在处理框架层次结构阶段时，首先需明确相关约定：所需的输入参数、成功信号以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 应将配置信息与应用程序代码分开存放。环境文件、密钥存储以及功能开关应集中管理，这样操作人员无需查看整个系统结构即可进行审计。 需为每次调用记录工具名称、参数哈希值、延迟时间以及执行结果。如果没有这些记录，调试代理将陷入无止境的循环，耗费大量时间。

Layer                                           Purpose
AGENTS.md and .github/copilot-instructions.md   Tell agents how to behave
contexts/*.yml                                  Store command, strategy, graph, loop, and capture rules
contexts/capture-recipes.yml                    Defines repeatable capture workflows as YAML recipes
contexts/captures/                              Stores curated page context
specs/                                          Human-readable flow plans
fixtures/                                       Shared setup, auth, browser context, page instantiation
pages/                                          Locators and user actions
assertions/                                     Reusable web-first expectations
data/                                           Test data builders
tests/                                          Executable Playwright specs
graphs/                                         Generated source, coverage, duplicate, and visual reports

了解源代码的图结构智能分析

在处理“基于源代码的图智能”阶段时，首先需列出相关规范：所需输入、成功标志以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 同时记录正常流程与异常恢复流程。重试机制、人工审核环节以及死信处理都是产品功能的一部分，而非后续需要补充的内容。 需为每次调用记录工具名称、参数哈希值、延迟时间以及最终结果。没有这些记录，调试代理将陷入无止境的循环，耗费大量时间。

npm run source:manifest -- --root=path/to/app --output=source-manifest.json --url=http://localhost:3000 --name=my-app

scripts/source-adapters/generic-source.mjs

generic scanner creates baseline manifest
  -> agent reviews source, tests, captures, and graph gaps
  -> agent enriches missing auth, roles, states, and workflow intent
  -> capture workflow becomes curated reusable page context
  -> Playwright tests verify behavior
  -> graph reports remaining gaps and duplicate risks

npm run source:manifest:crm
npm run source:manifest:crm:check

npm run graph:view

graphs/index.html#coverage
graphs/index.html#candidates
graphs/index.html#inputs

示例：管理者角色覆盖范围得到提升

在处理“示例管理器角色覆盖度”阶段时，首先需明确相关约定：所需输入、成功标志以及部分失败时的处理方式。这份清单能确保后续的代码修改保持一致性。 优先选择小型、可测试的单元，而非冗长的脚本。当某个步骤失败时，故障应指向单一责任点，而非复杂的流程链。 在调整提示词之前，先使用固定的问题集测试召回率。仅仅更换提示词很难解决检索效果不佳的问题。 在处理“示例管理器角色覆盖度”阶段时，首先需明确相关约定：所需输入、成功标志以及部分失败时的处理方式。这份清单能确保后续的代码修改保持一致性。 在功能结果旁记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外费用。

Before graph
  -> identify missing manager coverage
  -> generate/update manager capture workflow
  -> capture manager page states
  -> add page-object and assertion helpers
  -> add manager role tests
  -> rerun graph

CRM测试应用示例：

将CRM测试应用阶段视为可度量的对象使用效果最佳。在扩大范围之前，需记录一份理想的操作日志、一个故障案例以及回滚说明。 配置应置于应用程序代码之外。环境文件、密钥存储和功能开关应集中存放，以便操作人员无需查看全部内容即可进行审计。 需提供具有明确结构定义和清晰副作用标签的工具。主机需要在自动批准之前知道哪些调用会改变系统状态。

团队如何采用此方法

将“团队如何采用该方案”这一阶段视为可衡量的指标来处理效果最佳。在扩大范围之前，先记录一份成功的案例、一个失败案例以及回滚说明。 同时记录正常流程和恢复流程。重试机制、人工审核环节以及错误处理方式都是产品本身的一部分，而非后续需要补充的内容。 提供具有明确结构规范和清晰副作用标注的工具。主机需要在自动批准之前知道哪些调用会改变状态。

第一阶段：添加代理指令

在第一阶段“添加代理”工作中，若能将其视为一个可度量的对象，效果会更好。在扩大范围之前，先记录一份理想的执行日志、一个故障案例以及回滚说明。 相比庞大的脚本，应优先选择小型且可测试的单元。当某一步骤出现故障时，故障原因应能明确指向某个特定职责，而非复杂的流程链。 应使用结构清晰、带有明确副作用标注的工具。主机需要在自动批准之前知道哪些调用会修改状态。 在第一阶段“添加代理”工作中，若能将其视为一个可度量的对象，效果会更好。在扩大范围之前，先记录一份理想的执行日志、一个故障案例以及回滚说明。 除了功能结果外，还需记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外费用。

第二阶段：调整 Playwright 框架

在第二阶段“对齐”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 配置信息应置于应用程序代码之外。环境文件、密钥存储以及功能标志应集中存放于一个位置，这样操作人员无需查看整个系统结构即可进行审计。 在网关处进行身份验证，在数据层面重新授权。仅凭承载令牌并不能作为租户边界。

specs/
tests/
fixtures/
pages/
assertions/
data/
contexts/captures/

第三阶段：添加捕获工作流

在第三阶段的“添加捕获”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 需同时记录正常流程和异常恢复流程。重试机制、人工审核环节以及错误处理都是产品本身的组成部分，而非后续需要补充的功能。 在网关处进行身份验证，在数据层再次授权。仅凭承载令牌并不能作为租户边界。

npm install -g @playwright/cli@latest

npm run capture:recipes:generate
npm run capture:recipe -- --list
npm run capture:crm:manager -- --dry-run
npm run capture:crm:manager

第四阶段：添加图表审查

在第四阶段的“添加图表”阶段，修改代码之前需明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测其中的隐藏状态。 相比庞大的脚本，更应采用小型且可测试的单元。当某个步骤失败时，故障原因应能明确指向某个具体责任方，而非整个复杂的流程。 在网关处进行身份验证，在数据层再次授权。仅凭承载令牌并不足以界定租户边界。 在第四阶段的“添加图表”阶段，修改代码之前需明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测其中的隐藏状态。 除了功能结果外，还需记录执行时间以及令牌或查询的成本。提前了解成本情况，可避免在流程从演示环境转向共享环境时出现意外账单。

npm run graph:view

第5阶段：在CI中使用相同命令

在执行“使用对应阶段”这一第5阶段任务时，首先需明确相关要求：所需的输入参数、成功标志，以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改始终符合规范。 配置信息应与应用程序代码分开存放。环境文件、密钥存储以及功能开关都应集中管理，这样操作人员无需查看整个系统结构即可进行审核。 需为每次调用记录工具名称、参数哈希值、延迟时间以及执行结果。如果没有这些记录，调试代理将陷入无止境的循环，耗费大量时间。

npm run typecheck
npm test
npm run test:smoke
npm run graph:view

团队可使用的提示语示例

在处理团队可使用的提示词示例时，首先需明确相关约定：所需输入、成功标志以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 同时记录正常流程与异常恢复流程。重试机制、人工审核环节以及错误处理都属于产品功能的一部分，而非后续需要补充的内容。 缓存稳定的系统指令和工具结构。重复发送相同的开头信息是导致资源浪费的常见原因。

Use the harness to add coverage for this role-based business flow.

check MCP access
refresh or read the source manifest
inspect existing specs, tests, captures, and graph coverage
use MCP agents or the relevant capture workflow
reuse framework layers
run focused Playwright tests
update the graph
report evidence

Use the harness to debug this failing test.

inspect Playwright output, trace, and artifacts
check existing captures for the affected page or state
refresh source manifest or affected capture only if stale
fix the owning layer
rerun focused verification

Use the harness to review missing coverage.

refresh or read the source manifest
run graph view
identify missing role, state, route, capture, and assertion coverage
check duplicate risks
recommend next flows
avoid creating tests unless asked

Use the harness to refactor repeated selectors and assertions.

inspect existing tests, page objects, and assertion helpers
preserve behavior
move repeated selectors to page objects
move repeated expectations to assertion helpers
run typecheck and focused tests
update graph if coverage ownership changed

团队可获得的内容

在完成“团队能获得什么”这一阶段时，首先需明确相关约定：所需的输入参数、成功标志以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 建议采用小型、可测试的单元而非庞大的脚本。当某个步骤失败时，故障应指向单一责任模块，而非复杂的流程链。 需为每次调用记录工具名称、参数哈希值、延迟时间以及最终结果。没有这些记录，调试过程将会浪费大量时间。 在完成“团队能获得什么”这一阶段时，首先需明确相关约定：所需的输入参数、成功标志以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 在功能结果旁还需记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外费用。

最后思考

将“最终思考”阶段视为可度量的界面来处理效果最佳。在扩大范围之前，先记录一份优秀的案例、一个失败案例以及回滚说明。 应将配置与应用程序代码分开。环境文件、密钥存储和功能标志应集中存放于一处，这样操作人员无需查看整个系统结构即可进行审计。 提供具有严格数据结构且带有明确副作用标签的工具。主机需要在自动批准之前知道哪些调用会改变系统状态。

prompt
  -> mode router
  -> context
  -> capture workflow or MCP exploration
  -> framework layers
  -> Playwright verification
  -> evidence
  -> graph feedback

参考资料

将“参考资料”阶段视为可度量的对象来处理效果最佳。在扩大范围之前，需记录一份理想运行案例、一个故障案例以及回滚说明。

操作检查清单

将“操作检查清单”阶段视为可度量的对象来处理效果最佳。在扩大范围之前，需记录一份理想运行案例、一个故障案例以及回滚说明。

应将此阶段视为输入与已验证输出之间的契约。为相关文档命名，明确成功标准，杜绝无声的半完成状态。

公开那些具有有限架构且带有明确副作用标签的工具。在自动批准之前，主机必须知道哪些调用会修改状态。

对于那些会花费资金或更改生产数据的操作，必须经过人工审批。编译时的连接方式并不等同于业务功能的完整性。

编写简短的操作手册：包括如何轮换密钥、如何清空队列以及如何回滚上一次的导入操作。

同时记录正常流程和故障恢复流程。重试机制、人工审核环节以及死信处理都是产品不可或缺的部分，而非后续才需要补充的功能。

在升级整个技术栈之前，先冻结版本，为关键流程保存完整的操作记录，并确认好回滚步骤。共享环境需要设置速率限制、进行租户检查，同时明确密钥轮换的负责人。与其追求花哨的一次性演示，不如注重扎实的可靠性。

关于 fa507de22687 的批量处理说明：不要将提供者密钥放入代码仓库，为每个会话设置令牌上限，并将转录内容存储在评估测试用例的旁边，以便后续更换模型时仍能保持可比性。