Aprovecha la potencia de WebDriver BiDi: automatización de Chrome y Firefox con Puppeteer

Puppeteer ahora habla con Firefox 🎉 Pero espera, ¿no es así? 🤔 Profundicemos en WebDriver BiDi, el nuevo protocolo de Puppeteer y descubramos lo que este emocionante desarrollo significa para el flujo de trabajo de automatización de Firefox.

WebDriver BiDi es un nuevo protocolo de automatización estandarizado para varios navegadores que combina lo mejor de la versión clásica de WebDriver y el protocolo para desarrolladores de Chrome (CDP). Promete comunicación bidireccional, lo que permite una automatización más eficiente y capaz, además de un control detallado. Puedes hacer un seguimiento de su progreso en la hoja de ruta oficial.

Desde nuestra actualización de estado anterior, continuamos trabajando estrechamente con el Grupo de trabajo de herramientas y pruebas del navegador W3C. Puppeteer ahora implementa funciones como registro, eventos de red y envíos de formularios, gracias a los avances de WebDriver BiDi.

Muéstrame el código

La siguiente secuencia de comandos de Puppeteer muestra WebDriver BiDi en acción y funciona sin problemas en Chrome y Firefox:

  1. Inicia el navegador que elegiste con la configuración de protocolo.
  2. Supervisa los mensajes de la consola en busca de errores.
  3. Navega a una página web, establece las dimensiones del viewport y haz clic en un botón.
  4. Verifica el contenido del texto y afirma la igualdad.
import * as assert from 'node:assert'; 
import puppeteer from 'puppeteer';

// Arrange: Launch browser with WebDriver BiDi
const browser = await puppeteer.launch({
  protocol: 'webDriverBiDi',
     product: 'firefox', // or 'chrome'
});
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

// Arrange: Monitor console messages
page.on('console', message => {
  if (message.type() != 'error') return;
  console.log('RECEIVED: %s', message.text());
});

// Action
await page.setViewport({width: 600, height: 1041});
await page.goto('https://coffee-cart.app/?breakable=1');

const coffee = await page.waitForSelector('[data-test="Espresso"]');
await coffee.click();

// Assert 
const checkout = await page.$('[data-test="checkout"]');
const total = await checkout.evaluate(el => el.textContent);
assert.equal(total, 'Total: $10.00');

browser.close();

Progreso de WebDriver BiDi en Puppeteer

Para medir las capacidades de WebDriver BiDi en Puppeteer, utilizamos el paquete de pruebas completo de Puppeteer. Si bien la implementación de Puppeteer y WebDriver BiDi sigue en desarrollo y todavía no cuenta con todas las funciones adicionales de Puppeteer con Chrome y CDP, queremos brindarte una imagen clara de su situación.

Firefox:

  • WebDriver BiDi alcanzó un nivel de calidad adecuado para tareas prácticas de automatización. Mozilla portó correctamente las pruebas de Puppeteer para pdf.js de Firefox y CDP a Firefox y WebDriver BiDi.
  • Más del 55% de las pruebas se aprueban con WebDriver BiDi, lo que demuestra su creciente funcionalidad.
  • Cabe destacar que más de 82 pruebas nuevas usan WebDriver BiDi de manera eficiente, lo que prepara el camino para mejoras adicionales.

Chrome:

  • Actualmente, Chrome está alcanzando un 68% de aprobación con WebDriver BiDi, lo que demuestra una funcionalidad confiable. Aunque es posible una mayor optimización en comparación con el enfoque basado en CDP, estos prometedores avances futuros prometedores

Algunas funciones, como el acceso a cookies, la intercepción de solicitudes de red, las funciones de emulación específicas y los permisos, aún se encuentran en estandarización activa. Se integrarán en Puppeteer una vez que estén listos. Mientras tanto, consulta la lista completa de funciones de Puppeteer compatibles con WebDriver BiDi.

Puppeteer no ya era compatible con Firefox.

Si bien anteriormente Puppeteer ofrecía compatibilidad experimental para Firefox mediante una implementación de CDP limitada y que no se permitía entre navegadores, tenía limitaciones y no era una solución sustentable.

La nueva implementación experimental de Firefox y WebDriver BiDi aborda estos problemas.

Sabemos que podrías tener otras preguntas, como las siguientes:

  • ¿La compatibilidad de Firefox para CDP dejará de estar disponible?
  • ¿Se admiten todas las funciones de Puppeteer?

Para obtener respuestas detalladas y más información, consulta el anuncio exclusivo de Firefox.

Momentos emocionantes

Las pruebas en distintos navegadores han sido una de las principales necesidades de los desarrolladores, por lo que nos emociona liderar la integración de WebDriver BiDi en Puppeteer, lo que marca un punto de inflexión hacia una experiencia de automatización entre navegadores más fluida y eficiente. Te recomendamos explorar WebDriver BiDi con Puppeteer.

De cara al futuro, WebDriver BiDi se convertirá en el protocolo predeterminado de Puppeteer, lo que preparará el camino para una experiencia de automatización coherente y potenciada.

Si tienes algún problema cuando ejecutes pruebas de Puppeteer con WebDriver BiDi, consulta los problemas en nuestra Herramienta de seguimiento de errores de Puppeteer.