测试浏览器扩展

Question

我要写一堆浏览器扩展(每个流行的浏览器都有相同的功能).我希望,一些代码将被共享,但我还不确定.当然,一些扩展将使用本机API.我对TDD/BDD没有多少经验,我认为现在是开始从这个项目中获取这些想法的好时机.

问题是,我不知道如何处理它.我应该为每个浏览器编写不同的测试吗？我应该走多远这些测试？这些扩展将非常简单 - 本地存储中的一些数据,刷新页面和通过Web套接字进行监听.

我的观察为什么对我来说很难 - 因为有很多行为,而不是那么多模型,它们也依赖于平台.

Answer 1

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

• 单元测试
• 整合测试

介绍

在整个答案中,我将使用Rob W扩展的跨浏览器YouTube歌词作为示例.此扩展的核心是用JavaScript编写的,并使用AMD模块进行组织.构建脚本为每个浏览器生成扩展文件.使用r.js,我简化了包含特定于浏览器的模块,例如用于跨源HTTP请求和持久存储(用于首选项)的模块,以及用于IE的具有大量polyfill的模块.

该扩展程序会在YouTube,Grooveshark和Spotify上为当前播放的歌曲插入带有歌词的面板.我无法控制这些第三方网站,因此我需要一种自动方式来验证扩展程序是否仍能正常运行.

工作流程

在开发期间:

1. 实现/编辑功能,如果功能不重要,则编写单元测试.
2. 运行所有单元测试以查看是否有任何损坏.如果有任何问题,请返回1.
3. 承诺git.

发布前:

1. 运行所有单元测试以验证各个模块是否仍在工作.
2. 运行所有集成测试以验证整个扩展是否仍在工作.
3. 凹凸版本,构建扩展.
4. 将更新上传到官方扩展库和我的网站(Safari和IE扩展必须由您自己托管)并提交到git.

单元测试

我用mocha + expect.js来编写测试.我不测试每个模块的每个方法,只测试那些重要的方法.例如:

• DOM解析方法.大多数DOM解析方法(包括jQuery)都存在缺陷:加载任何外部资源并执行JavaScript.
  我验证DOM解析方法正确解析DOM而没有负面的副作用.

• 首选项模块:我验证可以保存和返回数据.

• 我的扩展程序从外部源获取歌词.这些源在单独的模块中定义.这些定义由InfoProvider模块识别和使用,模块接受查询(黑盒子)并输出搜索结果.

  • 首先,我测试InfoProvider模块是否正常运行.
  • 然后,对于17个源中的每一个,我将预定义的查询传递给源(带InfoProvider)并验证结果是否是预期的:
    • 查询成功
    • 返回的歌曲标题匹配(通过应用单词相似度算法)
    • 返回歌词的长度落在预期范围内.

• UI是否没有明显损坏,例如通过单击"关闭"按钮.

这些测试可以直接从本地服务器运行,也可以在浏览器扩展中运行.本地服务器的优点是您可以编辑测试并刷新浏览器以查看结果.如果所有这些测试都通过,我将从浏览器扩展中运行测试.
通过将额外参数传递debug给我的构建脚本,单元测试与我的扩展捆绑在一起.

在网页中运行测试是不够的,因为扩展的环境可能与普通页面不同.例如,在Opera 12扩展中,没有全局location对象.

备注:我没有在发布版本中包含测试.大多数用户不会努力报告和调查错误,他们只会评价较低,并说"不工作".在发货之前,请确保您的扩展功能没有明显的错误.

摘要

• 将模块视为黑盒子.你不关心里面是什么,只要输出匹配是预期的或给定的输入.
• 首先测试扩展的关键部分.
• 确保可以在非扩展环境中轻松构建和运行测试.
• 不要忘记在扩展的执行上下文中运行测试,以确保扩展的上下文中没有约束或意外条件会破坏您的代码.

集成测试

我使用Selenium 2测试我的扩展程序是否仍适用于YouTube,Grooveshark(3x)和Spotify.

最初,我只是使用Selenium IDE来记录测试并查看它是否有效.这很顺利,直到我需要更多的灵活性:我想有条件地运行测试,具体取决于测试帐户是否已登录.使用默认的Selenium IDE是不可能的(据说可以使用FlowControl插件 - 我还没试过).

Selenium IDE提供了以其他格式导出现有测试的选项,包括JUnit 4测试(Java).不幸的是,这个结果并不令人满意.许多命令无法识别.

所以,我放弃了Selenium IDE,转而使用Selenium.
请注意,当您搜索"Selenium"时,您会找到有关Selenium RC(Selenium 1)和Selenium WebDriver(Selenium 2)的信息.第一个是旧的和不推荐的,后者(Selenium WebDriver)应该用于新项目.

一旦您发现文档的工作原理,它就非常容易使用.
我更喜欢项目页面上的文档,因为它通常简洁(维基)和完整(Java文档).

如果您想快速入门,请阅读入门维基页面.如果您有空闲时间,请查看SeleniumHQ上的文档,特别是Selenium WebDriver和WebDriver:Advanced Usage.
Selenium Grid也值得一读.此功能允许您跨不同(虚拟)计算机分发测试.如果您想同时在IE8,9和10中测试扩展,那就太棒了(要运行多个版本的Internet Explorer,您需要虚拟化).

自动化测试很不错.什么更好？自动安装扩展!
该ChromeDriver和FirefoxDriver支持扩展的安装,在看到这个例子.

对于SafariDriver,我编写了两个类来安装自定义Safari扩展.我已将它发布并发送给了Selenium,因此未来可能会对所有人开放:https://github.com/SeleniumHQ/selenium/pull/87

该OperaDriver不支持安装自定义扩展的(从技术上讲,它应该是可能的,虽然).
请注意,随着Chromium驱动的Opera的出现,旧的OperaDriver不再起作用了.

有一个Internet Explorer驱动程序,这个肯定不允许一个人安装自定义扩展.Internet Explorer没有内置的扩展支持.扩展是通过MSI或EXE安装程序安装的,这些安装程序甚至没有集成到Internet Explorer中.因此,为了在IE中自动安装扩展,您需要能够以静默方式运行安装IE插件的安装程序.我没有试过尚未.