Pruebas de extremo a extremo para las extensiones de Chrome

Las pruebas de extremo a extremo implican la compilación y carga de 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 que pasaría un usuario. Por lo general, una biblioteca que admite pruebas de extremo a extremo proporcionará formas de controlar el navegador, simular la entrada del usuario y observar el estado actual de las páginas abiertas.

Consulta Cómo probar las extensiones de Chrome con Puppeteer para ver un instructivo y Prueba de unidades si quieres obtener detalles sobre cómo escribir pruebas de unidades para las extensiones de Chrome.

Cómo usar bibliotecas de prueba del navegador

Las extensiones son compatibles con varias bibliotecas de prueba.

Biblioteca	Orientación
Marioneta o dramaturgo	Consulta Extensiones de Chrome (Puppeteer / Playwright).
Selenio	Usa el objeto ChromeOptions para cargar extensiones. Obtén más información aquí.
WebDriverIO	Consulta Pruebas de extensiones web.

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 tu extensión en una máquina que no tiene pantalla. El nuevo modo sin interfaz gráfica de Chrome permite que Chrome se ejecute en un entorno sin actividad, como este. Inicia Chrome con la marca --headless=new (actualmente, la versión sin interfaz gráfica es "anterior", lo que no admite la carga de extensiones). Según la herramienta de automatización que elijas, es posible que haya una configuración que agregue la marca automáticamente.

Cómo configurar un ID de extensión

A menudo, se recomienda tener un ID de extensión fijo en las pruebas. De esta manera, se facilitan muchas tareas comunes, como incluir el origen de la extensión en la lista de entidades permitidas en un servidor con el que necesita comunicarse o abrir páginas de extensiones en las pruebas. Para ello, sigue los pasos que se indican en Cómo mantener un ID de extensión coherente.

Prueba las páginas de extensiones

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

Cómo probar una ventana emergente de una 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 utiliza la pestaña activa, considera implementar una anulación en la que el ID de pestaña se pueda pasar de forma explícita a tu 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];
}

Inspecciona el estado de la extensión

Para evitar fallas en las pruebas cuando cambias el comportamiento interno de tu extensión, se recomienda evitar el acceso al estado interno en una prueba de integración. En cambio, debes basar tus pruebas en lo que es visible para el usuario. 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 extensiones.

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 selenio:

// 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 service worker

Para obtener más información sobre cómo probar la finalización de service worker, consulta cómo probar la finalización de service worker con Puppeteer. También tenemos una muestra para Puppeteer y Selenium.

Ten en cuenta que, cuando uses algunos frameworks de prueba, es posible que los service workers no finalicen automáticamente como lo harían en un uso normal. Este es el caso en "Selenio". Depende de ChromeDriver, que adjunta un depurador a todos los service workers, lo que evita que se detengan.