Test Chrome-extensies met Puppeteer

Puppeteer biedt een framework voor het bouwen van geautomatiseerde tests voor websites, inclusief de mogelijkheid om Chrome-extensies te testen. Dit zijn end-to-end-tests op hoog niveau die de functionaliteit van een website of extensie testen nadat deze in het uiteindelijke product is geïntegreerd. In deze tutorial laten we zien hoe je een eenvoudige test schrijft voor een extensie uit onze voorbeeldrepository.

Voordat je begint

Kloon of download de chrome-extensions-samples repository. We gebruiken de History API-demo in api-samples/history/showHistory als testextensie.

Je moet ook Node.js installeren, want dat is de runtime waarop Puppeteer is gebouwd.

Het schrijven van je toets

Stap 1: Start je Node.JS-project

We moeten een basis Node.js-project opzetten. Maak in een nieuwe map een package.json -bestand aan met de volgende inhoud:

package.json:

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

Net als het manifest.json bestand van een extensie, is dit bestand vereist voor alle Node-projecten.

Stap 2: Puppeteer en Jest installeren

Voer npm install puppeteer jest uit om Puppeteer en Jest als afhankelijkheden toe te voegen. Ze worden automatisch toegevoegd aan je package.json bestand.

Het is mogelijk om op zichzelf staande Puppeteer-tests te schrijven, maar we gebruiken Jest als testrunner om wat extra structuur aan onze code te geven.

Stap 3: Creëer een toegangspunt

Maak een nieuw bestand met de naam index.test.js en voeg de volgende code toe:

index.test.js:

const puppeteer = require('puppeteer');

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

let browser;
let worker;

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

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

Stap 4: Start de browser

Pas beforeEach en afterEach aan zodat de browser wordt geopend en gesloten. Bij het uitvoeren van veel tests is het wellicht verstandig om dezelfde browser te gebruiken. Dit wordt echter over het algemeen afgeraden, omdat het de isolatie tussen de tests vermindert en ervoor kan zorgen dat de ene test de uitkomst van een andere beïnvloedt.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

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

Stap 5: Wacht op de medewerker van de voorlichtingsdienst.

We moeten wachten tot de service worker van de extensie is gestart, zodat we deze later kunnen gebruiken om de pop-up te openen. Werk uw beforeEach -functie bij met de volgende code:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

Stap 6: Voeg een alias toe

Om het uitvoeren van de tests te vereenvoudigen, voeg je een alias toe aan je package.json -bestand:

package.json:

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

Dit voert alle bestanden uit die eindigen op .test.js in de huidige map.

Stap 7: Open het pop-upvenster

Voeg een eenvoudige test toe. We openen eerst een nieuwe pagina zodat er een item in de browsergeschiedenis staat. Vervolgens openen we een pop-upvenster om de inhoud van de geschiedenis te bekijken. Voeg de volgende code toe:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

Stap 8: Bevestig de huidige toestand

Stel een controle in, zodat onze test kan mislukken als de extensie zich niet gedraagt ​​zoals verwacht. We weten dat onze pop-up recent bezochte pagina's moet weergeven, dus controleer of we er een zien:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

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

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

Stap 9: Voer uw test uit

Om de test uit te voeren, gebruik je npm start . Je zou een uitvoer moeten zien die aangeeft dat de test geslaagd is.

Het volledige project is te vinden in onze chrome-extensions-samples repository.

Volgende stappen

Nadat je de basis onder de knie hebt, kun je proberen een testsuite te bouwen voor je eigen extensie. De Puppeteer API-referentie bevat meer informatie over de mogelijkheden; er zijn veel functionaliteiten die hier niet worden beschreven.