如何在Chrome代码片段中使用类Puppeteer的客户端自动化录制命令？

1. 如何在客户端使用Puppeteer命令操作当前页面？ #

Puppeteer的Node.js API没法直接在浏览器端运行，但可以用原生DOM API模拟Puppeteer核心操作，甚至自己封装一套贴近Puppeteer语法的工具函数，直接在Chrome Snippets里运行：

基础替代示例 #

// 替代Puppeteer的page.click('#btn')
document.querySelector('#btn').click();

// 替代page.type('#input', 'hello')
const input = document.querySelector('#input');
input.value = 'hello';
// 触发页面监听的输入/变更事件
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));

封装工具函数（贴近Puppeteer语法） #

const clientPage = {
  // 模拟点击
  async click(selector) {
    const elem = document.querySelector(selector);
    if (!elem) throw new Error(`找不到元素：${selector}`);
    elem.click();
  },
  // 模拟输入文本
  async type(selector, text) {
    const elem = document.querySelector(selector);
    if (!elem) throw new Error(`找不到元素：${selector}`);
    elem.value = text;
    elem.dispatchEvent(new Event('input', { bubbles: true }));
    elem.dispatchEvent(new Event('change', { bubbles: true }));
  },
  // 等待元素出现
  async waitForSelector(selector, timeout = 3000) {
    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => reject(new Error('等待超时')), timeout);
      const checkElement = () => {
        const elem = document.querySelector(selector);
        if (elem) {
          clearTimeout(timer);
          resolve(elem);
        } else {
          requestAnimationFrame(checkElement);
        }
      };
      checkElement();
    });
  }
};

// 使用示例
await clientPage.waitForSelector('#username');
await clientPage.type('#username', 'test_account');
await clientPage.click('#submit_btn');

2. 如何在客户端Snippets中重放Chrome Recorder录制的JSON？ #

Chrome Recorder导出的JSON遵循固定步骤格式，你可以写一个解析函数，直接在Snippets里执行录制的步骤：

重放函数示例 #

async function replayRecorderSteps(recorderJson) {
  const steps = recorderJson.steps;
  for (const step of steps) {
    switch (step.type) {
      case 'click': {
        const elem = document.querySelector(step.selector);
        elem?.click();
        break;
      }
      case 'type': {
        const elem = document.querySelector(step.selector);
        if (elem) {
          elem.value = step.text;
          elem.dispatchEvent(new Event('input', { bubbles: true }));
        }
        break;
      }
      case 'navigate': {
        window.location.href = step.url;
        // 等待页面加载完成
        await new Promise(resolve => window.addEventListener('load', resolve));
        break;
      }
      case 'waitForElement': {
        await new Promise((resolve, reject) => {
          const timer = setTimeout(reject, 5000);
          const check = () => {
            const elem = document.querySelector(step.selector);
            if (elem) {
              clearTimeout(timer);
              resolve();
            } else {
              requestAnimationFrame(check);
            }
          };
          check();
        });
        break;
      }
      // 其他步骤类型（如scroll、hover）可按需添加处理逻辑
    }
    // 模拟步骤间的延迟（可选）
    await new Promise(resolve => setTimeout(resolve, 500));
  }
}

// 使用方式：把Recorder导出的JSON替换到这里
const myRecorderData = { /* 你的Recorder JSON内容 */ };
replayRecorderSteps(myRecorderData);

3. 能否在Recorder中编辑代码添加循环、条件等逻辑？ #

目前Chrome DevTools Recorder本身不支持直接在界面内添加循环、条件判断这类逻辑，但可以通过以下方式实现：

1. 先录制基础操作步骤（比如单次点击、输入）
2. 导出为Puppeteer代码，复制到Snippets后转成原生JS
3. 手动添加循环、条件逻辑

示例：给录制的单次点击添加循环 #

// 录制的单次点击转成原生JS后，改成循环点击10次
for (let i = 0; i < 10; i++) {
  document.querySelector('#refresh_btn').click();
  // 每次点击间隔1秒
  await new Promise(resolve => setTimeout(resolve, 1000));
}

内容的提问来源于stack exchange，提问作者Stefan