Web 页面自动化测试及代码覆盖率分析（2）

look_w

协同工作：在 DOH 单元测试中使用 JScoverage 计算代码覆盖率对于以上提到的每一种开发框架和测试工具，网上都能找到很多实例来教你怎样使用它们。但是要在一个大型工程中把它们整合到一起来发挥最大功用却并不那么容易。需要不断的尝试和总结，下面我们就使用我们项目中的一个例子，来展示怎样使他们更好的协同工作。我们的方法可能不是唯一的方法，但是是经过项目实践行之有效的最佳实践。
在我们的项目中，我们大量使用了 Dojo 工具库来开发我们的前端代码，因此我们使用 Dojo 的自带测试框架 DOH 来进行自动化单元测试，但是 DOH 并不能提供测试覆盖率的支持，于是我们借助 JSCoverage 来帮助我们计算覆盖率。

• 确定要测试的 JavaScript 代码并整理到独立的文件夹中为了使代码整洁和可测试性，我们需要尽可能把 JavaScript 文件与 html 文件分开，做成单独的 JavaScript 文件，写在 HTML 中间的 JavaScript 代码是没法进行覆盖率分析的。另外为了后续工作的方便，尽量把需要测试的 JavaScript 代码放在一个独立的文件夹下面。
  在我们的项目中，我们把要测试的 JavaScript 代码放在了 iaas 目录之下。
  
• 编写 DOH 测试代码在明确了需要测试的 JavaScript 代码后，就可以开始针对他们编写 DOH 测试代码了。同样，这些测试代码也放到一个目录下便于管理。一般来说我们会针对每一个 JavaScript 文件或者模块编写一个测试文件，然后使用一个单独文件作为测试入口来加载所有的测试用例。
  在我们的项目中，所有的 DOH 测试代码放到 iaas/doh 的目录之下，然后在这个目录下建立 iaasDOHTest.js 文件作为入口，并在这个文件中加载其他所有测试用例，见清单 1
  清单 1. iaasDOHTest.js 代码

  1 2 3 4 5 6 7 8 9 10 11 12 13

  require(dojoConfig,[     "iaas/doh/wizard/Wizard",     //iaas/util  util 模块的测试用例     "iaas/doh/util/image",     "iaas/doh/util/instance",     "iaas/doh/util/key",           //iaas/singleton   singleton 模块的测试用例     "iaas/doh/singleton/imageListStore",     "iaas/doh/singleton/instanceListStore",     "iaas/doh/singleton/keyListStore" ]);

  
  
  
  这时，我们就能通过在浏览器输入以下地址直接运行这个 DOH 测试并察看测试结果了。
  

  1	https://localhost/framework/doh/runnerCoverage.html?test=iaas/doh/iaasDOHTest

  
  
  
  由于本文的重点在于整合使用测试工具的最佳实践，对于如何编写 DOH 测试本身并不作展开介绍，读者可以通过登陆参考文献中的 DOH 官网来学习这部分知识。
  
• 使用 JSCoverage 来生成测试代码JSCoverage 是现有的 JavaScript 代码的覆盖率测试工具之一，其原理是先对待分析的 JavaScript 代码进行注入修改，生成新的代码，让其有能力对执行过的代码进行记录，然后在测试的时候运行新的代码。新代码在语义上完全包含了老的代码，从而保证测试的正确性，又能通过代码执行的记录算出覆盖率。
  首先我们要安装 JSCoverage 软件，在我们项目中把该软件装到了/jscoverage 目录下，这个目录和 iaas 目录同级。
  然后我们就要进行代码的注入修改了，JSCoverage 软件有几种使用方式，如服务器模式，代理模式和文件模式等。在我们的实例中，我们选用文件模式，因为我们觉得这种模式最为灵活，可以和 DOH 集成更好。以文件模式使用 JSCoverage 时，在 jscoverage 的目录下按照清单 2 执行命令
  清单 2. 案例中使用 jscoverage 的命令

  1	sudo ./jscoverage --encoding=UTF-8 --no-instrument= doh ./iaas ./instrumented

  
  
  
  在这行代码中，jscoverage 是一个可执行命令，紧跟其后的是我们在命令中用到的两个可选参数：
  
  • --encoding 选项: 制定编码方式，若不指定，默认为 ISO-8859-1。我们的 JavaScript 文件编码方式为 utf-8，所以这里也要改为 utf-8
  • --no-instrument 选项：不分析位于指定文件夹下的 JavaScript 文件。有时候在我们的 JavaScript 源代码中也有些不需要进行覆盖率统计的文件，比如第三方编写的代码库。在上述示例中，我们并不对 doh 目录下的文件进行注入，因为我们需要的是待测文件的覆盖率，而不是测试文件本身的覆盖率。
  之后两个参数是命令的必须参数：
  
  • 代码源目录：待测试代码的目录，JSCoverage 会读取这个目录下的文件进行注入分析。
  • 目标目录：JSCoverage 生成新的代码后会放到这个目录之中，在统计覆盖率的时候需要运行这个目录下的代码，另外，覆盖率分析结果报表也会放在这个目录之中。
  在我们的例子中，JSCoverage 将分析 iaas 这个目录下的文件，进行注入后把生成的文件放到 instrumented 目录下面。
  这时，如果我们运行 instrumented 目录下面的代码，JSCoverage就会进行代码覆盖率的统计了，生成的结果会放在 instrumented 目录下面的 jscoverage.html文件中，可以使用浏览器直接打开这个 HTML 文件，就能看到覆盖率分析结果了。
  
• 定制 DOH 的 runner.html 文件，以同时进行 DOH 的测试和统计代码覆盖率。接下来我们就要使 DOH 能够运行到生成的新的代码，而不是原来的代码了。同时，我们也希望 DOH 可以直接连到测试的覆盖率结果页面。
  按照清单 3 所示，定制 DOH 的 runner.html 文件，增加访问 JSCoverage 结果的按钮，引用 JSCoverage 的测试结果。
  清单 3. 案例中增加按钮访问 JSCoverage 结果

  1 2 3

  <button style="margin-top: 5px; float: left;" onclick="window.open('../../contributions/iaas/1.0/shared/instrumented/jscoverage.html');"> Coverage Report</button>

  
  
  
  为了避免把原来的 DOH 自带文件覆盖，将新定制过的 runner.html 文件改名，比如 runnerCoverage.html，放到 DOH 的 runner.html 相同的目录。
  在选择执行代码的问题上，DOH 可以通过在 url 后面通过 path 参数，来指定模块的加载路径，因此，现在执行单元测试并且计算代码覆盖的 url 是
  

  1 2	https://localhost/framework/doh/runnerCoverage.html?test=iaas/doh/iaasDOHTest& paths=iaas,../../instrumented

  
  
  
  可以看到 DOH 把 iaas 模块映射到了 instrumented 目录，这样实际测试的就是经过注入的代码了。访问该 url 后，运行结果如图 1 所示：
  图 1. DOH 运行结果点击 Coverage Result，我们可以看到如下代码覆盖率统计结果，如图 2 所示
  图 2 代码覆盖率统计结果需要注意的是，注入后的代码要计算覆盖率，比原始代码要大得多，运行时在性能上会有损失，执行速度大致是原来的一半。因此这种方法主要是为了得到单元测试的覆盖率。有时候我们也会需要性能测试，了解执行这些测试所需要的时间，这个时候就要用原来的代码了。
  如果还是要运行原始的 DOH 测试，可以通过如下的链接进行访问：
  

  1	https://localhost/framework/doh/runner.html?test=iaas/doh/iaasDOHTest&paths=iaas,../../iaas

  
  
  
  注意这两个链接的两个不同之处，一个是 DOH 的主文件，我们仍然使用 runner.html。另外就是参数 path，仍然指向原始的文件 iaas 目录。上面两个链接可以同时工作，也便于测试时的自由选用。