Puppeteer执行数组首个点击动作无视延迟的异常求助

在Chrome环境下使用Puppeteer操作基于pdf.js的幻灯片网页时，遇到异常：需要执行一组包含切换上/下页指令及对应毫秒级延迟的点击动作，同时录制整个操作过程，但首个点击动作总是无视设置的延迟立即执行，后续动作则符合预期。

已尝试以下方案但均未解决问题：

• 在动作之间等待超时
• 使用page.evaluate通过原生JS实现点击并在内部等待
• 利用Puppeteer click()方法的内置delay参数并等待动作完成
• 在实际事件触发前触发随机点击事件
• 将Puppeteer更新至最新版本
• 在动作数组开头添加随机额外动作
• 为点击操作设置硬编码延迟值

怀疑这可能是Puppeteer或Chromium本身的bug，以下是当前代码及另一个无sleep操作的无效版本：

当前代码 #

export const makeSlideshowVideo = async (
  output_file: string,
  actions: slide_change[],
  url: string,
  webcamLength: number
) => {
  try {
    const executablePath = await chromium.executablePath(
      "https://my-cdn.s3.eu-north-1.amazonaws.com/chromium-v132.0.0-pack.tar"
    );

    const browser = await puppeteer2.launch({
      executablePath,
      args: [
        `--window-size=${VIDEO_WIDTH},${VIDEO_HEIGHT}`,
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--disable-gpu", // Disable GPU hardware acceleration
        "--disable-dev-shm-usage", // Use /tmp instead of /dev/shm
        "--no-zygote", // Disable zygote process for sandboxing
        // We have to disable security features, so that the browser can load pdf.js from CDN
        // TODO: this is not a safe solution, but might be the fastest fix for now.
        "--disable-web-security",
        "--allow-running-insecure-content",
      ],
      defaultViewport: { width: VIDEO_WIDTH, height: VIDEO_HEIGHT },
    });

    const page = await browser.newPage();

    await page.goto(url);

    // Wait for the slideshow to load
    await sleep(2000);

    const prevBtn = await page.$("#prev");
    const nextBtn = await page.$("#next");

    if (!prevBtn || !nextBtn) {
      throw new Error("No buttons found on the page");
    }

    // Set up the screen recorder
    const recorder = new PuppeteerScreenRecorder(page, recordConfig);

    await recorder.start(output_file);

    let prev = actions[0];
    await sleep(prev.elapsed_millisec);

    for (const next of actions) {
      const delay = next.elapsed_millisec - prev.elapsed_millisec;

      if (next.change_event === change_event.NEXT) {
        await nextBtn.click({ delay: delay });
      } else {
        await prevBtn.click({ delay: delay });
      }

      prev = next;
    }

    await sleep(webcamLength - (prev?.elapsed_millisec ?? 0));

    await recorder.stop();

    return output_file;
  } catch (error) {
    console.error((error as Error).message);
  }
};

无sleep的无效版本 #

export const makeSlideshowVideo = async (
  output_file: string,
  actions: slide_change[],
  url: string,
  webcamLength: number
) => {
  try {
    const executablePath = await chromium.executablePath(
      "https://my-cdn.s3.eu-north-1.amazonaws.com/chromium-v132.0.0-pack.tar"
    );

    const browser = await puppeteer2.launch({
      executablePath,
      args: [
        `--window-size=${VIDEO_WIDTH},${VIDEO_HEIGHT}`,
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--disable-gpu", // Disable GPU hardware acceleration
        "--disable-dev-shm-usage", // Use /tmp instead of /dev/shm
        "--no-zygote", // Disable zygote process for sandboxing
        // We have to disable security features, so that the browser can load pdf.js from CDN
        // TODO: this is not a safe solution, but might be the fastest fix for now.
        "--disable-web-security",
        "--allow-running-insecure-content",
      ],
      defaultViewport: { width: VIDEO_WIDTH, height: VIDEO_HEIGHT },
    });

    const page = await browser.newPage();

    await page.goto(url);

    // Wait for the slideshow to load
    await sleep(2000);

    const prevBtn = await page.$("#prev");
    const nextBtn = await page.$("#next");

    if (!prevBtn || !nextBtn) {
      throw new Error("No buttons found on the page");
    }

    // Set up the screen recorder
    const recorder = new PuppeteerScreenRecorder(page, recordConfig);

    await recorder.start(output_file);

    let prev = null;

    for (const next of actions) {
      const delay = next.elapsed_millisec - (prev?.elapsed_millisec ?? 0);

      if (next.change_event === change_event.NEXT) {
        await nextBtn.click({ delay: delay });
      } else {
        await prevBtn.click({ delay: delay });
      }

      prev = next;
    }

    await sleep(webcamLength - (prev?.elapsed_millisec ?? 0));

    await recorder.stop();

    return output_file;
  } catch (error) {
    console.error((error as Error).message);
  }
};

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