如何测试chrome扩展？

Question

有没有办法做到这一点？我正在编写一个与网站交互作为内容脚本的扩展程序,并使用localstorage保存数据.是否有可用于测试此行为的工具,框架等？我意识到有一些用于测试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.

基本上,它创建了所有chrome.*API的sinon模拟,您可以在其中放置任何预定义的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"
});

现在我们可以将它包装到mocha的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

虽然sinon.js看起来效果很好，但您也可以只使用普通的 Jasmine 并模拟您需要的 Chrome 回调。例子：

嘲笑

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即可运行您的代码。