Tester les extensions Chrome avec Puppeteer

Puppeteer propose un framework permettant de créer des tests automatisés de sites Web, ce qui inclut également la possibilité de tester les extensions Chrome. Il s'agit de tests de haut niveau de bout en bout qui testent les fonctionnalités d'un site Web ou d'une extension une fois qu'ils ont été intégrés au produit final. Dans ce tutoriel, nous montrons comment écrire un test de base pour une extension à partir de notre dépôt d'exemples.

Avant de commencer

Clonez ou téléchargez le dépôt chrome-extensions-samples. Nous utiliserons la démo de l'API History dans api-samples/history/showHistory comme extension de test.

Vous devez également installer Node.JS, qui est l'environnement d'exécution Puppeteer.

Écrire votre test

Étape 1: Démarrez votre projet Node.JS

Nous devons configurer un projet Node.JS de base. Dans un nouveau dossier, créez un fichier package.json avec les éléments suivants:

pacakge.json:

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

Tout comme le fichier manifest.json d'une extension, ce fichier est requis pour tous les projets de nœud.

Étape 2: Installez Puppeteer et Jest

Exécutez npm install puppeteer jest pour ajouter Puppeteer et Jest en tant que dépendances. Elles seront automatiquement ajoutées à votre fichier package.json.

Il est possible d'écrire des tests Puppeteer autonomes, mais nous utiliserons Jest comme lanceur de test pour fournir une structure supplémentaire à notre code.

Étape 3: Créez un point d'entrée

Créez un fichier nommé index.test.js et ajoutez le code suivant:

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

Étape 4: Lancez le navigateur

Mettez à jour beforeEach et afterEach pour lancer et fermer le navigateur. Lorsque vous effectuez de nombreux tests, vous pouvez envisager d'utiliser le même navigateur. Cependant, cela est généralement déconseillé, car cela réduit l'isolation entre vos tests et peut entraîner l'impact d'un test sur le résultat d'un autre.

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

Étape 5: Ajoutez un alias

Pour faciliter l'exécution des tests, ajoutez un alias à votre fichier package.json:

package.json:

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

Tous les fichiers se terminant par .test.js seront exécutés dans le répertoire actuel.

Étape 6: Ouvrir le pop-up

Ajoutons un test de base qui ouvre le pop-up dans une nouvelle page. Nous devons le faire, car Puppeteer ne prend pas en charge l'accès à un pop-up d'extension à partir de la fenêtre pop-up. Ajoutez le code suivant :

index.test.js:

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

Étape 7: Déclarez l'état actuel

Assurons quelque chose pour que notre test puisse échouer si l'extension ne se comporte pas comme prévu. Nous savons que notre pop-up doit afficher les pages récemment consultées. Vérifions donc qu'une seule de ces pages s'affiche:

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

Étape 8: Exécutez le test

Pour exécuter le test, utilisez npm start. Vous devriez voir un résultat indiquant que votre test a réussi.

Vous pouvez voir le projet complet dans notre dépôt chrome-extensions-samples.

Étapes suivantes

Une fois les bases maîtrisées, essayez de créer une suite de tests pour votre propre extension. La documentation de référence de l'API Puppeteer contient plus d'informations sur les possibilités qui s'offrent à vous. De nombreuses fonctionnalités ne sont pas décrites ici.