Anunciando o suporte oficial do Puppeteer para Firefox – Mozilla Hacks

Temos o prazer de anunciar que, a partir da versão 23, a biblioteca de automação do navegador Puppeteer agora tem suporte de primeira classe para Firefox. Isso significa que agora é fácil escrever automação e realizar testes ponta a ponta usando o Puppeteer e executá-lo no Chrome e no Firefox.

Como usar o Puppeteer com Firefox

Para começar, basta definir o produto como “firefox”Ao iniciar o Puppeteer:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  browser: "firefox"
});

const page = await browser.newPage();
// ...
await browser.close();

Tal como acontece com o Chrome, o Puppeteer é capaz de baixar e iniciar a versão estável mais recente do Firefox, portanto, a execução em qualquer um dos navegadores deve oferecer a mesma experiência de desenvolvedor que os usuários do Puppeteer esperam.

Embora os recursos oferecidos pelo Puppeteer não sejam uma surpresa, trazer suporte para vários navegadores tem sido uma tarefa significativa. O suporte do Firefox não é baseado em um protocolo de automação específico do Firefox, mas no WebDriver BiDi, um protocolo cross-browser que está sendo padronizado no W3C e atualmente tem implementação no Gecko e no Chromium. Esse uso de um protocolo entre navegadores deve tornar muito mais fácil o suporte a muitos navegadores diferentes daqui para frente.

Posteriormente nesta postagem, mergulharemos em alguns dos conhecimentos mais técnicos por trás do WebDriver BiDi. Mas primeiro gostaríamos de salientar que o anúncio de hoje é uma grande demonstração de como a colaboração produtiva pode promover o estado da arte na web. Desenvolver um novo protocolo de automação de navegador dá muito trabalho, e muito obrigado à equipe do Puppeteer e aos outros membros do Grupo de Trabalho de Testes e Ferramentas de Navegador do W3C, por todos os seus esforços para nos levar até este ponto.

Você também pode conferir a postagem da equipe do Puppeteer sobre como preparar a produção do WebDriver BiDi.

Principais recursos

Para usuários antigos do Puppeteer, os recursos disponíveis são familiares. No entanto, para pessoas em outros ecossistemas de automação e teste – particularmente aqueles que até recentemente dependiam inteiramente do WebDriver baseado em HTTP – esta seção descreve algumas das novas funcionalidades que o WebDriver BiDi torna possível implementar em vários navegadores.

Captura de mensagens de log

Um requisito comum ao testar aplicativos web é garantir que não haja erros inesperados relatados ao console. Este também é um caso em que um protocolo baseado em eventos se destaca, pois evita a necessidade de pesquisar o navegador em busca de novas mensagens de log.

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  browser: "firefox"
});

const page = await browser.newPage();
page.on('console', msg => {
  console.log(`[console] ${msg.type()}: ${msg.text()}`);
});

await page.evaluate(() => console.debug('Some Info'));
await browser.close();

Saída:

[console] debug: Some Info

Emulação de dispositivo

Muitas vezes, ao testar um layout reativo, é útil garantir que o layout funcione bem em diversas dimensões de tela e proporções de pixels do dispositivo. Isso pode ser feito usando um navegador móvel real, em um dispositivo ou em um emulador. No entanto, para simplificar, pode ser útil realizar o teste em um desktop configurado para imitar a janela de visualização de um dispositivo móvel. O exemplo abaixo mostra o carregamento de uma página com o Firefox configurado para emular o tamanho da janela de visualização e a proporção de pixels do dispositivo de um telefone Pixel 5.

import puppeteer from "puppeteer";

const device = puppeteer.KnownDevices["Pixel 5"];

const browser = await puppeteer.launch({
  browser: "firefox"
});

const page = await browser.newPage();
await page.emulate(device);

const viewport = page.viewport();

console.log(
  `[emulate] Pixel 5: ${viewport.width}x${viewport.height}` +
  ` (dpr=${viewport.deviceScaleFactor}, mobile=${viewport.isMobile})`
);

await page.goto("https://www.mozilla.org");
await browser.close();

Saída:

[emulate] Pixel 5: 393x851 (dpr=3, mobile=true)

Interceptação de rede

Um requisito comum para testes é ser capaz de rastrear e interceptar solicitações de rede. A interceptação é especialmente útil para evitar solicitações a serviços de terceiros durante os testes e fornecer dados de resposta simulados. Também pode ser usado para lidar com caixas de diálogo de autenticação HTTP e substituir partes da solicitação e resposta, por exemplo, adicionar ou remover cabeçalhos. No exemplo abaixo, usamos a interceptação de solicitação de rede para bloquear todas as solicitações de fontes da web em uma página, o que pode ser útil para garantir que a falha no carregamento dessas fontes não interrompa o layout do site.

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  browser: 'firefox'
});

const page = await browser.newPage();
await page.setRequestInterception(true);

page.on("request", request => {
  if (request.url().includes(".woff2")) {
    // Block requests to custom user fonts.
    console.log(`[intercept] Request aborted: ${request.url()}`);
    request.abort();
  } else {
    request.continue();
  }
});

const response = await page.goto("https://support.mozilla.org");
console.log(
  `[navigate] status=${response.status()} url=${response.url()}`
);
await browser.close();

Saída:

[intercept] Request aborted: https://assets-prod.sumo.prod.webservices.mozgcp.net/static/Inter-Bold.3717db0be15085ac.woff2
[navigate] status=200 url=https://support.mozilla.org/en-US/

Pré-carregar scripts

Freqüentemente, as ferramentas de automação desejam fornecer funcionalidades personalizadas que podem ser implementadas em JavaScript. Embora o WebDriver sempre tenha permitido a injeção de scripts, não foi possível garantir que um script injetado sempre fosse executado antes do início do carregamento da página, impossibilitando evitar corridas entre os scripts da página e o script injetado.

WebDriver BiDi fornece scripts de “pré-carregamento” que podem ser executados antes de uma página ser carregada. Ele também fornece um meio de emitir eventos personalizados de scripts. Isso pode ser usado, por exemplo, para evitar a pesquisa de elementos esperados, mas em vez disso, usar um observador de mutação que é acionado assim que o elemento estiver disponível. No exemplo abaixo esperamos pelo