Tests de bout en bout pour les extensions Chrome

Les tests de bout en bout impliquent la création et le chargement d'un package d'extension dans un navigateur. Un outil de test communique avec le navigateur pour automatiser les interactions et tester les mêmes flux qu'un utilisateur. Une bibliothèque qui prend en charge les tests de bout en bout fournit généralement des moyens de contrôler le navigateur, de simuler les saisies utilisateur et d'observer l'état actuel des pages ouvertes.

Consultez Tester les extensions Chrome avec Puppeteer pour obtenir un tutoriel et Tests unitaires pour savoir comment écrire des tests unitaires pour les extensions Chrome.

Utiliser des bibliothèques de test de navigateur

Les extensions sont compatibles avec différentes bibliothèques de test.

Exécuter des tests dans Headless Chrome

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 d'exécuter Chrome dans un environnement sans surveillance comme celui-ci. Démarrez Chrome à l'aide du flag --headless=new (le mode sans interface graphique est actuellement défini par défaut sur "old", qui ne permet pas de charger les extensions). Selon l'outil d'automatisation que vous choisissez, il peut exister un paramètre qui ajoute automatiquement le tag.

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 l'ajout de l'origine de l'extension à la liste d'autorisation sur un serveur avec lequel elle doit communiquer ou l'ouverture des pages d'extension dans les tests. Pour ce faire, suivez les étapes décrites dans la section Conserver un ID d'extension cohérent.

Tester les pages d'extension

Vous pouvez accéder aux pages d'extension à l'aide de leur URL correspondante, par exemple chrome-extension://<id>/index.html. Utilisez les méthodes de navigation standards disponibles dans l'outil d'automatisation de votre choix pour accéder à ces URL.

Tester un pop-up d'extension

Avec certaines bibliothèques, vous pouvez ouvrir le pop-up à l'aide de l'API action.openPopup(), puis obtenir une référence au nouveau contexte. Par exemple, Puppeteer explique comment procéder dans son guide sur les extensions Chrome.

Si cela n'est pas possible dans la bibliothèque de votre choix, ouvrez l'URL du pop-up dans un nouvel onglet. Si votre pop-up utilise l'onglet actif, envisagez d'implémenter un remplacement où un ID d'onglet peut être transmis explicitement à 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 await chrome.tabs.get(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 préférable d'éviter d'accéder à l'état interne dans 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 à partir de l'extension. Dans ce cas, envisagez d'exécuter le 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 du service worker

Pour savoir comment tester l'arrêt du service worker, consultez Tester l'arrêt du service worker avec Puppeteer. Nous avons également 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 en utilisation normale. C'est le cas dans Selenium. Il s'appuie sur ChromeDriver, qui associe un débogueur à tous les workers de service, ce qui les empêche d'être arrêtés.