如何测试Chrome扩展？

 

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

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

在最近的过程中，我将所有测试都放在了一个嵌入到应用程序中的“测试”页面上，但除非物理输入，否则无法访问。

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

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

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

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

在几个chrome扩展上工作，我想出了一个sinon-chrome项目，它允许使用mocha ， nodejs和phantomjs来运行单元测试。

基本上，它会创建所有chrome.* api sinon mocks，您可以在其中放置任何预定义的json响应。

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

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

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

背景页面： 

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

为了测试它，我们需要：

  • 模拟chrome.tabs.query返回预定义的响应，例如两个选项卡。
  • 将我们的嘲讽chrome。* 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"
});

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

    关于Chrome中已有的工具：

  • 在Chrome开发人员工具中，有关于本地存储的资源部分。

    开发者工具>资源>本地存储

    查看当地存储的变化。

  • 您可以使用console.profile来测试性能并观察运行时调用堆栈。

  • for fileSystem你可以使用这个URL来检查你的文件是否被上传：filesystem：chrome-extension：/// temporary /

    • 如果您使用内容脚本和本地存储，而没有后台页面/脚本且没有消息传递，则只能从该站点访问本地存储。 所以，为了测试这些页面，你必须在这些标签中注入你的测试脚本。

    链接地址: http://www.djcxy.com/p/16183.html

    上一篇: How to test chrome extensions?

    下一篇: Is there a link to the "latest" jQuery library on Google APIs?