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

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

Cómo usar bibliotecas de pruebas del 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 tu extensión en una máquina que no tiene pantalla. El nuevo modo sin interfaz gráfica de Chrome permite que se ejecute en un entorno desatendido como este. Inicia Chrome con la marca --headless=new (actualmente, headless se establece de forma predeterminada en "old", que no admite la carga de extensiones). Según la herramienta de automatización que elijas, es posible que haya un parámetro de configuración que agregue la marca automáticamente.

Cómo establecer 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 agregar el origen de la extensión a la lista de entidades permitidas en un servidor con el que necesita comunicarse o abrir páginas de extensión en pruebas. Para ello, sigue los pasos que se indican en Cómo mantener un ID de extensión coherente.

Cómo probar las páginas de extensiones

Se puede acceder a las páginas de extensión con su 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

Con algunas bibliotecas, es posible que puedas abrir la ventana emergente con la API de action.openPopup() y, luego, obtener una referencia al nuevo contexto. Por ejemplo, Puppeteer documenta cómo hacerlo en su guía de extensiones de Chrome.

Si esto no es posible en la biblioteca que elegiste, 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 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 await chrome.tabs.get(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 en las pruebas cuando cambias el comportamiento interno de tu extensión, en general, se recomienda evitar el acceso al estado interno en una prueba de integración. En cambio, debes basar tus pruebas en lo que ve el usuario. Sin embargo, a veces puede ser conveniente acceder directamente a los datos de 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);'
);

Cómo probar la finalización del service worker

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

Ten en cuenta que, cuando se usan algunos frameworks de prueba, es posible que los service workers no finalicen automáticamente como lo harían en el uso normal. Este es el caso de Selenium. Se basa en ChromeDriver, que adjunta un depurador a todos los service workers, lo que impide que se detengan.