前端自动化测试:测试到底测什么?

玩技站长 测试资讯评论59字数 1099阅读模式
摘要在实际开发过程中,编写自动化测试代码通常是开发人员不太喜欢的一个环节。大多数情况下,前端开发人员在开发完一项功能后,只是打开浏览器手动点击,查看效果是否正确,之后就很少对该块代码进...

对于稍微有一些开发经验的同学在开发过程中总会经历下面类似的问题:文章源自玩技e族-https://www.playezu.com/194058.html

  • 每次在版本发布上线之前,在电脑前蹲上好几个小时甚至是更长时间对你的应用进行测试,这个过程非常枯燥而痛苦。
  • 当代码的复杂度达到了一定的级别,当维护者的数量不止你一个,你应该会逐渐察觉到你在开发新功能或修复 bug 的时候,会变得越发小心翼翼,即使代码看起来没什么问题,但你心里还是会犯嘀咕:这个 Feature 会不会带来其他 Bug ?这个 Fix 会不会引入其他"Feature" ?
  • 当你想要对项目中的代码进行重构的时候,你会花费大量的时间进行回归测试。

以上这些问题都是由于大多数开发者所使用最基本的手动测试的方式所带来的问题,解决它的根本举措就是引入自动化测试方案。文章源自玩技e族-https://www.playezu.com/194058.html

测试的流程

在实际开发过程中,编写自动化测试代码通常是开发人员不太喜欢的一个环节。大多数情况下,前端开发人员在开发完一项功能后,只是打开浏览器手动点击,查看效果是否正确,之后就很少对该块代码进行管理。文章源自玩技e族-https://www.playezu.com/194058.html

造成这种情况的原因主要有两个:文章源自玩技e族-https://www.playezu.com/194058.html

  • 一个是业务繁忙,没有时间进行测试的编写。
  • 另一个是不知道如何编写测试。

但这些问题不应该作为我们掌握前端自动化测试的绊脚石。而且,一旦掌握了前端自动化测试方案,无论是对大型项目的开发,还是升职加薪,都是有益的。文章源自玩技e族-https://www.playezu.com/194058.html

提到测试的时候,即使是最简单的一个代码块可能都让初学者不知所措。最常问的问题的是“我怎么知道要测试什么?”。如果你正在写一个 Web 应用,那么你每个页面每个页面的测试用户交互的方式,就是一个很好的开端了。但 Web 应用也是由很多个函数和模块组成的代码单元,也是需要测试的。通常有两种情况:文章源自玩技e族-https://www.playezu.com/194058.html

  • 你接手的遗留代码没有写测试用例
  • 你必须从无到有的实现一个新功能

该怎么办呢?对于上面两种场景,你可以把测试视为代码的一部分来编写。我所说的这些代码,是用来检查给定的函数是否产生预期输出结果的。一个典型的测试流程如下:文章源自玩技e族-https://www.playezu.com/194058.html

1. 引入要测试的函数文章源自玩技e族-https://www.playezu.com/194058.html

2. 给函数一个输入文章源自玩技e族-https://www.playezu.com/194058.html

3. 定义预期输出文章源自玩技e族-https://www.playezu.com/194058.html

4. 检查函数是否返回了预期的输出结果

就这么多。这样看测试也没那么可怕的嘛:输入 —— 预期输出 —— 验证结果。

一个测试案例

下面来看一个例子:

如何保证上面代码的正确性?

下面来写一段测试代码:

命令行执行 node test.js 后,会看到错误信息:

  1. Error:1+2应该等于3,但是结果却是2

通过测试代码可以很方便的帮助验证代码的正确性。

封装测试工具函数

之前示例的测试代码太过繁琐,可以思考一下能否封装的更简便一些,比如下面这样:

上面的测试代码就像自然语言说话一样,很舒服。

实现 expect 方法:

增加错误提示信息:

本文转载自微信公众号「勾勾的前端世界」,可以通过以下二维码关注。转载本文请联系勾勾的前端世界公众号。

玩技站长微信
添加好友自动发送入群邀请
weinxin
rainbow-shownow
玩技官方公众号
官方微信公众号
weinxin
PLAYEZU
 
  • 版权提示:本站仅供存储任何法律责任由作者承担▷诈骗举报◁▷新闻不符◁▷我要投稿◁
    风险通知:非原创文章均为网络投稿真实性无法判断,侵权联系2523030730
    免责声明:内容来自用户上传发布或新闻客户端自媒体,切勿!切勿!切勿!添加联系方式以免受骗。
  • 原创转载:https://www.playezu.com/194058.html
    转载说明: 点我前往阅读>>>
匿名

发表评论

匿名网友
确定