Testes de ponta a ponta das extensões do Google Chrome

O teste completo envolve a criação e o carregamento de um pacote de extensão em um navegador. Uma ferramenta de teste se comunica com o navegador para automatizar interações e testar os mesmos fluxos que um usuário passaria. Uma biblioteca que oferece suporte a testes de ponta a ponta geralmente fornece maneiras de controlar o navegador, simular a entrada do usuário e observar o estado atual de todas as páginas abertas.

Consulte Testar extensões do Chrome com o Puppeteer para um tutorial e Teste de unidade para detalhes sobre como escrever testes de unidade para extensões do Chrome.

Como usar bibliotecas de teste de navegador

As extensões são compatíveis com várias bibliotecas de teste.

Executar testes no Chrome sem interface gráfica

Ao executar testes como parte de um fluxo de trabalho automatizado, muitas vezes é necessário carregar a extensão em uma máquina sem tela. O novo modo headless do Chrome permite que ele seja executado em um ambiente autônomo como este. Inicie o Chrome usando a flag --headless=new. (No momento, o modo sem interface gráfica usa o padrão "old", que não permite carregar extensões.) Dependendo da ferramenta de automação escolhida, pode haver uma configuração que adicione a flag automaticamente.

Definir um ID de extensão

Muitas vezes, é recomendável ter um ID de extensão fixo nos testes. Isso facilita muitas tarefas comuns, como adicionar a origem da extensão à lista de permissões em um servidor com que ela precisa se comunicar ou abrir páginas de extensão em testes. Para fazer isso, siga as etapas em Manter um ID de extensão consistente.

Testar páginas de extensão

As páginas de extensão podem ser acessadas usando o URL correspondente, por exemplo, chrome-extension://<id>/index.html. Use os métodos de navegação normais disponíveis na ferramenta de automação escolhida para acessar esses URLs.

Testar um pop-up de extensão

Com algumas bibliotecas, é possível abrir o pop-up usando a API action.openPopup() e depois receber uma referência ao novo contexto. O Puppeteer, por exemplo, documenta como fazer isso no guia de extensões do Chrome.

Se isso não for possível na biblioteca escolhida, abra o URL do pop-up em uma nova guia. Se o pop-up usar a guia ativa, implemente uma substituição em que um ID de guia possa ser transmitido explicitamente para o pop-up. Exemplo:

const URL_PARAMS = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return await chrome.tabs.get(parseInt(URL_PARAMS.get("tab")));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

Inspeção do estado da extensão

Para evitar falhas de teste ao mudar o comportamento interno da extensão, a prática recomendada é evitar o acesso ao estado interno em um teste de integração. Em vez disso, baseie seus testes no que é visível para o usuário. No entanto, às vezes, é interessante acessar dados diretamente da extensão. Nesses casos, considere executar o código no contexto de uma página de extensão.

No Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

No Selenium:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

Como testar o encerramento do service worker

Para saber como testar o encerramento do service worker, consulte testar o encerramento do service worker com o Puppeteer. Também temos um exemplo para Puppeteer e Selenium.

Ao usar algumas estruturas de teste, os service workers podem não ser encerrados automaticamente como fariam em uso normal. É o caso do Selenium. Ele depende do ChromeDriver, que anexa um depurador a todos os service workers, impedindo que eles sejam interrompidos.