尧图网页设计 
e2e缓存机制源码解读step-cache如何实现操作录制与回放【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e本文带你拆解 e2e下一代 Web 与移动端 e2e 测试框架的核心缓存机制step-cache 如何录制 AI 步骤的操作序列并在下次运行时“零模型调用”地回放回放失败时又如何把步骤平滑交还给 AI 代理。 为什么需要“回放缓存”第二次运行不再烧模型调用在 e2e 中agent.act(点击加入购物车)这样的步骤由 AI 模型驱动模型看屏幕、思考、动手。这套流程好用但每次运行都要花模型调用。e2e 的**回放缓存replay cache**解决的就是这个问题首次运行AI 正常执行步骤框架把每一个已提交的操作tap、type、navigate…连同目标控件的描述符录下来后续运行框架直接回放录好的操作序列全程不调用模型应用变了一旦某个控件找不到、或最终状态对不上回放立即停止把当前屏幕和“已执行到哪一步”的记录交给 AI让它从断点接手。运行结束的报告里会看到这样的汇总见 docs/cache.mdxCache 4 replayed · 1 handed off · 1 missed即 4 步被缓存完整回放、1 步回放中途交还给 AI、1 步完全未命中走实时执行。这就是整个机制的三种结局。 整体架构一个“只负责缓存”的会话类核心实现集中在 step-cache.ts 中的StepTraceSession类。源码注释说得很直白dispatch步骤分发拥有预算、语法和裁决权这个类只拥有缓存step-cache.ts#L1-L13。它对外只有三个关键入口begin()step-cache.ts#L228-L255打开步骤——读缓存条目、捕获起始屏幕、尝试“零轮回放”record()/recordGap()step-cache.ts#L203-L216模型实时执行时把每个动作记进录制器conclude()step-cache.ts#L325-L349步骤结束时决定保留、暂存还是删除缓存条目。缓存的“基础设施”在 packages/e2e/src/cache/ 目录identity.ts负责生成缓存键、store.ts负责文件读写条目落在.e2e/cache/目录、trace.ts定义条目格式、decide.ts与relocate.ts负责回放决策和控件重定位。 录制侧TraceRecorder 如何记下每一次操作每个动作都带“可再找到”的目标描述符录制器在 recorder.ts#L49 的TraceRecorder中。关键点它记录的不是坐标或某次观察的临时 id而是持久化描述符——role、name、testId、selector、在同类控件中的序号位置等定义见 trace.ts#L119-L149。这样回放时才能在一份全新的屏幕观察里重新找到同一个按钮。遇到“记不下”的操作就记一个 gap有些操作缓存无法复现修改型项目工具调用、从屏幕上临时读出来的值如验证码、日期。此时录制器不静默跳过而是记一个gaprecordGap/recordDerivedGaprecorder.ts#L85-L98——回放走到这里就停止并交还给 AI因为“悄悄跳过一次状态变更等于什么都没证明”。安全与限额宁缺毋滥秘钥填充只记录秘钥名绝不写明文所有落盘字符串都过一遍脱敏器recorder.ts#L1-L17单步最多录 50 个动作、单个输入最多 4096 字符超限则把整条 trace 标记为truncatedtrace.ts#L25-L37——截断的 URL 会回放出一个不同的动作所以宁可整条不可回放也不“凑合”条目是刻意的小 JSON动作序列、目标描述符、步骤摘要、结束路径、以及最多各 8 个“出现/消失”的锚点控件trace.ts#L360-L407不含任何截图、对话或观察树。 回放侧begin() 如何做到“零轮回放”第 1 步派生缓存键并读取条目构造会话时就用claimKey把“测试 目标 指令摘要 参数 代理身份”折叠成一个哈希键step-cache.ts#L176-L191键生成在 identity.ts。参数里用unique()包裹的值会留成占位槽每次运行用当次新值填充——所以“带时间戳的公司名”这类每次不同的数据也能命中同一条录影。读取时step-cache.ts#L358-L375有一个新手最容易忽略的设计原则任何读失败都降级为 miss绝不变成报错——存储不可用只是让运行变慢而不是让测试失败。第 2 步前置检查——你还在录制时的那个屏幕吗decideTraceReplaydecide.ts先比对起始路由。注意“路由”的宽松度/orders/42和/orders/7是同一路由id 视为占位符但?modesafe与?modeunsafe是不同屏幕。对不上就是wrong-context整步走实时执行。第 3 步逐个重定位控件并重放动作回放引擎replayTracereplay.ts走的是和 AI 执行器同一套动作语法同样受步骤时限、操作预算和来源策略约束。控件靠描述符重新匹配重定位逻辑在 relocate.ts控件暂时没出现就按退避节奏等待匹配到多个有歧义就停止回放。第 4 步终局验证——动作都跑了 ≠ 保存真的成功了全部动作执行完后还要做后置断言step-cache.ts#L398-L450 的replayEntry与 step-cache.ts#L463-L482 的endStateMatches最终路由必须与录制的endPath一致导航提交用 100ms~3s 的退避轮询等待step-cache.ts#L128-L135录制的“屏幕增量”必须重现步骤期间出现的控件要再出现、消失的要再消失且这些变化必须发生在回放过程中回放前就在屏幕上的结果不算数等待时长按录制时实测的耗时 10 秒余量endWaitMs。全过 →self-finalized这一步以零模型调用收尾step-cache.ts#L511-L519任何一环对不上 → 生成replayedPrefix已执行了哪些动作、为何停下由 AI 从断点接手报告标记agent-concludedstep-cache.ts#L521-L536。 收尾决策conclude() 何时保留、何时删除条目conclude()step-cache.ts#L325-L349把整个“写侧”决策收拢在一处规则比想象中克制结局缓存动作设计理由通过且回放前发生过 end-mismatch、AI 又动手修了删除条目录影 修复动作会被当成整体永远回放必须删掉让下次录一条干净的流程通过缓存完整回放了整个步骤标记keep不改写字节避免每次运行都刷新createdAt保持 git 里的缓存目录干净通过AI 实时完成暂存新录影写入被推迟到尝试attempt结束统一结算因为真正证明流程正确的是后面的验证步骤而不是步骤自身的裁决失败且回放已消费过条目删除条目否则这个“中毒”条目会在以后每次首试中回放同样的坏前缀无裁决取消 / 模型不可达什么都不做说明不了应用对错等同被中断的运行“暂存—结算”机制由 context.ts#L41-L92 的staged队列承载只有当步骤之后的验证步骤如expect(...).toHaveText(...)也通过录影才算被确认落盘未被确认的条目会被清除。这就是为什么官方建议每个act后面跟一个结果检查。另外还有个“严格模式”彩蛋cache.strict--strict-cache下录影过期不再是“AI 悄悄接手续跑”而是直接以REPLAY_STALE失败且不发起模型调用step-cache.ts#L114-L123 列出了全部 8 种“应用/条目变了”的原因避免每次 CI 都在为一条坏录影付模型费用。 新手速查三种模式与常见未命中原因模式docs/cache.mdx#L225-L229read-write回放录制本地默认、read-only只回放CI 默认、off全关--no-cache一次运行。为什么这次没回放报告里的step.cache.reason给出了答案完整对照表见 docs/cache.mdx#L177-L190新手最常遇到的几个no-entry第一次运行等这次验证通过就会录上wrong-context步骤开始前没打开录制时的那个页面target-not-found/target-ambiguousUI 变了或重复控件没有区分度——下次通过的运行会自动重录gap流程里含无法复现的操作AI 会从断点实时接手retry重试永远不回放这是刻意为之。 源码导读路径按依赖顺序想深入的话建议按这条线读packages/e2e/src/agent/step-cache.ts — 会话主体begin / conclude 的完整生命周期packages/e2e/src/cache/recorder.ts — 录制器与 gap 规则packages/e2e/src/cache/trace.ts —trace-1条目格式与严格校验“原样回放否则整条不可信”packages/e2e/src/agent/replay.ts — 零轮回放引擎与交接协议packages/e2e/src/cache/decide.ts 与 packages/e2e/src/cache/relocate.ts — 回放前置决策与控件重定位packages/e2e/src/cache/context.ts — 尝试级结算staged 队列如何被确认或清除docs/cache.mdx — 面向使用者的完整行为文档模式、失败原因、提交缓存到 git 的建议。一句话总结step-cache 把“AI 做过一次并验证过的流程”压缩成一份带前后置条件的小 JSON用“严格校验、失败即 miss、gap 即交接、写入先验证后落盘”四道纪律让回放既省模型费用又永远不会悄悄回放一个已经过期的流程。【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 e2e缓存机制源码解读：step-cache如何实现操作录制与回放
e2e缓存机制源码解读step-cache如何实现操作录制与回放【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e本文带你拆解 e2e下一代 Web 与移动端 e2e 测试框架的核心缓存机制step-cache 如何录制 AI 步骤的操作序列并在下次运行时“零模型调用”地回放回放失败时又如何把步骤平滑交还给 AI 代理。 为什么需要“回放缓存”第二次运行不再烧模型调用在 e2e 中agent.act(点击加入购物车)这样的步骤由 AI 模型驱动模型看屏幕、思考、动手。这套流程好用但每次运行都要花模型调用。e2e 的**回放缓存replay cache**解决的就是这个问题首次运行AI 正常执行步骤框架把每一个已提交的操作tap、type、navigate…连同目标控件的描述符录下来后续运行框架直接回放录好的操作序列全程不调用模型应用变了一旦某个控件找不到、或最终状态对不上回放立即停止把当前屏幕和“已执行到哪一步”的记录交给 AI让它从断点接手。运行结束的报告里会看到这样的汇总见 docs/cache.mdxCache 4 replayed · 1 handed off · 1 missed即 4 步被缓存完整回放、1 步回放中途交还给 AI、1 步完全未命中走实时执行。这就是整个机制的三种结局。 整体架构一个“只负责缓存”的会话类核心实现集中在 step-cache.ts 中的StepTraceSession类。源码注释说得很直白dispatch步骤分发拥有预算、语法和裁决权这个类只拥有缓存step-cache.ts#L1-L13。它对外只有三个关键入口begin()step-cache.ts#L228-L255打开步骤——读缓存条目、捕获起始屏幕、尝试“零轮回放”record()/recordGap()step-cache.ts#L203-L216模型实时执行时把每个动作记进录制器conclude()step-cache.ts#L325-L349步骤结束时决定保留、暂存还是删除缓存条目。缓存的“基础设施”在 packages/e2e/src/cache/ 目录identity.ts负责生成缓存键、store.ts负责文件读写条目落在.e2e/cache/目录、trace.ts定义条目格式、decide.ts与relocate.ts负责回放决策和控件重定位。 录制侧TraceRecorder 如何记下每一次操作每个动作都带“可再找到”的目标描述符录制器在 recorder.ts#L49 的TraceRecorder中。关键点它记录的不是坐标或某次观察的临时 id而是持久化描述符——role、name、testId、selector、在同类控件中的序号位置等定义见 trace.ts#L119-L149。这样回放时才能在一份全新的屏幕观察里重新找到同一个按钮。遇到“记不下”的操作就记一个 gap有些操作缓存无法复现修改型项目工具调用、从屏幕上临时读出来的值如验证码、日期。此时录制器不静默跳过而是记一个gaprecordGap/recordDerivedGaprecorder.ts#L85-L98——回放走到这里就停止并交还给 AI因为“悄悄跳过一次状态变更等于什么都没证明”。安全与限额宁缺毋滥秘钥填充只记录秘钥名绝不写明文所有落盘字符串都过一遍脱敏器recorder.ts#L1-L17单步最多录 50 个动作、单个输入最多 4096 字符超限则把整条 trace 标记为truncatedtrace.ts#L25-L37——截断的 URL 会回放出一个不同的动作所以宁可整条不可回放也不“凑合”条目是刻意的小 JSON动作序列、目标描述符、步骤摘要、结束路径、以及最多各 8 个“出现/消失”的锚点控件trace.ts#L360-L407不含任何截图、对话或观察树。 回放侧begin() 如何做到“零轮回放”第 1 步派生缓存键并读取条目构造会话时就用claimKey把“测试 目标 指令摘要 参数 代理身份”折叠成一个哈希键step-cache.ts#L176-L191键生成在 identity.ts。参数里用unique()包裹的值会留成占位槽每次运行用当次新值填充——所以“带时间戳的公司名”这类每次不同的数据也能命中同一条录影。读取时step-cache.ts#L358-L375有一个新手最容易忽略的设计原则任何读失败都降级为 miss绝不变成报错——存储不可用只是让运行变慢而不是让测试失败。第 2 步前置检查——你还在录制时的那个屏幕吗decideTraceReplaydecide.ts先比对起始路由。注意“路由”的宽松度/orders/42和/orders/7是同一路由id 视为占位符但?modesafe与?modeunsafe是不同屏幕。对不上就是wrong-context整步走实时执行。第 3 步逐个重定位控件并重放动作回放引擎replayTracereplay.ts走的是和 AI 执行器同一套动作语法同样受步骤时限、操作预算和来源策略约束。控件靠描述符重新匹配重定位逻辑在 relocate.ts控件暂时没出现就按退避节奏等待匹配到多个有歧义就停止回放。第 4 步终局验证——动作都跑了 ≠ 保存真的成功了全部动作执行完后还要做后置断言step-cache.ts#L398-L450 的replayEntry与 step-cache.ts#L463-L482 的endStateMatches最终路由必须与录制的endPath一致导航提交用 100ms~3s 的退避轮询等待step-cache.ts#L128-L135录制的“屏幕增量”必须重现步骤期间出现的控件要再出现、消失的要再消失且这些变化必须发生在回放过程中回放前就在屏幕上的结果不算数等待时长按录制时实测的耗时 10 秒余量endWaitMs。全过 →self-finalized这一步以零模型调用收尾step-cache.ts#L511-L519任何一环对不上 → 生成replayedPrefix已执行了哪些动作、为何停下由 AI 从断点接手报告标记agent-concludedstep-cache.ts#L521-L536。 收尾决策conclude() 何时保留、何时删除条目conclude()step-cache.ts#L325-L349把整个“写侧”决策收拢在一处规则比想象中克制结局缓存动作设计理由通过且回放前发生过 end-mismatch、AI 又动手修了删除条目录影 修复动作会被当成整体永远回放必须删掉让下次录一条干净的流程通过缓存完整回放了整个步骤标记keep不改写字节避免每次运行都刷新createdAt保持 git 里的缓存目录干净通过AI 实时完成暂存新录影写入被推迟到尝试attempt结束统一结算因为真正证明流程正确的是后面的验证步骤而不是步骤自身的裁决失败且回放已消费过条目删除条目否则这个“中毒”条目会在以后每次首试中回放同样的坏前缀无裁决取消 / 模型不可达什么都不做说明不了应用对错等同被中断的运行“暂存—结算”机制由 context.ts#L41-L92 的staged队列承载只有当步骤之后的验证步骤如expect(...).toHaveText(...)也通过录影才算被确认落盘未被确认的条目会被清除。这就是为什么官方建议每个act后面跟一个结果检查。另外还有个“严格模式”彩蛋cache.strict--strict-cache下录影过期不再是“AI 悄悄接手续跑”而是直接以REPLAY_STALE失败且不发起模型调用step-cache.ts#L114-L123 列出了全部 8 种“应用/条目变了”的原因避免每次 CI 都在为一条坏录影付模型费用。 新手速查三种模式与常见未命中原因模式docs/cache.mdx#L225-L229read-write回放录制本地默认、read-only只回放CI 默认、off全关--no-cache一次运行。为什么这次没回放报告里的step.cache.reason给出了答案完整对照表见 docs/cache.mdx#L177-L190新手最常遇到的几个no-entry第一次运行等这次验证通过就会录上wrong-context步骤开始前没打开录制时的那个页面target-not-found/target-ambiguousUI 变了或重复控件没有区分度——下次通过的运行会自动重录gap流程里含无法复现的操作AI 会从断点实时接手retry重试永远不回放这是刻意为之。 源码导读路径按依赖顺序想深入的话建议按这条线读packages/e2e/src/agent/step-cache.ts — 会话主体begin / conclude 的完整生命周期packages/e2e/src/cache/recorder.ts — 录制器与 gap 规则packages/e2e/src/cache/trace.ts —trace-1条目格式与严格校验“原样回放否则整条不可信”packages/e2e/src/agent/replay.ts — 零轮回放引擎与交接协议packages/e2e/src/cache/decide.ts 与 packages/e2e/src/cache/relocate.ts — 回放前置决策与控件重定位packages/e2e/src/cache/context.ts — 尝试级结算staged 队列如何被确认或清除docs/cache.mdx — 面向使用者的完整行为文档模式、失败原因、提交缓存到 git 的建议。一句话总结step-cache 把“AI 做过一次并验证过的流程”压缩成一份带前后置条件的小 JSON用“严格校验、失败即 miss、gap 即交接、写入先验证后落盘”四道纪律让回放既省模型费用又永远不会悄悄回放一个已经过期的流程。【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考