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 evalúan la funcionalidad de un sitio web o una extensión una vez que se compila en el producto final. En este instructivo, demostramos 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 demostración 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 basa Puppeteer.

Cómo escribir tu prueba

Paso 1: Inicia tu proyecto de Node.JS

Debemos configurar un proyecto Node.JS básico. 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, todos los proyectos de Node requieren este archivo.

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 una 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, esto no se recomienda, ya que reduce el aislamiento entre tus 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 al 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 terminan 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

Establezcamos una aserción para que la prueba falle si la extensión no se comporta como se espera. Sabemos que la ventana emergente debe mostrar las páginas visitadas recientemente. Por lo tanto, verifiquemos si se muestra 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 se aprobó.

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 paquete de pruebas para tu propia extensión. La referencia de la API de Puppeteer contiene más información sobre las posibilidades. Hay muchas capacidades que no se describen aquí.