UI 演示视频录制器

使用 Playwright 的视频录制功能，配合注入的光标覆盖层、自然的节奏和叙事流程，录制精美的 Web 应用演示视频。

使用场景

• 用户要求制作"演示视频"、"屏幕录制"、"操作演示"或"教程"
• 用户希望以视觉方式展示某个功能或工作流程
• 用户需要为文档、入职培训或利益相关者演示制作视频

三阶段流程

每个演示都需经历三个阶段：探索 -> 排练 -> 录制。切勿直接跳至录制阶段。

---

阶段 1：探索

在编写任何脚本之前，先探索目标页面，了解实际内容。

原因

你无法为未见过的内容编写脚本。字段可能是 <input> 而非 <textarea>，下拉菜单可能是自定义组件而非 <select>，评论框可能支持 @mentions 或 #tags。假设会无声地破坏录制。

方法

导航至流程中的每个页面，并转储其交互元素：

// Run this for each page in the flow BEFORE writing the demo script
const fields = await page.evaluate(() => {
  const els = [];
  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {
    if (el.offsetParent !== null) {
      els.push({
        tag: el.tagName,
        type: el.type || '',
        name: el.name || '',
        placeholder: el.placeholder || '',
        text: el.textContent?.trim().substring(0, 40) || '',
        contentEditable: el.contentEditable === 'true',
        role: el.getAttribute('role') || '',
      });
    }
  });
  return els;
});
console.log(JSON.stringify(fields, null, 2));

需要关注的内容

• 表单字段：它们是 <select>、<input>、自定义下拉菜单还是组合框？
• 选择选项：转储选项的值和文本。占位符通常包含 `value="0…