Prueba las extensiones de Chrome con Puppeteer

Puppeteer proporciona un framework para compilar pruebas automatizadas de sitios web, que también incluye la capacidad de probar extensiones de Chrome. Estas son pruebas de extremo a extremo de alto nivel que prueban la funcionalidad de un sitio web o una extensión una vez que se compilan en el producto final. En este instructivo, mostramos cómo escribir una prueba básica para una extensión desde nuestro repositorio de muestras.

Antes de comenzar

Clona o descarga el repositorio chrome-extensions-samples. Usaremos la demo de la API de History en api-samples/history/showHistory como nuestra extensión de prueba.

También deberás instalar Node.JS, que es el entorno de ejecución en el que se compila Puppeteer.

Cómo escribir tu prueba

Paso 1: Inicia tu proyecto de Node.JS

Necesitamos configurar un proyecto básico de Node.JS. En una carpeta nueva, crea un archivo package.json con lo siguiente:

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

Al igual que el archivo manifest.json de una extensión, este archivo es obligatorio para todos los proyectos de Node.

Paso 2: Instala Puppeteer y Jest

Ejecuta npm install puppeteer jest para agregar Puppeteer y Jest como dependencias. Se agregarán automáticamente a tu archivo package.json.

Es posible escribir pruebas independientes de Puppeteer, pero usaremos Jest como ejecutor de pruebas para proporcionar alguna estructura adicional a nuestro código.

Paso 3: Crea un punto de entrada

Crea un archivo nuevo llamado index.test.js y agrega el siguiente código:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

Paso 4: Inicia el navegador

Actualiza beforeEach y afterEach para iniciar y cerrar el navegador. Cuando ejecutes muchas pruebas, te recomendamos que uses el mismo navegador. Sin embargo, por lo general, no se recomienda, ya que reduce el aislamiento entre las pruebas y puede hacer que una prueba afecte el resultado de otra.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Paso 5: Agrega un alias

Para facilitar la ejecución de las pruebas, agrega un alias a tu archivo package.json:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

Esto ejecutará todos los archivos que terminen en .test.js en el directorio actual.

Paso 6: Abre la ventana emergente

Agreguemos una prueba básica que abra la ventana emergente en una página nueva. Debemos hacerlo porque Puppeteer no admite el acceso a una ventana emergente de extensión desde la ventana emergente. Agrega el siguiente código:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

Paso 7: Confirma el estado actual

Hagamos una afirmación para que nuestra prueba falle si la extensión no se comporta como se espera. Sabemos que nuestra ventana emergente debe mostrar las páginas visitadas recientemente, así que verifiquemos que veamos una:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

Paso 8: Ejecuta la prueba

Para ejecutar la prueba, usa npm start. Deberías ver un resultado que indique que la prueba fue exitosa.

Puedes ver el proyecto completo en nuestro repositorio chrome-extensions-samples.

Próximos pasos

Después de dominar los conceptos básicos, intenta compilar un conjunto de pruebas para tu propia extensión. La referencia de la API de Puppeteer contiene más información sobre lo que es posible. Hay muchas funciones que no se describen aquí.