Resumen del Problema de Puppeteer

En este artículo se describe un problema que se presenta al utilizar Puppeteer para automatizar clics en una presentación de diapositivas basada en PDF.js. El problema específico es que la primera acción de clic siempre se ejecuta inmediatamente, independientemente del retraso especificado, mientras que las acciones posteriores se ejecutan como se espera.

Acciones Realizadas sin Éxito

Se han intentado varias soluciones para resolver el problema, que incluyen:

1. Esperar un tiempo de espera entre acciones.
2. Intentar hacer clic con JavaScript puro usando page.evaluate y esperar dentro de este.
3. Usar el argumento de retraso integrado de la función click() de Puppeteer y esperar las acciones.
4. Disparar un evento de clic aleatorio antes de los eventos reales.
5. Actualizar Puppeteer a la última versión.
6. Agregar acciones adicionales al inicio del arreglo de acciones.
7. Introducir un valor de retraso codificado en la función de clic.

Posible Bug en Puppeteer o Chromium

Dado que la primera acción se comporta de manera anómala, surge la pregunta de si esto podría ser un error en Puppeteer o Chromium.

Propuesta de Solución

Para abordar este problema, se puede intentar refactorizar el código de la siguiente manera:

1. Asegurarse de que el primer clic tenga un retraso definido. Esto podría hacerse configurando manualmente un retraso antes de la ejecución del primer clic, incluso si el retraso entre los clics es cero.
2. Implementar una pequeña pausa específicamente antes del primer clic, lo que podría ayudar a evitar la ejecución inmediata.

Aquí está un fragmento de código que implementa estas sugerencias:

export const makeSlideshowVideo = async (
  output_file: string,
  actions: slide_change[],
  url: string,
  webcamLength: number
) => {
  try {
    // Código de inicialización ...

    await page.goto(url);
    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");
    }

    const recorder = new PuppeteerScreenRecorder(page, recordConfig);
    await recorder.start(output_file);

    let prev = null;
    // Añadir un pequeño retraso antes del primer clic
    await sleep(100); // Retraso de 100 ms antes del primer clic

    for (const next of actions) {
      const delay = next.elapsed_millisec - (prev?.elapsed_millisec ?? 0);
      await new Promise(resolve => setTimeout(resolve, delay)); // Esperar el retraso programado

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

      prev = next;
    }

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

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

Conclusiones

El problema que se enfrenta con Puppeteer, donde la primera acción de clic se ejecuta de inmediato, puede ser mitigado añadiendo un pequeño retraso antes de la primera acción. También se recomienda considerar arreglos y opciones adicionales si el problema persiste, así como verificar si hay actualizaciones futuras de Puppeteer que aborden esta cuestión.