Javascript 测试浏览器扩展

我将编写一系列浏览器扩展（每个流行浏览器都有相同的功能）。我希望，一些代码将被共享，但我还不确定这一点。当然，一些扩展将使用本机API。我对TDD/BDD没有太多的经验，我认为现在是从这个项目开始遵循这些想法的好时机

问题是，我不知道怎么处理。我应该为每个浏览器编写不同的测试吗？这些测试我应该走多远？这些扩展将非常简单——一些数据存储在本地存储器中，刷新页面并通过web套接字进行侦听

---

我观察到为什么这对我来说很难——因为有很多行为，没有那么多模型，它们也依赖于一个平台。

测试浏览器扩展也给我带来了一些困难，但我已经决定在几个不同的领域实现测试，我可以从Selenium驱动的浏览器中同时调用这些测试

我使用的步骤是：

首先，我编写集成到扩展代码中的测试代码，只需转到特定的URL即可激活。当扩展看到该URL时，它开始运行测试

然后，在激活扩展中的测试的页面中，我执行服务器端测试以确保API执行，并在那里记录和记录问题。我记录调用的方法、所用的时间和任何错误。因此，我可以看到扩展调用的方法、web性能、业务逻辑性能和数据库性能

最后，我使用Selenium自动调用浏览器指向该特定URL并记录其性能以及任何给定客户端系统上的其他测试信息、错误等：

通过这种方式，我可以将测试分解为浏览器、扩展、服务器、应用程序和数据库，并根据特定的测试集将它们链接在一起。要把它们放在一起需要一些工作，但一旦完成，您就可以拥有一个非常好的扩展测试框架

通常对于跨浏览器扩展开发，为了维护单个代码库，我使用crossrider，但您可以使用任何框架或本机扩展来实现这一点，Selenium不会在意，它只是将扩展驱动到特定页面，并允许您进行交互和执行测试

---

这种方法的一个优点是，您也可以将其用于实时用户。如果您正在为扩展提供支持，请让用户转到您的测试url，您将立即看到扩展和服务器端性能。当然，您不会获得Selenium测试，但您将通过这种方式捕获许多问题—在针对各种浏览器和浏览器版本进行编码时非常有用。

我练习了两种不同的浏览器扩展测试方法：

• 单元测试
• 集成测试

介绍 在整个回答过程中，我将使用跨浏览器扩展作为示例。该扩展的核心是用JavaScript编写的，并由AMD模块组织。生成脚本为每个浏览器生成扩展文件。通过，我简化了特定于浏览器的模块的包含，例如用于跨源HTTP请求和持久存储（用于首选项）的模块，以及用于IE的具有大量多边形填充的模块

该扩展插件插入一个面板，其中包含YouTube、Grooveshark和Spotify上当前播放的歌曲的歌词。我无法控制这些第三方站点，因此我需要一种自动化的方法来验证扩展是否仍然正常工作

工作流程 开发期间：

实现/编辑特性，如果特性不平凡，则编写单元测试

运行所有单元测试以查看是否有任何东西损坏。如果有什么问题，请返回1

提交到git

发布前：

运行所有单元测试以验证各个模块是否仍在工作

运行所有集成测试以验证整个扩展是否仍在工作

凹凸版本、构建扩展

将更新上传到官方扩展库和我的网站（Safari和IE扩展必须由您自己托管）并提交给git

单元测试 我使用+编写测试。我并不是针对每个模块测试每个方法，只是测试那些重要的方法。例如：

• DOM解析方法。大多数野外DOM解析方法（包括jQuery）都有缺陷：加载任何外部资源并执行JavaScript。
  我验证DOM解析方法是否正确解析DOM，并且没有负面的副作用

• 首选项模块：我验证数据是否可以保存和返回

• 我的扩展从外部来源获取歌词。这些源在单独的模块中定义。这些定义由

  InfoProvider

  模块识别和使用，该模块接受查询（黑框），并输出搜索结果
  • 首先，我测试

    InfoProvider

    模块是否正常工作
  • 然后，对于17个源中的每一个，我将预定义的查询传递给源（使用

    InfoProvider

    ），并验证结果是否符合预期：
    • 查询成功
    • 返回的歌曲标题匹配（通过单词相似性算法）
    • 返回的歌词长度在预期范围内
• 用户界面是否没有明显损坏，例如单击关闭按钮

这些测试可以直接从本地服务器运行，也可以在浏览器扩展中运行。本地服务器的优点是，您可以编辑测试并刷新浏览器以查看结果。如果所有这些测试都通过，我将从浏览器扩展运行测试。
通过向我的构建脚本传递额外的参数

debug

，单元测试与我的扩展捆绑在一起

在网页中运行测试是不够的，因为