前端测试二三事

从事前端开发也5年多了,在大小公司也都呆过。但说实话,基本没有遇到有前端项目或前端工程师去好好做测试,当然这里所说的测试是运用工具进行的自动化测试。但当项目一大,项目迭代时间一长,一些基础的方法或模块,基本都不敢改或改得十分小心翼翼。每次新功能上线,都得把整个项目手动测试一遍,因为怕会引起新的bug。这个时候总会提到建立前端自动化测试,但总会因为这样那样的原因,不了了之。

前端测试分类

在文章开始,我们先回答一个问题:前端测试包含那些内容昵?从软件工程的角度看,测试可以从不同的角度分为许多不同种类。我们也常常会听到与测试相关的一些名词,如灰度测试、冒烟测试、功能测试、单元测试、集成测试,性能测试、白/黑盒测试等等。

但站在前端角度,或者说前端工程师可以做那些测试工作来保证项目质量昵。从一些开源项目或项目脚手架中可以看出,前端测试主要包含:

  • 基准测试
  • 单元测试
  • 代码覆盖率测试
  • 功能测试(e2e)

基准测试

基准测试是测试代码的执行性能。在前端开发中,我们使用benchmark或jsperf来做基准测试。使用方法也很简单,这里就不再赘述了。

前端单元测试

前端单元测试主要目的是保证基础方法的正确性。这种测试也相对容易编写和维护。常用的测试框架有:

  • Mocha
  • karma
  • Nodeunit
  • ava
  • qunit

常用的断言库有:

  • shouldjs
  • chai
  • jasmine

单元测试又有BDD(Behavior-Driven Development),TDD(Test-Driven Development)之分。TDD要求测试先行,即写代码实现前先写测试用例;而BDD不关心代码实现,主要测试功能场景。

前端代码覆盖率测试

所谓代码覆盖率测试就是指所有的代码逻辑是不是都测试到了。它有四个维度指标:

  • 行覆盖率(line coverage)
  • 函数覆盖率(function coverage)
  • 分支覆盖率(branch coverage)
  • 语句覆盖率(statement coverage)

我们可以使用istanbul这个库来测试前端中的代码覆盖率

前端功能测试,又叫e2e测试

前端功能测试是比较麻烦的。因为涉及到UI和交互。UI可能会经常变动,交互要模拟人的操作,这些都让编写与维护e2e测试变得困难重重。

以前比较流行的功能测试组合是phantomjs+casperjs。但phantomjs作者因为chrome headless模式而停止维护phantomjs后,现在比较流行的e2e测试工具是nightwatch

小结

本文主要介绍了前端中的各种测试概念及使用什么测试工具库去完成测试。理论上,测试可以保证更好的项目质量,但编写与维护测试用例本身也需要时间投入。有时间投入就要考虑收益。前端项目中UI及交互变化是经常的事,所以维护全部e2e测试就不划算。

个人觉得,对于要长期维护的大型项目,可以加入性价比高的单元测试,至于其它测试,可选择性维护一些。当然也希望随着技术的进步,以后编写维护前端测试会变得更简单,方便!

留言列表

    发表评论: