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 esempio.

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 inoltre installare Node.JS, che è il runtime basato su Puppeteer.

Scrittura del 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"
}

Simile al file manifest.json di un'estensione, questo file è richiesto da 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 tuo file package.json.

È possibile scrivere test Puppeteer autonomi, ma utilizzeremo Jest come test runner per fornire una struttura aggiuntiva al nostro codice.

Passaggio 3: crea un punto di ingresso

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, ti consigliamo di utilizzare lo stesso browser. Tuttavia, questa soluzione è generalmente sconsigliata, in quanto 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 apre il popup in una nuova pagina. Dobbiamo farlo perché Puppeteer non supporta l'accesso a un popup di 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: afferma lo stato corrente

Assegniamo qualcosa in modo che il test possa non avere esito positivo se l'estensione non si comporta come previsto. Poiché il popup dovrebbe mostrare le pagine visitate di recente, controlliamo che ne vengano visualizzate 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);
});

Passaggio 8: esegui il test

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

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

Passaggi successivi

Dopo aver imparato le nozioni di base, prova a creare una suite di test per la tua estensione. Il riferimento API di Puppeteer contiene ulteriori informazioni sulle possibilità offerte. Ci sono molte funzionalità che non vengono descritte in questo articolo.