Tester les extensions Chrome avec Puppeteer

Puppeteer fournit un framework permettant de créer des tests automatisés de sites Web, y compris la possibilité de tester les extensions Chrome. Il s'agit de tests de bout en bout de haut niveau qui testent la fonctionnalité 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 allons utiliser la démo de l'API History dans api-samples/history/showHistory comme extension de test.

Vous devrez également installer Node.JS, qui est l'environnement d'exécution sur lequel Puppeteer est basé.

É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 le contenu suivant :

package.json:

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

Semblable au fichier manifest.json d'une extension, ce fichier est requis par 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 exécuteur 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';

let browser;
let worker;

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 exécutez de nombreux tests, vous pouvez envisager d'utiliser le même navigateur. Toutefois, nous vous le déconseillons généralement, car cela réduit l'isolement 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,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

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

Étape 5 : Attendez le service worker de l'extension

Nous devons attendre le démarrage du service worker de l'extension pour pouvoir l'utiliser ultérieurement afin d'ouvrir le pop-up. Mettez à jour votre fonction beforeEach avec le code suivant :

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

Étape 6 : 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": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

Cette commande exécutera tous les fichiers se terminant par .test.js dans le répertoire actuel.

Étape 7 : Ouvrez le pop-up

Ajoutez un test de base. Nous allons d'abord ouvrir une nouvelle page pour qu'il y ait un élément dans l'historique du navigateur. Nous allons ensuite ouvrir le pop-up pour afficher l'historique. Ajoutez le code suivant :

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

Étape 8 : Affirmer l'état actuel

Affirmez 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'il en affiche une :

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

Étape 9 : Exécutez votre test

Pour exécuter le test, utilisez npm start. Vous devriez voir un résultat 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 maîtrisez les bases, essayez de créer une suite de tests pour votre propre extension. La documentation de l'API Puppeteer contient plus d'informations sur les possibilités sans frais. De nombreuses fonctionnalités ne sont pas décrites ici.