Testar extensões do Chrome com o Puppeteer

O Puppeteer oferece uma estrutura para criar testes automatizados de sites, que também inclui a capacidade de testar extensões do Chrome. São testes de ponta a ponta de alto nível que testam a funcionalidade de um site ou extensão depois que ele é integrado ao produto final. Neste tutorial, mostramos como escrever um teste básico para uma extensão do nosso repositório de exemplos.

Antes de começar

Clone ou faça o download do repositório chrome-extensions-samples. Vamos usar 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.

Escrever o teste

Etapa 1: iniciar o 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:

package.json:

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

Semelhante ao 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. Eles serão adicionados automaticamente ao arquivo package.json.

É possível escrever testes independentes do Puppeteer, mas vamos usar o Jest como um executor de testes para fornecer alguma estrutura adicional ao nosso código.

Etapa 3: criar um ponto de entrada

Crie um 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';

let browser;
let worker;

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 muitos testes, considere usar 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,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

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

Etapa 5: aguardar o service worker da extensão

Precisamos esperar que o service worker da extensão seja iniciado para que possamos usá-lo mais tarde para abrir o pop-up. Atualize a função beforeEach com o seguinte código:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

Etapa 6: 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": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

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

Etapa 7: abrir o pop-up

Adicione um teste básico. Primeiro, vamos abrir uma nova página para que haja um item no histórico do navegador. Em seguida, vamos abrir o pop-up para ver o conteúdo do histórico. Adicione o seguinte código:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

Etapa 8: declarar o estado atual

Faça uma declaração para que o teste falhe se a extensão não estiver funcionando como esperado. Sabemos que nosso pop-up deve mostrar as páginas visitadas recentemente. Portanto, verifique se uma delas aparece:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

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

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

Etapa 9: 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 repositório chrome-extensions-samples.

Próximas etapas

Depois de dominar os conceitos básicos, tente criar 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 fazer. Há muitos recursos não descritos aqui.