Testare le estensioni di Chrome con Puppeteer

Puppeteer fornisce un framework per la creazione di test automatici dei siti web, che include anche la possibilità di testare le estensioni di Chrome. Si tratta di test end-to-end di alto livello che verificano la funzionalità di un sito web o di un'estensione dopo che sono stati integrati nel prodotto finale. In questo tutorial, dimostriamo come scrivere un test di base per un'estensione dal nostro repository di esempi.

Prima di iniziare

Clona o scarica il repository chrome-extensions-samples. Utilizzeremo la demo dell'API History in api-samples/history/showHistory come estensione di test.

Dovrai anche installare Node.JS, il runtime su cui è basato Puppeteer.

Scrivere il test

Passaggio 1: avvia il progetto Node.js

Dobbiamo configurare un progetto Node.JS di base. In una nuova cartella, crea un file package.json con quanto segue:

pacakge.json:

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

Analogamente al file manifest.json di un'estensione, questo file è obbligatorio per tutti i progetti Node.

Passaggio 2: installa Puppeteer e Jest

Esegui npm install puppeteer jest per aggiungere Puppeteer e Jest come dipendenze. Verranno aggiunti automaticamente al file package.json.

È possibile scrivere test Puppeteer autonomi, ma utilizzeremo Jest come test runner per fornire alcune strutture aggiuntive al nostro codice.

Passaggio 3: crea un punto di contatto

Crea un nuovo file denominato index.test.js e aggiungi il seguente codice:

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.
});

Passaggio 4: avvia il browser

Aggiorna beforeEach e afterEach per avviare e chiudere il browser. Quando esegui molti test, potrebbe essere consigliabile utilizzare lo stesso browser. Tuttavia, in genere questa operazione non è consigliata perché riduce l'isolamento tra i test e potrebbe causare l'impatto di un test sul risultato di un altro.

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

Passaggio 5: aggiungi un alias

Per semplificare l'esecuzione dei test, aggiungi un alias al file package.json:

package.json:

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

Verranno eseguiti tutti i file che terminano con .test.js nella directory corrente.

Passaggio 6: apri il popup

Aggiungiamo un test di base che apra il popup in una nuova pagina. Dobbiamo farlo perché Puppeteer non supporta l'accesso a un popup dell'estensione dalla finestra popup. Aggiungi il seguente codice:

index.test.js:

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

Passaggio 7: verifica lo stato corrente

Facciamo un'affermazione, in modo che il test possa non riuscire se l'estensione non si comporta come previsto. Sappiamo che il popup dovrebbe mostrare le pagine visitate di recente, quindi controlliamo che sia presente:

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

Passaggio 8: esegui il test

Per eseguire il test, utilizza npm start. Dovresti vedere un output che indica che il test è stato superato.

Puoi visualizzare il progetto completo nel nostro repository chrome-extensions-samples.

Passaggi successivi

Dopo aver appreso le nozioni di base, prova a creare una suite di test per la tua estensione. La documentazione di riferimento dell'API di Puppeteer contiene ulteriori informazioni sulle possibilità offerte, poiché esistono molte funzionalità non descritte qui.