Как проверить расширения chrome?

работая над несколькими расширениями chrome, я придумал sinon-chrome проект, который позволяет запускать модульные тесты с помощью mocha,nodejs и phantomjs.

в основном, он создает Синон издевается над всеми chrome.* API, где вы можете поместить любые предопределенные ответы json.

Далее вы загружаете свои скрипты с помощью узла vm.runInNewContext для фоновой страницы и phantomjs для отображения всплывающего окна и страницы свойств.

и, наконец, вы утверждаете, что chrome api был вызван с помощью нужны были аргументы.

рассмотрим пример:
Предположим, у нас есть простое расширение Chrome, которое отображает количество открытых вкладок в знак кнопка.

фон страницы:

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

чтобы проверить это, нам нужно:

1. mock chrome.tabs.query для возврата предопределенного ответа, например, две вкладки.
2. вставить наш глумились chrome.* api в некоторую среду
3. выполнить наш код расширения в этом окружающая среда
4. утверждают, что значок кнопки равен '2'

фрагмент кода выглядит следующим образом:

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

теперь мы можем завернуть его в мокко describe..it функции и запуск из терминала:

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

вы можете найти полный пример здесь.

кроме того, sinon-chrome позволяет запускать любое событие chrome с предопределенным ответом, например

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

об уже существующем инструменте в Chrome:

1. в инструменте разработчика chrome есть раздел для ресурсов для локального хранилища.

   Инструменты Разработчика > Ресурсы > Локальное Хранилище

   посмотреть изменения в хранилище localStorage есть.

2. вы можете использовать консоль.профиль для тестирования производительности и просмотра стека вызовов времени выполнения.

3. для файловой системы вы можете использовать этот URL, чтобы проверить, что ваш файл загружен-ed или не: файловая система: chrome-расширение: / / / временное/

Если вы используете сценарий содержимого и локальное хранилище вместе без фоновой страницы/сценария и без передачи сообщений, локальное хранилище будет доступно только с этого сайта. Итак, чтобы проверить эти страницы, вы должны ввести свой тестовый скрипт на этих вкладках.

пока sinon.js Кажется, отлично работает, вы также можете просто использовать обычный Жасмин и издеваться над хромированными обратными вызовами, которые вам нужны. Пример:

Mock

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

тест

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

просто измените значение по умолчанию SpecRunner.html для запуска вашего кода.

Я обнаружил, что могу использовать Selenium web driver для запуска нового экземпляра браузера с предустановленным расширением и pyautogui для кликов - потому что селен не может управлять " вид " расширения. После кликов вы можете сделать скриншоты и сравнить их с "ожидаемыми", ожидая 95% сходства (потому что в разных браузерах допустимо движение разметки до нескольких пикселей).