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

O teste de ponta a ponta 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 oferece maneiras de controlar o navegador, simulando a entrada do usuário e observando o estado atual de todas as páginas abertas.

Consulte Como testar extensões do Chrome com o Puppeteer para conferir um tutorial e Testes de unidade para detalhes sobre como criar 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.

Como executar testes no Chrome headless

Ao executar testes como parte de um fluxo de trabalho automatizado, muitas vezes é necessário carregar sua extensão em uma máquina que não tem tela. O novo modo headless do Chrome permite que ele seja executado em um ambiente desacompanhado como este. Inicie o Chrome usando a flag --headless=new. (O modo sem cabeça atualmente é "old" por padrão, que não oferece suporte ao carregamento de extensões). Dependendo da ferramenta de automação escolhida, pode haver uma configuração que adiciona a sinalização automaticamente.

Como definir um ID de extensão

Muitas vezes, é desejá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 nos testes. Para fazer isso, siga as etapas em Manter um ID de extensão consistente.

Como testar páginas de extensões

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 de sua escolha para navegar até esses URLs.

Como testar um pop-up de extensão

No momento, não é possível abrir um pop-up de extensão no contexto de outra página. Em vez disso, abra o URL do pop-up em uma nova guia. Se o pop-up usar a guia ativa, considere implementar 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 parseInt(URL_PARAMS.get("tab"));
  }

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

  return tabs[0];
}

Como inspecionar o estado da extensão

Para evitar falhas de teste ao mudar o comportamento interno da extensão, é recomendável 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 pode ser desejável acessar diretamente os dados 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 a interrupção de um worker de serviço

Para saber mais sobre como testar a interrupção do service worker, consulte Como testar a interrupção do service worker com o Puppeteer. Também temos um exemplo para Puppeteer e Selenium.

Ao usar alguns frameworks de teste, os service workers podem não ser encerrados automaticamente, como no uso normal. Esse é o caso do Selenium. Ele depende do ChromeDriver, que anexa um depurador a todos os service workers para impedir que eles sejam interrompidos.