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: