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 as interações e testar os mesmos fluxos que um usuário passa. Uma biblioteca compatível com testes completos geralmente oferece maneiras de controlar o navegador, simulando a entrada do usuário e observando o estado atual das páginas abertas.

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

Como usar bibliotecas de teste do navegador

As extensões oferecem suporte a várias bibliotecas de teste.

Biblioteca	Orientação
Puppeteer / Dramaturgo	Consulte Extensões do Chrome (Puppeteer / Playwright).
Selênio	Use o objeto ChromeOptions para carregar extensões. Confira mais informações neste link.
WebDriverIO	Consulte Testes de extensão da Web.

Execução de testes na versão headless do Chrome

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 tenha tela. O novo modo headless do Chrome permite que o Chrome seja executado em um ambiente autônomo como esse. Inicie o Chrome usando a flag --headless=new. No momento, a opção headless atualmente é "old" (antigo), que não oferece suporte ao carregamento de extensões. Dependendo da ferramenta de automação escolhida, pode haver uma configuração que adicione a flag automaticamente.

Como configurar um ID de extensão

Muitas vezes, é desejável ter um ID de extensão fixo em testes. Isso facilita muitas tarefas comuns, como colocar a origem da extensão na lista de permissões em um servidor com que ela precisa se comunicar ou abrir páginas de extensões em testes. Para fazer isso, siga as etapas em Como manter um código de extensão consistente.

Testar páginas de extensão

As páginas de extensões 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 preferência para acessar 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 usa a guia ativa, implemente uma substituição em que um ID da guia possa ser transmitido explicitamente para ele. 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, a prática recomendada geralmente é evitar o acesso ao estado interno em um teste de integração. Em vez disso, baseie seus testes no que está 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 o encerramento do service worker

Para saber mais sobre como testar o encerramento do service worker, consulte Como testar o encerramento do service worker com o Puppeteer. Também temos uma amostra para o Puppeteer e o Selenium.

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