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 conhecer o 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 entre navegadores padronizado que combina o melhor do WebDriver Classic e do protocolo Chrome DevTools (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 nossa última atualização de status, continuamos trabalhando em estreita colaboração com o Grupo de trabalho de ferramentas e testes de navegador do W3C. Graças aos avanços do WebDriver BiDi, o Puppeteer agora implementa recursos como geração de registros, eventos de rede e envios de formulários.

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 BiDi do Puppeteer e do WebDriver 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. O Mozilla fez a portabilidade dos 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 padronização ativa. Elas serão integradas ao Puppeteer assim que estiverem prontas. Enquanto isso, confira a lista completa de recursos do Puppeteer com suporte do WebDriver BiDi.

O Puppeteer já não era compatível com o Firefox?

Embora anteriormente o Puppeteer oferecia suporte experimental ao Firefox usando uma implementação limitada do CDP em navegadores diferentes e não entre navegadores, 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

O teste entre navegadores tem sido uma das principais necessidades do desenvolvedor, por isso estamos animados em liderar a integração do WebDriver BiDi ao Puppeteer, o que marca um ponto de virada para uma experiência de automação entre navegadores mais contínua 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 algum problema durante a execução de testes do Puppeteer com o WebDriver BiDi, consulte os problemas em nosso Issue Tracker do Puppeteer (em inglês).