Tests de bout en bout pour les extensions Chrome

Les tests de bout en bout impliquent la création d'un package d'extension et son chargement dans un navigateur. Un outil de test communique avec le navigateur pour automatiser les interactions et tester les mêmes flux que ceux empruntés par un utilisateur. Une bibliothèque compatible avec les tests de bout en bout offre généralement des moyens de contrôler le navigateur, de simuler une entrée utilisateur et d'observer l'état actuel des pages ouvertes.

Consultez le tutoriel Tester les extensions Chrome avec Puppeteer et la section Tests unitaires pour en savoir plus sur l'écriture de tests unitaires pour les extensions Chrome.

Utiliser des bibliothèques de test de navigateur

Les extensions sont compatibles avec diverses bibliothèques de test.

Bibliothèque	Conseils
Marionnettes de marionnettes	Consultez les extensions Chrome (Puppeteer / Playwright).
Sélénium	Utilisez l'objet ChromeOptions pour charger des extensions. Pour en savoir plus, cliquez ici.
WebDriverIO	Consultez Test des extensions Web.

Exécuter des tests dans Chrome sans interface graphique

Lorsque vous exécutez des tests dans le cadre d'un workflow automatisé, il est souvent nécessaire de charger votre extension sur une machine sans écran. Le nouveau mode headless de Chrome permet de l'exécuter dans un environnement dormant comme celui-ci. Démarrez Chrome à l'aide de l'indicateur --headless=new (actuellement, le mode sans interface graphique est défini par défaut sur "old", qui n'est pas compatible avec le chargement d'extensions). Selon l'outil d'automatisation que vous choisissez, il est possible qu'un paramètre ajoute l'indicateur automatiquement.

Définir un ID d'extension

Il est souvent souhaitable d'avoir un ID d'extension fixe dans les tests. Cela facilite de nombreuses tâches courantes, comme ajouter l'origine de l'extension sur un serveur avec lequel elle doit communiquer ou ouvrir des pages d'extension dans les tests. Pour ce faire, suivez la procédure décrite dans la section Conserver un ID d'extension cohérent.

Tester les pages d'extension

Les pages d'extension sont accessibles à l'aide de l'URL correspondante (par exemple, chrome-extension://<id>/index.html). Utilisez les méthodes de navigation normales dans l'outil d'automatisation de votre choix pour accéder à ces URL.

Test d'un pop-up d'extension

Il est actuellement impossible d'ouvrir une fenêtre pop-up d'extension dans le contexte d'une autre page. Ouvrez plutôt l'URL du pop-up dans un nouvel onglet. Si votre pop-up utilise l'onglet actif, envisagez d'implémenter une option de remplacement permettant de transmettre explicitement un ID d'onglet à votre pop-up. Exemple :

const URL_PARAMS  = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return parseInt(URL_PARAMS.get("tab"));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

Inspecter l'état de l'extension

Pour éviter les échecs de test lorsque vous modifiez le comportement interne de votre extension, il est généralement recommandé d'éviter d'accéder à l'état interne d'un test d'intégration. Vous devez plutôt baser vos tests sur ce qui est visible par l'utilisateur. Toutefois, il peut parfois être souhaitable d'accéder directement aux données de l'extension. Dans ce cas, envisagez d'exécuter du code dans le contexte d'une page d'extension.

Dans Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

Dans Selenium:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

Tester l'arrêt d'un service worker

Pour en savoir plus sur le test de l'arrêt d'un service worker, consultez Tester l'arrêt d'un service worker avec Puppeteer. Nous disposons également d'un exemple pour Puppeteer et Selenium.

Notez que lorsque vous utilisez certains frameworks de test, il est possible que les service workers ne s'arrêtent pas automatiquement comme ils le feraient dans une utilisation normale. C'est le cas de Selenium. Il s'appuie sur ChromeDriver, qui associe un débogueur à tous les service workers, ce qui empêche leur arrêt.