Tester les extensions Chrome avec Puppeteer

Puppeteer fournit un framework permettant de créer des tests automatisés de sites Web, ce qui inclut également la possibilité de tester des extensions Chrome. Il s'agit de tests de bout en bout de haut niveau qui testent le fonctionnement d'un site Web ou d'une extension une fois qu'ils ont été intégrés au produit final. Dans ce tutoriel, nous vous expliquons 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émonstration de l'API History dans api-samples/history/showHistory comme extension de test.

Vous devez également installer Node.JS, sur lequel Puppeteer est compilé.

É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"
}

Comme le fichier manifest.json d'une extension, ce fichier est obligatoire pour tous les projets Node.

Étape 2: Installez Puppeteer et Jest

Exécutez npm install puppeteer jest pour ajouter Puppeteer et Jest en tant que dépendances. Ils seront automatiquement ajoutés à 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éer 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. Toutefois, nous vous déconseillons de le faire, 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 dans le répertoire actuel seront exécutés.

Étape 6: Ouvrez le pop-up

Ajoutons un test de base qui ouvre le pop-up dans une nouvelle page. Nous devons procéder ainsi, car Puppeteer n'est pas compatible avec 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: Affirmer l'état actuel

Affirmons 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 consultées récemment. Vérifions-le:

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 votre test

Pour exécuter le test, utilisez npm start. Vous devriez obtenir une sortie indiquant que votre test a réussi.

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

Étapes suivantes

Une fois que vous avez maîtrisé les bases, 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 sans frais. De nombreuses fonctionnalités ne sont pas décrites ici.