如何测试Chrome扩展?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

有没有一个好的方法来做到这一点?我正在编写一个扩展,作为内容脚本与网站交互,并使用localstorage保存数据。是否有任何工具,框架等可用于测试此行为?我意识到有一些用于测试JavaScript的通用工具,但那些测试扩展的功能是否足够?单元测试是最重要的,但我也对其他类型的测试(如集成测试)感兴趣。

提问于
用户回答回答于

是的,现有的框架非常有用。

在最近的过程中,我将所有测试都放在嵌入到应用程序中的“测试”页面上,但如果没有物理类型,则无法访问。

例如,我可以在chrome-extension://asdasdasdasdad/unittests.html下访问页面中的所有测试

测试可以访问localStorage等。对于访问内容脚本,理论上你可以在测试页面中通过嵌入的IFRAME进行测试,但是这些测试是更多的集成级别测试,单元测试需要你从真实页面抽象出来,以便你不依赖他们,同样可以访问localStorage。

如果你想直接测试页面,你可以编排你的扩展以打开新的标签(chrome.tab.create({“url”:“someurl”})。对于每个新标签,你的内容脚本应该运行,你可以使用你的测试框架来检查你的代码是否完成了它应该做的事情。

至于框架,JsUnit或更新的Jasmine应该可以正常工作。

用户回答回答于

在几个Chrome扩展工作,我想出了sinon-chrome项目,允许使用运行单元测试mochanodejsphantomjs

基本上,它创建了所有chrome.* api可以放置任何预定义json响应的sinon mocks 。

接下来,使用节点的vm.runInNewContext背景页面和phantomjs渲染弹出菜单/选项页面加载脚本。

最后,你断言chrome api被调用了需要的参数。

我们举一个例子: 假设我们有一个简单的扩展名,它显示按钮标记中打开的标签数量。

背景页面:

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

为了测试它,我们需要:

  1. 模拟chrome.tabs.query返回预定义的响应,例如两个选项卡。
  2. 将我们的嘲讽chrome。* api注入一些环境
  3. 在此环境中运行我们的扩展代码
  4. 断言按钮徽章等于'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"
});

现在我们可以将其包装到摩卡的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'});

扫码关注云+社区