电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: Web 页面自动化测试及代码覆盖率分析（1） [打印本页]

作者: look_w 时间: 2018-11-2 16:09 标题: Web 页面自动化测试及代码覆盖率分析（1）

问题描述随着 Web2.0 技术的发展，大家对于网站功能和易使用性的要求越来越高，网站的制作也越来越复杂。JavaScript 是基于 Web 的用户界面开发必不可少的脚本语言，为 Web 界面开发提供了很多便利。伴随着 Web 用户界面的受重视程度提升，对 JavaScript 代码的测试要求也越来越高，例如，针对不同的浏览器进行单元测试，并且希望更进一步得到这些测试代码覆盖率以便判断测试是否足够。可惜的是，相对于 Java 领域各种强大的单元测试工具，在 JavaScript 领域这方面的研究才起步不久，目前业界虽然有一些工具可以帮助进行 JavaScript 单元测试，也有工具可以做到代码覆盖率的统计，但是还处于各自为政状态。要把他们整合到一起协同工作并不容易。本文先就 JavaScript 单元测试和覆盖率做一简单介绍，然后用一个例子重点展现怎样整合这些工具达到强大的测试功能。
用户界面的自动化测试和单元测试一个网站的用户界面是非常易于变化的，当我们对于用户界面进行改动后，同样也需要有足够的测试来保证这个改动符合我们的预期，在理想状态下，开发人员在提交代码之前就能够进行这种测试并及时得到反馈，如果测试没有通过就不能提交代码。改正发现的问题后继续测试，并最终通过和提交。
然而即使在今天大多数的网站仍然是通过手工测试来保证用户界面的正确性，手工测试会占用到大量的人力物力，成本很高。而且手工测试花费的时间也多，很难在开发人员提交代码前给予及时的测试反馈，导致开发人员在没有足够测试的支持下提交代码，并造成潜在的代码质量问题。因此，我们需要自动化测试来保证代码的质量。
除了自动化之外，我们还需要单元测试，因为前端开发工程师要保证用户界面的正确性，但是如果进行传统的端到端测试，测试结果很大程度上会依赖于后端的运行结果。比如后端的一个错误会影响到前端界面不能按照预期来显示。所以在测试的时候需要把后端给替换成 mock，在测试用例中模拟后端的行为。
然而，对用户界面进行单元测试的难度，相对于其他模块的单元测试来说也更高。这通常是因为用户界面的代码总是和整个环境以及其他模块紧密相关，很难将它分离做单独的测试。好在大部分 JavaScript 开发框架都能够对于网站的用户界面和其背后的业务逻辑进行一定程度的解耦，另外还有很多测试工具在单元测试上提供支持。主流的 JavaScript 测试工具，如 DOH，QUnit，JSTestDriver，JSUnit 等，都提供了单元测试的可能性。
值得一提的是，虽然名义上使用哪个测试工具对于你使用哪个开发框架没有严格的依赖，但是部分测试工具是某些开发框架的扩展，它对于该框架有着天然的支持。比如 Qunit 之于 jQuery，以及 DOH 之于 Dojo。因此如果使用了 jQuery 或者 Dojo 开发用户界面，应该首选与之对应的 Qunit 或 DOH 来进行测试。
测试 JavaScript 代码覆盖率

有了自动化单元测试还不够，获取和分析代码覆盖率是确保测试质量的重要手段。代码覆盖率描述的是代码被测试的比例和程度。简单地说，光是编写用例来测试代码，而不检查究竟哪些代码被测试过，哪些还没有测试过，很容易形成测试的漏洞。代码覆盖率是一种白盒测试方法，因为它需要对代码本身进行理解和分析。通过测试代码覆盖率可以得知哪些代码未被覆盖，从而进一步补足测试用例。
对于 Java 编写的代码，我们已经有很成熟的覆盖率测试方案，例如开源工具库 EMMA 和 JoCoCo.然而对于 JavaScript 代码来说,无论是工具的成熟度还是人们对代码覆盖率的关注程度,都远不如 Java。这更需要我们对现有工具进行组合和定制。

目前业界主要的代码覆盖率工具是 JSCoverage，以及其后续版本 JSCover。另外一些新兴测试框架也逐渐加入了对于覆盖率的支持，比如 Intern。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)