Testar extensões do Chrome com o Puppeteer

O Puppeteer fornece uma estrutura para criar testes automatizados de sites, que também inclui a capacidade de testar extensões do Chrome. Esses 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 escrever um teste básico para uma extensão do nosso repositório de amostras.

Antes de começar

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

Você também precisa instalar o Node.JS, que é o ambiente de execução em que o Puppeteer é criado.

Como gravar o teste

Etapa 1: iniciar seu projeto Node.JS

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

pacakge.json:

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

Assim como o arquivo manifest.json de uma extensão, esse arquivo é obrigatório para 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. Elas serão adicionadas automaticamente ao arquivo package.json.

É possível escrever testes independentes do Puppeteer, mas vamos usar o Jest como um executor de testes para fornecer mais estrutura ao nosso 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 beforeEach e afterEach para iniciar e fechar o navegador. Ao executar vários 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 vai 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 abra o pop-up em uma nova página. Precisamos fazer isso porque o Puppeteer não oferece suporte ao acesso a um pop-up de extensão na 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 como esperado. Sabemos que nosso pop-up precisa mostrar as páginas visitadas recentemente. Vamos verificar se ele aparece:

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 ver uma saída indicando que o teste foi aprovado.

Confira o projeto completo no nosso repositório de amostras de extensões do Chrome.

Próximas etapas

Depois de dominar os conceitos básicos, crie um conjunto 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 que não são descritos aqui.