Comment tester les extensions chrome?

Travailler sur plusieurs extensions chrome que je suis venu avec sinon-chrome projet qui permet d'exécuter des tests unitaires en utilisant mocha, nodejs et phantomjs.

Fondamentalement, il crée sinon des mocks de toutes les API chrome.* où vous pouvez mettre des réponses JSON prédéfinies.

Ensuite, vous chargez vos scripts en utilisant la page vm.runInNewContext de node pour la page d'arrière-plan et phantomjs pour la page popup / options de rendu.

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

Prenons un exemple:
Supposons que nous ayons une extension chrome simple qui affiche le nombre d'onglets ouverts dans le badge de bouton.

page d'arrière-plan:

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

Pour le tester, nous avons besoin de:

1. mock chrome.tabs.query Pour renvoyer une réponse prédéfinie, par exemple deux onglets.
2. injectez notre api mocked chrome.* dans un environnement
3. exécuter notre code d'extension dans cet environnement
4. affirmer que le badge bouton est égal à ' 2 '

L'extrait de code est 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'envelopper dans les fonctions describe..it de moka et l'exécuter à partir du terminal:

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

Vous pouvez trouver l'exemple complet ici .

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

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

À propos de L'outil déjà existant dans Chrome:

1. Dans l'outil de développement chrome, il y a une section pour les ressources pour le stockage local.

   Outils De Développement > Ressources > Stockage Local

   Voir les changements de localstorage là.

2. Vous pouvez utiliser la console.profil pour tester les performances et regarder la pile d'appels au moment de l'exécution.

3. pour le système de fichiers, vous pouvez utiliser cette URL pour vérifier que votre fichier est téléchargé ou non: système de fichiers: Chrome-extension: / / / temporaire/

Si vous utilisez content script et local-storage ensemble sans page/script d'arrière-plan et sans passage de message, local-storage sera accessible à partir de ce site uniquement. Donc, pour tester ces pages, vous devez injecter votre script de test dans ces onglets.

Alors que sinon.js semble fonctionner très bien, vous pouvez également utiliser simplement Jasmine et se moquer des rappels Chrome dont vous avez besoin. Exemple:

Maquette

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

Essai

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

Juste modifier la valeur par défaut SpecRunner.html pour exécuter votre code.

J'ai trouvé que je peux utiliser Selenium web driver pour démarrer une nouvelle instance de navigateur avec une extension préinstallée et pyautogui pour les clics-car Selenium ne peut pas conduire "view" de l'extension. Après les clics, vous pouvez faire des captures d'écran et les comparer avec ceux "attendus", en attendant 95% de similitude (parce que sur différents navigateurs, il est acceptable des mouvements de balisage à quelques pixels).