Pruebas de extremo a extremo para las extensiones de Chrome

Las pruebas de extremo a extremo implican que se compila y carga un paquete de extensión en un navegador. Una herramienta de prueba se comunica con el navegador para automatizar las interacciones y probar los mismos flujos por los que pasaría un usuario. Por lo general, una biblioteca compatible con pruebas de extremo a extremo proporcionará maneras de controlar el navegador, simular las entradas del usuario y observar el estado actual de las páginas abiertas.

Consulta Cómo probar extensiones de Chrome con Puppeteer para obtener un instructivo y Pruebas de unidades para obtener detalles sobre cómo escribir pruebas de unidades para extensiones de Chrome.

Usa bibliotecas de pruebas de navegador

Las extensiones son compatibles con una variedad de bibliotecas de prueba.

Cómo ejecutar pruebas en Chrome sin interfaz gráfica

Cuando ejecutas pruebas como parte de un flujo de trabajo automatizado, a menudo es necesario cargar la extensión en una máquina que no tenga pantalla. El nuevo modo sin interfaz gráfica de Chrome permite que se ejecute en un entorno sin supervisión como este. Inicia Chrome con la marca --headless=new (actualmente, la opción sin interfaz gráfica es "antigua", que no admite la carga de extensiones). Según la herramienta de automatización que elijas, puede haber una configuración que agregue la marca automáticamente.

Cómo configurar un ID de extensión

A menudo, es conveniente tener un ID de extensión fijo en las pruebas. Esto facilita muchas tareas comunes, como incluir el origen de la extensión en un servidor con el que necesita comunicarse o abrir páginas de extensiones dentro de las pruebas. Para ello, sigue los pasos que se indican en Cómo mantener un ID de extensión coherente.

Cómo probar páginas de extensiones

Se puede acceder a las páginas de extensiones mediante la URL correspondiente, p. ej., chrome-extension://<id>/index.html. Usa los métodos de navegación normales disponibles en la herramienta de automatización que elijas para navegar a estas URLs.

Cómo probar una ventana emergente de extensión

Por el momento, no es posible abrir una ventana emergente de una extensión en el contexto de otra página. En su lugar, abre la URL de la ventana emergente en una pestaña nueva. Si tu ventana emergente usa la pestaña activa, considera implementar una anulación en la que se pueda pasar un ID de pestaña de forma explícita a la ventana emergente. Por ejemplo:

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];
}

Cómo inspeccionar el estado de la extensión

Para evitar fallas de prueba cuando cambias el comportamiento interno de tu extensión, por lo general, se recomienda evitar el acceso al estado interno en una prueba de integración. En cambio, debes basar tus pruebas en lo que el usuario puede ver. Sin embargo, a veces puede ser conveniente acceder directamente a los datos desde la extensión. En estos casos, considera ejecutar el código en el contexto de una página de extensión.

En 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');
});

En 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);'
);

Prueba la finalización de los service workers

Para obtener información sobre cómo probar la finalización del trabajador de servicio, consulta cómo probar la finalización del trabajador de servicio con Puppeteer. También tenemos un ejemplo para Puppeteer y Selenium.

Ten en cuenta que, cuando usas algunos frameworks de pruebas, es posible que los trabajadores del servicio no finalicen automáticamente como lo harían en el uso normal. Este es el caso de Selenium. Depende de ChromeDriver, que adjunta un depurador a todos los trabajadores de servicio para evitar que se detengan.