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

Puppeteer ahora se comunica con Firefox. 🎉 Espera un momento, ¿no es así? 🤔 Analicemos WebDriver BiDi, el nuevo protocolo de Puppeteer, y descubramos qué significa este emocionante desarrollo para el flujo de trabajo de automatización de Firefox.

WebDriver BiDi es un nuevo protocolo de automatización multinavegador estandarizado que combina lo mejor de WebDriver Classic y el Protocolo de herramientas para desarrolladores de Chrome (CDP). Promete una comunicación bidireccional, lo que permite una automatización más eficiente y capaz, y un control detallado. Puedes hacer un seguimiento del progreso en la ruta de planificación oficial.

Desde nuestra actualización de estado anterior, seguimos trabajando en estrecha colaboración con el grupo de trabajo de herramientas y pruebas de navegadores del W3C. Puppeteer ahora implementa funciones como registros, eventos de red y envíos de formularios, gracias a los avances de BiDi de WebDriver.

Muéstrame el código

El siguiente guion de Puppeteer muestra WebDriver BiDi en acción y funciona a la perfección en Chrome y Firefox:

  1. Inicia el navegador que elegiste con la configuración del 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 BiDi de WebDriver en Puppeteer

Para evaluar las capacidades de WebDriver BiDi en Puppeteer, usamos el paquete de pruebas completo de Puppeteer. Si bien la implementación de Puppeteer y WebDriver BiDi aún está en curso y aún no tiene todas las funciones de Puppeteer con Chrome y CDP, queremos brindarte una idea clara de la situación.

Firefox:

  • WebDriver BiDi alcanzó un nivel de calidad adecuado para tareas de automatización prácticas. 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 superan correctamente con WebDriver BiDi, lo que demuestra su creciente funcionalidad.
  • En particular, más de 82 pruebas nuevas usan WebDriver BiDi de manera eficiente, lo que allana el camino para más mejoras.

Chrome:

  • Actualmente, Chrome obtiene una tasa de aprobación del 68% con WebDriver BiDi, lo que demuestra una funcionalidad confiable. Si bien hay margen para una mayor optimización en comparación con el enfoque basado en CDP, esto promete desarrollos futuros emocionantes.

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 proceso de 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.

¿No era compatible con Firefox?

Si bien Puppeteer anteriormente ofrecía compatibilidad experimental con Firefox mediante una implementación limitada y no multinavegador de CDP, tenía limitaciones y no era una solución sostenible.

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

Sabemos que es posible que tengas más preguntas, como las siguientes:

  • ¿La compatibilidad de Firefox con 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.

Tiempos emocionantes por delante

Las pruebas multinavegador son una de las principales necesidades de los desarrolladores, por lo que nos complace liderar la integración de WebDriver BiDi en Puppeteer, que marca un punto de inflexión hacia una experiencia de automatización multinavegador más fluida y eficiente. Te recomendamos que explores WebDriver BiDi con Puppeteer.

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

Si tienes algún problema cuando ejecutas pruebas de Puppeteer con BiDi de WebDriver, abre los problemas en nuestro registro de problemas de Puppeteer.