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

есть хороший способ сделать это? Я пишу расширение, которое взаимодействует с веб-сайтом как скрипт контента и сохраняет данные с помощью localstorage. Есть ли инструменты, рамки и т. д. что я могу использовать, чтобы проверить это поведение? Я понимаю, что есть некоторые общие инструменты для тестирования javascript, но достаточно ли их для тестирования расширения? Модульное тестирование наиболее важно, но меня также интересуют другие типы тестирования (например, интеграционное тестирование).

133
google-chrome google-chrome-extension unit-testing

5 ответов

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

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

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

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

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

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

98

работа над несколькими расширениями 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'});
50

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

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

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

    см. изменения localstorage там.

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

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

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

2

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

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 для запуска кода.

1

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

0