Comment tester les extensions chrome?

Y at-il un bon moyen de le faire? J’écris une extension qui interagit avec un site Web en tant que script de contenu et enregistre les données à l’aide de localstorage. Existe-t-il des outils, des frameworks, etc. que je peux utiliser pour tester ce comportement? Je me rends compte qu’il existe des outils génériques pour tester le javascript, mais sont-ils suffisamment puissants pour tester une extension? Le test unitaire est le plus important, mais je suis également intéressé par d’autres types de tests (tels que les tests d’intégration).

Oui, les frameworks existants sont très utiles ..

Récemment, j’ai placé tous mes tests sur une page “test” intégrée à l’application mais non accessible à moins d’être saisie physiquement.

Par exemple, j’aurais tous les tests dans une page accessible sous chrome-extension://asdasdasdasdad/unittests.html

Les tests auraient access à localStorage etc. Pour accéder aux scripts de contenu, en théorie, vous pourriez tester cela via des IFRAME incorporés dans votre page de test. Cependant, il s’agit de tests de niveau d’intégration. vous n’en dépendez pas, de même que vous avez access à localStorage.

Si vous souhaitez tester directement des pages, vous pouvez orchestrer votre extension pour ouvrir de nouveaux tabs (chrome.tab.create ({“url”: “someurl”}). Pour chacun des nouveaux tabs que votre script de contenu doit exécuter et que vous pouvez utiliser votre framework de test pour vérifier que votre code a bien agi.

Quant aux frameworks, JsUnit ou le plus récent Jasmine devrait fonctionner correctement .

Travaillant sur plusieurs extensions de chrome, je suis arrivé avec sinon-chrome projet sinon-chrome qui permet d’exécuter des tests unitaires en utilisant mocha , nodejs et phantomjs .

Fondamentalement, il crée sinon des simulacres de toutes chrome.* API chrome.* Où vous pouvez mettre des réponses json prédéfinies.

Ensuite, vous chargez vos scripts à l’aide de la page vm.runInNewContext for background de phantomjs et de la page phantomjs pour l’ phantomjs contextuel / options.

Et enfin, vous affirmez que chrome api a été appelé avec les arguments nécessaires.

Prenons un exemple:
Supposons que nous avons une extension chrome simple qui affiche le nombre d’tabs ouverts dans le badge du bouton.

page de fond:

 chrome.tabs.query({}, function(tabs) { chrome.browserAction.setBadgeText({text: Ssortingng(tabs.length)}); }); 

Pour le tester, nous avons besoin de:

  1. mock chrome.tabs.query pour retourner une réponse prédéfinie, par exemple deux tabs.
  2. injecter notre chrome.* api dans un environnement
  3. exécuter notre code d’extension dans cet environnement
  4. affirmer que le badge est égal à ‘2’

L’extrait de code est le suivant:

 const vm = require('vm'); const fs = require('fs'); const chrome = require('sinon-chrome'); // 1. mock `chrome.tabs.query` to return predefined response chrome.tabs.query.yields([ {id: 1, title: 'Tab 1'}, {id: 2, title: 'Tab 2'} ]); // 2. inject our mocked chrome.* api into some environment const context = { chrome: chrome }; // 3. run our extension code in this environment const code = fs.readFileSync('src/background.js'); vm.runInNewContext(code, context); // 4. assert that button badge equals to '2' sinon.assert.calledOnce(chrome.browserAction.setBadgeText); sinon.assert.calledWithMatch(chrome.browserAction.setBadgeText, { text: "2" }); 

Maintenant, nous pouvons l’intégrer dans les fonctions describe..it de moka et exécuter à partir du terminal:

 $ mocha background page ✓ should display opened tabs count in button badge 1 passing (98ms) 

Vous pouvez trouver un exemple complet ici .

De plus, sinon-chrome permet de déclencher un événement chrome avec une réponse prédéfinie, par exemple

 chrome.tab.onCreated.sortinggger({url: 'http://google.com'}); 

A propos de l’outil déjà existant dans Chrome:

  1. Dans l’outil de développement de chrome, il existe une section pour Ressources pour le stockage local.

    Outils de développement> Ressources> Stockage local

    Voir les changements de localstorage là-bas.

  2. Vous pouvez utiliser console.profile pour tester les performances et surveiller la stack des appels à l’exécution.

  3. for fileSystem Vous pouvez utiliser cette URL pour vérifier si votre fichier est téléchargé ou non: système de fichiers: chrome-extension: /// temporaire /

Si vous utilisez un script de contenu et un stockage local sans page / script d’arrière-plan et sans passage de message, le stockage local sera accessible uniquement à partir de ce site. Donc, pour tester ces pages, vous devez injecter votre script de test dans ces tabs.

Alors que sinon.js semble fonctionner sinon.js , vous pouvez également utiliser simplement Jasmine et simuler les rappels Chrome dont vous avez besoin. Exemple:

Moquer

 chrome = { runtime: { onMessage : { addListener : function() {} } } } 

Tester

 describe("JSGuardian", function() { describe("BlockCache", function() { beforeEach(function() { this.blockCache = new BlockCache(); }); it("should recognize added urls", function() { this.blockCache.add("http://some.url"); expect(this.blockCache.allow("http://some.url")).toBe(false); }); } // ... etc 

Modifiez simplement le SpecRunner.html par défaut pour exécuter votre code.

J’ai trouvé que je pouvais utiliser le pilote Web Selenium pour démarrer une nouvelle instance de navigateur avec une extension préinstallée et pyautogui pour les clics – car Selenium ne peut pas piloter “l’affichage” de l’extension. Après les clics, vous pouvez faire des captures d’écran et les comparer avec celles attendues, en attendant 95% de similarité (car sur différents navigateurs, il y a des mouvements de balisage acceptables à quelques pixels).