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

Ответ 1

Да, существующие фреймворки очень полезны.

В недавнем прошлом я поместил все свои тесты на "тестовую" страницу, которая была встроена в приложение, но недоступна, если не была физически напечатана.

Например, у меня были бы все тесты на странице, доступной в chrome-extension://asdasdasdasdad/unittests.html

Тесты будут иметь доступ к локальному хранилищу и т.д. Для доступа к сценариям контента теоретически вы можете проверить, что через встроенные IFRAME на тестовой странице, однако это больше тестирование уровня интеграции, модульные тесты потребуют от вас абстрагирования от реальных страниц, чтобы вы не зависели от них, также с доступом к localStorage.

Если вы хотите напрямую протестировать страницы, вы можете организовать расширение для открытия новых вкладок (chrome.tab.create({ "url": "someurl" }). Для каждой новой вкладки ваш контент script должен и вы можете использовать свою структуру тестирования, чтобы проверить, что ваш код сделал то, что он должен делать.

Что касается фреймворков, JsUnit или более поздний Jasmine должно работать нормально.

Ответ 2

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

В основном, он создает sinon mocks из всех chrome.* api, где вы можете поместить любые предопределенные json-ответы.

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

И, наконец, вы утверждаете, что chrome api вызывается с необходимыми аргументами.

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

справочная страница:

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

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

• mock chrome.tabs.query, чтобы вернуть предопределенный ответ, например. две вкладки.
• вводят наш посмеянный хром. * api в какую-то среду.
• запустите наш код расширения в этой среде
• утверждают, что значок кнопки равен '2'

Ниже приведен фрагмент кода:

var vm = require('vm');
var fs = require('fs');
var 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
var context = {
  chrome: chrome;
};

// 3. run our extension code in this environment
var 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"
});

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

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

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

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

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

Ответ 3

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

• В инструменте разработчика chrome есть раздел Ресурсы для локального хранилища.

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

  См. изменения localstorage.

• Вы можете использовать console.profile для проверки производительности и просмотра стека вызовов времени выполнения.

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

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