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

Question

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

Answer 1

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

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

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

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

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

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

Answer 2

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

По сути, он создает насмешки sinon для всех chrome.* API, где вы можете поместить любые предопределенные ответы json.

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

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

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

фоновая страница:

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

Для проверки нам нужно:

1. макет 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'});

Answer 3

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

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

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

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

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

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

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

Answer 4

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

Ложная

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

Test

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

Answer 5

Чтобы подтвердить пару предыдущих ответов, Jasmine хорошо работает с расширениями Chrome. Я использую версию 3.4.0.

Вы можете использовать Жасминовые шпионы , чтобы легко создавать двойники испытаний для различных API. Не нужно строить свой собственный с нуля. Например:

describe("Test suite", function() {

  it("Test case", function() {

    // Set up spies and fake data.
    spyOn(chrome.browserAction, "setPopup");
    spyOn(chrome.identity, "removeCachedAuthToken");
    fakeToken = "faketoken-faketoken-faketoken";
    fakeWindow = jasmine.createSpyObj("window", ["close"]);

    // Call the function under test.
    logout(fakeWindow, fakeToken);

    // Perform assertions.
    expect(chrome.browserAction.setPopup).toHaveBeenCalledWith({popup: ""});
    expect(chrome.identity.removeCachedAuthToken).toHaveBeenCalledWith({token: fakeToken});
    expect(fakeWindow.close.calls.count()).toEqual(1);

  });

});

Еще несколько подробностей, если это поможет:

Как уже упоминалось в другом ответе, я создал HTML-страницу как часть моего расширения браузера, которое запускает мои тесты. HTML-страница содержит библиотеку Jasmine, а также код JavaScript моего расширения и мой набор тестов. Тесты запускаются автоматически, а результаты форматируются для вас. Нет необходимости создавать тестовый прогон или форматировщик результатов. Просто следуйте инструкциям по установке и используйте документально оформленный HTML-код, чтобы создать свою страницу для запуска теста, а также включите в нее свой набор тестов.

Я не думаю, что вы можете динамически получать фреймворк Jasmine с другого хоста, поэтому я просто включил релиз Jasmine в свое расширение. Конечно, я опущу его, а также мои тестовые случаи, когда я создаю свое расширение для производства.

Я не смотрел, как выполнять свои тесты в командной строке. Это было бы удобно для инструментов автоматического развертывания.

Answer 6

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