Test Chrome-extensies met Puppeteer

Puppeteer biedt een raamwerk voor het bouwen van geautomatiseerde tests van 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 zodra deze in het eindproduct is ingebouwd. In deze zelfstudie laten we zien hoe u een basistest schrijft voor een extensie uit onze voorbeeldrepository.

Voordat je begint

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

Je moet ook Node.JS installeren, de runtime waar Puppeteer op is gebouwd.

Je toets schrijven

Stap 1: Start uw Node.JS-project

We moeten een eenvoudig Node.JS-project opzetten. Maak in een nieuwe map een package.json bestand met het volgende:

pakket.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: Installeer Poppenspeler en Jest

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

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

Stap 3: Maak een toegangspunt aan

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';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

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

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

Stap 4: Start de browser

Update beforeEach en afterEach om de browser te starten en te sluiten. Wanneer u veel tests uitvoert, kunt u overwegen dezelfde browser te gebruiken. Dit wordt echter over het algemeen afgeraden omdat het de isolatie tussen uw tests vermindert en ertoe kan leiden dat de ene test de uitkomst van de andere beïnvloedt.

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

Stap 5: Voeg een alias toe

Om het uitvoeren van de tests eenvoudiger te maken, voegt u een alias toe aan uw package.json -bestand:

pakket.json:

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

Hierdoor worden alle bestanden die eindigen op .test.js in de huidige map uitgevoerd.

Stap 6: Open de pop-up

Laten we een basistest toevoegen die de pop-up op een nieuwe pagina opent. We moeten dit doen omdat Puppeteer geen toegang biedt tot een extensiepop-up vanuit het pop-upvenster. Voeg de volgende code toe:

index.test.js: 

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

Stap 7: Bevestig de huidige status

Laten we iets beweren, zodat onze test kan mislukken als de extensie zich niet gedraagt ​​zoals verwacht. We weten dat onze pop-up onlangs bezochte pagina's moet tonen, dus laten we controleren of we er een zien:

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

Stap 8: Voer uw test uit

Gebruik npm start om de test uit te voeren. U zou uitvoer moeten zien die aangeeft dat uw test is geslaagd.

U kunt het volledige project bekijken in onze chrome-extensions-samples-repository.

Volgende stappen

Nadat u de basis onder de knie heeft, kunt u proberen een testpakket voor uw eigen extensie te bouwen. De Puppeteer API-referentie bevat meer informatie over wat mogelijk is - er zijn veel mogelijkheden die hier niet worden beschreven.