测试浏览器扩展 [英] Testing browser extensions

问题描述

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

I'm going to write bunch of browser extensions (the same functionality for each popular browser). I hope, that some of the code will be shared, but I'm not sure about this yet. For sure some of extensions will use native API. I have not much experience with TDD/BDD, and I thought it's good time to start folowing these ideas from this project.

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

The problem is, I have no idea how to handle it. Should I write different tests for each browser? How far should I go with these tests? These extensions will be quite simple - some data in a local storage, refreshing a page and listening through web sockets.

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

And my observation about why is it hard for me - because there is a lot of behaviour, and not so much models, which are also dependent on a platform.

推荐答案

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

I practise two different ways of testing my browser extensions:

• 单元测试


• 集成测试

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

I will use the cross-browser YouTube Lyrics by Rob W extension as an example throughout this answer. The core of this extension is written in JavaScript and organized with AMD modules. A build script generates the extension files for each browser. With r.js, I streamline the inclusion of browser-specific modules, such as the one for cross-origin HTTP requests and persistent storage (for preferences), and a module with tons of polyfills for IE.

扩展插入一个面板，其中包含当前播放歌曲的歌词在YouTube，Grooveshark和Spotify上。我无法控制这些第三方网站，因此我需要一种自动方式来验证扩展程序是否仍能正常运行。

The extension inserts a panel with lyrics for the currently played song on YouTube, Grooveshark and Spotify. I have no control over these third-party sites, so I need an automated way to verify that the extension still works well.

在开发过程中：

1. 实现/编辑功能，如果功能不重要，则编写单元测试。


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


3. 提交给git。

1. Implement / edit feature, and write a unit test if the feature is not trivial.
2. Run all unit tests to see if anything broke. If anything is wrong, go back to 1.
3. Commit to git.

发布之前：

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


2. 运行所有集成测试以验证整个扩展程序是否仍然有效。


3. Bump版本，构建扩展。


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

1. Run all unit tests to verify that the individual modules is still working.
2. Run all integration tests to verify that the extension as whole is still working.
3. Bump versions, build extensions.
4. Upload update to the official extension galleries and my website (Safari and IE extensions have to be hosted by yourself) and commit to git.

单元测试

我使用 mocha + expect.js 编写测试。我不测试每个模块的每个方法，只测试那些重要的方法。例如：

Unit testing

I use mocha + expect.js to write tests. I don't test every method for each module, just the ones that matter. For instance:

• DOM解析方法。大多数DOM解析方法（包括jQuery）都存在缺陷：加载任何外部资源并执行JavaScript。
  
  我验证DOM解析方法正确解析DOM而没有负面影响。

• The DOM parsing method. Most DOM parsing methods in the wild (including jQuery) are flawed: Any external resources are loaded and JavaScript is executed.
  I verify that the DOM parsing method correctly parses DOM without negative side effects.

偏好模块：我确认可以保存并返回数据。

The preference module: I verify that data can be saved and returned.

我的扩展程序取出歌词来自外部来源。这些源在单独的模块中定义。这些定义由 InfoProvider 模块识别和使用，该模块接受查询（黑盒子）并输出搜索结果。

My extension fetches lyrics from external sources. These sources are defined in separate modules. These definitions are recognized and used by the InfoProvider module, which takes a query, (black box), and outputs the search results.

• 首先，我测试 InfoProvider 模块是否正常运行。


• 然后，每个在17个源中，我将一个预定义的查询传递给源（使用 InfoProvider ）并验证结果是否是预期的：
  
  
  
  
  • 查询成功
  
  
  • 返回的歌曲标题匹配（通过应用单词相似度算法）
  
  
  • 返回歌词的长度属于预期范围。
  
  
  • First I test whether the InfoProvider module functions correctly.
  • Then, for each of the 17 sources, I pass a pre-defined query to the source (with InfoProvider) and verify that the results are expected:
    • The query succeeds
    • The returned song title matches (by applying a word similarity algorithm)
    • The length of the returned lyrics fall inside the expected range.

    UI是否明显没有损坏，例如单击关闭按钮。

    Whether the UI is not obviously broken, e.g. by clicking on the Close button.

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

    These tests can be run directly from a local server, or within a browser extension. The advantage of the local server is that you can edit the test and refresh the browser to see the results. If all of these tests pass, I run the tests from the browser extension.
    By passing an extra parameter debug to my build script, the unit tests are bundled with my extension.

    在网页中运行测试是不够的，因为扩展程序的环境可能与普通页面不同。例如，在Opera 12扩展中，没有全局位置对象。

    Running the tests within a web page is not sufficient, because the extension's environment may differ from the normal page. For instance, in an Opera 12 extension, there's no global location object.

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

    Remark: I don't include the tests in the release build. Most users don't take the efforts to report and investigate bugs, they will just give a low rating and say something like "Doesn't work". Make sure that your extension functions without obvious bugs before shipping it.

    
    
    • 将模块视为黑盒子。只要输出匹配是预期的或给定的输入，你就不在乎里面是什么。
    
    
    • 从测试扩展的关键部分开始。
    
    
    • 确保可以在非扩展环境中轻松构建和运行测试。
    
    
    • 不要忘记在扩展的执行环境中运行测试，以确保在扩展程序的上下文中没有任何约束或意外情况会破坏您的代码。
    
    
    • View modules as black boxes. You don't care what's inside, as long as the output matches is expected or a given input.
    • Start with testing the critical parts of your extension.
    • Make sure that the tests can be build and run easily, possibly in a non-extension environment.
    • Don't forget to run the tests within the extension's execution context, to ensure that there's no constraint or unexpected condition inside the extension's context which break your code.

    我使用Selenium 2测试我的扩展是否仍然适用于YouTube，Grooveshark（3x）和Spotify。

    I use Selenium 2 to test whether my extension still works on YouTube, Grooveshark (3x) and Spotify.

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

    Initially, I just used the Selenium IDE to record tests and see if it worked. That went well, until I needed more flexibility: I wanted to conditionally run a test depending on whether the test account was logged in or not. That's not possible with the default Selenium IDE (it's said to be possible with the FlowControl plugin - I haven't tried).

    Selenium IDE提供了一个选项，可以导出其他格式的现有测试，包括JUnit 4测试（Java）。不幸的是，这个结果并不令人满意。很多命令都没有被识别。

    The Selenium IDE offers an option to export the existing tests in other formats, including JUnit 4 tests (Java). Unfortunately, this result wasn't satisfying. Many commands were not recognized.

    所以，我放弃了Selenium IDE，切换到了Selenium。
    
    注意当你搜索Selenium时，您将找到有关Selenium RC（Selenium 1）和Selenium WebDriver（Selenium 2）的信息。第一个是旧的并且已弃用，后者（Selenium WebDriver）应该用于新项目。

    So, I abandoned the Selenium IDE, and switched to Selenium.
    Note that when you search for "Selenium", you will find information about Selenium RC (Selenium 1) and Selenium WebDriver (Selenium 2). The first is the old and deprecated, the latter (Selenium WebDriver) should be used for new projects.

    一旦你发现了文档的工作原理，它就很容易使用了。
    
    我更喜欢项目页面上的文档，因为它通常简洁（ wiki ）并完成（ Java文档 ）。

    Once you discovered how the documentation works, it's quite easy to use.
    I prefer the documentation at the project page, because it's generally concise (the wiki) and complete (the Java docs).

    如果您想快速入门，请阅读入门维基页面。如果您有空闲时间，请查看SeleniumHQ上的文档，特别是 Selenium WebDriver 和 WebDriver：高级用法。
    
    Selenium Grid 也值得一读。此功能允许您跨不同（虚拟）计算机分发测试。如果您想在IE8,9和10中同时测试扩展，同时（要运行多个版本的Internet Explorer，您需要虚拟化），这很棒。

    If you want to get started quickly, read the Getting Started wiki page. If you've got spare time, look through the documentation at SeleniumHQ, in particular the Selenium WebDriver and WebDriver: Advanced Usage.
    Selenium Grid is also worth reading. This feature allows you to distribute tests across different (virtual) machines. Great if you want to test your extension in IE8, 9 and 10, simultaneously (to run multiple versions of Internet Explorer, you need virtualization).

    自动化测试很不错。什么更好？自动安装扩展程序！
    
    ChromeDriver 和 FirefoxDriver 支持扩展安装，如这个例子。

    Automating tests is nice. What's more nice? Automating installation of extensions!
    The ChromeDriver and FirefoxDriver support the installation of extensions, as seen in this example.

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

    For the SafariDriver, I've written two classes to install a custom Safari extension. I've published it and sent in a PR to Selenium, so it might be available to everyone in the future: https://github.com/SeleniumHQ/selenium/pull/87

    OperaDriver 不支持安装自定义扩展（从技术上讲，它应该是可能的）。
    
    注意随着 Chromium-powered Opera ，旧版OperaDriver不再适用。

    The OperaDriver does not support installation of custom extensions (technically, it should be possible though).
    Note that with the advent of Chromium-powered Opera, the old OperaDriver doesn't work any more.

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

    There's an Internet Explorer Driver, and this one does definitely not allow one to install a custom extension. Internet Explorer doesn't have built-in support for extensions. Extensions are installed through MSI or EXE installers, which are not even integrated in Internet Explorer. So, in order to automatically install your extension in IE, you need to be able to silently run an installer which installs your IE plugin. I haven't tried this yet.

    这篇关于测试浏览器扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！