Aproveite o poder do WebDriver BiDi: automação do Chrome e do Firefox com o Puppeteer

O Puppeteer agora conversa com o Firefox. 🎉 Mas já fez isso, não é? 🤔 Vamos mergulhar no WebDriver BiDi, o novo protocolo do Puppeteer, e descobrir o que esse desenvolvimento incrível significa para o fluxo de trabalho de automação do Firefox.

O WebDriver BiDi é um novo protocolo de automação padronizado entre navegadores que combina o melhor do WebDriver Classic e do Chrome DevTools Protocol (CDP). Ele promete comunicação bidirecional, permitindo uma automação mais eficiente e capaz, além de controle granular. Acompanhe o progresso no plano oficial.

Desde nosso último status, continuamos trabalhando em estreita colaboração com o Grupo de Trabalho de Ferramentas e Testes de Navegação do W3C. O Puppeteer agora implementa recursos como registro, eventos de rede e envios de formulários, graças aos avanços do WebDriver BiDi.

Mostrar o código

O script do Puppeteer a seguir mostra o WebDriver BiDi em ação e funciona perfeitamente no Chrome e no Firefox:

  1. Inicie o navegador escolhido com a configuração de protocolo.
  2. Monitore as mensagens do console para identificar erros.
  3. Navegue até uma página da Web, defina as dimensões da janela de visualização e clique em um botão.
  4. Verifique o conteúdo do texto e declare a igualdade.
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();

Progresso do WebDriver BiDi no Puppeteer

Para avaliar os recursos do WebDriver BiDi no Puppeteer, usamos o pacote de testes completo do Puppeteer. Embora a implementação do Puppeteer e do WebDriver BiDi ainda esteja em andamento e não tenha todos os recursos do Puppeteer com o Chrome e o CDP, queremos dar uma ideia clara de como as coisas estão.

Firefox:

  • O WebDriver BiDi alcançou um nível de qualidade adequado para tarefas práticas de automação. A Mozilla portou os testes do Puppeteer para pdf.js do Firefox e do CDP para o Firefox e o WebDriver BiDi.
  • Mais de 55% dos testes são aprovados com o WebDriver BiDi, demonstrando a crescente funcionalidade.
  • Mais de 82 novos testes usam o WebDriver BiDi de forma eficiente, abrindo caminho para mais melhorias.

Chrome:

  • Atualmente, o Chrome tem uma taxa de aprovação de 68% com o WebDriver BiDi, demonstrando funcionalidade confiável. Embora haja espaço para mais otimização em comparação com a abordagem baseada em CDP, isso promete desenvolvimentos futuros interessantes.

Alguns recursos, como acesso a cookies, interceptação de solicitações de rede, recursos específicos de emulação e permissões, ainda estão em fase ativa de padronização. Elas serão integradas ao Puppeteer quando estiverem prontas. Enquanto isso, confira a lista completa de recursos do Puppeteer com suporte do WebDriver BiDi.

O Puppeteer já não oferece suporte ao Firefox?

Embora o Puppeteer oferecesse suporte experimental para o Firefox usando uma implementação limitada e não compatível com vários navegadores do CDP, ele tinha limitações e não era uma solução sustentável.

A nova implementação experimental do Firefox e do WebDriver BiDi resolve esses problemas.

Sabemos que você pode ter outras dúvidas, como:

  • O suporte do Firefox para CDP vai ser desativado?
  • Todos os recursos do Puppeteer são compatíveis?

Para respostas detalhadas e mais informações, confira o aviso dedicado do Firefox.

Tempos emocionantes pela frente

Os testes entre navegadores são uma das principais necessidades dos desenvolvedores. Por isso, estamos felizes em liderar a integração do WebDriver BiDi no Puppeteer, que marca um ponto de inflexão para uma experiência de automação entre navegadores mais simples e eficiente. Recomendamos que você explore o WebDriver BiDi com o Puppeteer.

No futuro, o WebDriver BiDi vai se tornar o protocolo padrão do Puppeteer, abrindo caminho para uma experiência de automação consistente e aprimorada.

Se você tiver problemas ao executar testes do Puppeteer com o WebDriver BiDi, abra problemas no nosso Issue Tracker do Puppeteer.