Testar extensões do Chrome com o Puppeteer

O Puppeteer fornece um framework para a criação de testes automatizados de sites, que também inclui a capacidade de testar as extensões do Chrome. Eles são testes completos de alto nível que testam a funcionalidade de um site ou extensão depois que ele é integrado ao produto final. Neste tutorial, demonstramos como criar um teste básico para uma extensão a partir do nosso repositório de amostras.

Antes de começar

Clone ou faça o download do repositório chrome-extensions-samples. Vamos usar a demonstração da API de histórico em api-samples/history/showHistory como extensão de teste.

Também é preciso instalar o Node.JS, que é o ambiente de execução do Puppeteer.

Como criar o teste

Etapa 1: iniciar o projeto em Node.JS

Precisamos configurar um projeto básico do Node.JS. Em uma nova pasta, crie um arquivo package.json com o seguinte:

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

Semelhante ao arquivo manifest.json de uma extensão, esse arquivo é exigido por todos os projetos do Node.

Etapa 2: instalar o Puppeteer e o Jest

Execute npm install puppeteer jest para adicionar o Puppeteer e o Jest como dependências. Eles serão adicionados automaticamente ao arquivo package.json.

É possível escrever testes do Puppeteer autônomos, mas usaremos o Jest como um executor de testes para fornecer uma estrutura adicional ao código.

Etapa 3: criar um ponto de entrada

Crie um novo arquivo chamado index.test.js e adicione o seguinte código:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

Etapa 4: iniciar o navegador

Atualize o beforeEach e o afterEach para iniciar e fechar o navegador. Ao executar muitos testes, use o mesmo navegador. No entanto, isso geralmente não é recomendado, porque reduz o isolamento entre os testes e pode fazer com que um teste afete o resultado de outro.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Etapa 5: adicionar um alias

Para facilitar a execução dos testes, adicione um alias ao arquivo package.json:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

Isso executará todos os arquivos que terminam em .test.js no diretório atual.

Etapa 6: abrir o pop-up

Vamos adicionar um teste básico que abre o pop-up em uma nova página. Precisamos fazer isso porque o Puppeteer não é compatível com o acesso a um pop-up de extensão da janela pop-up. Adicione o código abaixo:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

Etapa 7: declarar o estado atual

Vamos declarar algo para que o teste falhe se a extensão não estiver se comportando conforme o esperado. Sabemos que nosso pop-up deve mostrar as páginas visitadas recentemente. Portanto, verifique se encontramos uma delas:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

Etapa 8: executar o teste

Para executar o teste, use npm start. Você vai receber uma saída indicando que o teste foi aprovado.

Confira o projeto completo no repositório chrome-extensions-samples.

Próximas etapas

Depois de dominar os conceitos básicos, tente criar um pacote de testes para sua própria extensão. A referência da API do Puppeteer contém mais informações sobre o que é possível. Há muitos recursos não descritos aqui.