ui-demo

原文涵盖的主题

• UI 演示视频录制器
• 使用场景
• 三阶段流程
• 阶段 1：探索
• 原因
• 方法
• 需要关注的内容
• 输出

使用 Playwright 的视频录制功能，配合注入的光标覆盖层、自然的节奏和叙事流程，录制精美的 Web 应用演示视频。 用户要求制作"演示视频"、"屏幕录制"、"操作演示"或"教程" 用户希望以视觉方式展示某个功能或工作流程 用户需要为文档、入职培训或利益相关者演示制作视频 每个演示都需经历三个阶段：探索 -> 排练 -> 录制。切勿直接跳至录制阶段。 在编写任何脚本之前，先探索目标页面，了解实际内容。 你无法为未见过的内容编写脚本。字段可能是 而非 ，下拉菜单可能是自定义组件而非 ，评论框可能支持 @mentions 或 #tags。假设会无声地破坏录制。 导航至流程中的每个页面，并转储其交互元素： 表单字段：它们是 、 、自定义下拉菜单还是组合框？ 选择选项：转储选项的值和文本。占位符通常包含 value="0" 或 value=""，看起来非空。使用 Array.from(el.options).map(o => ({ value: o.value, text: o.text }))。跳过文本包含"选择"或值为 "0" 的选项。 富文本：评论框是否支持 @mentions、#tags、Markdown 或表情符号？检查占位符文本。 必填字段：哪些字段会阻止表单提交？检查标签中的 required、，并尝试提交空表单以查看验证错误。 动态内容：字段是否在填写其他字段后出现？ 按钮标签：确切的文本，如 "Submit"、"Submit Request" 或 "Send"。 表格列标题：对于表格驱动的模态框，将每个 input[type="number"] 映射到其列标题，而不是假设所有数字输入都表示相同含义。 每个页面的字段映射，用于在脚本中编写正确的选择器。示例： 在不录制的情况下运行所有步骤。验证每个选择器都能解析。 静默的选择器失败是演示录制中断的主要原因。排练可以在浪费录制之前发现它们。 使用 ensureVisible，一个记录日志并大声报错的包装器： 1. 读取可见元素转储。 2. 找到正确的选择器。 3. 更新脚本。 4. 重新运行排练。 5. 仅在所有选择器通过后才继续。 仅在探索和排练通过后，才创建录制。 将视频规划为一个故事。遵循用户指定的顺序，或使用此默认顺序： 入口：登录或导航至起始点 背景：平移周围环境，让观众定位 操作：执行主要工作流程步骤 变体：展示次要功能，如设置、主题或本地化 结果：展示结果、确认或新状态 登录后：4s 导航后：3s 点击按钮后：2s 主要步骤之间：1.5-2s 最终操作后：3s 输入延迟：每个字符 25-40ms 注入一个跟随鼠标移动的 SVG 箭头光标： 每次页面导航后调用 injectCursor(page)，因为覆盖层会在导航时被销毁。 切勿瞬移光标。在点击前移动到目标： 每次调用都应包含描述性

这里只展示节选，请以完整原文和当前要求为准。