cli 脚手架基于Nightwatch的端到端测试环境的过程

不同公司和组织之间的测试效率迥异。在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分。测试自动化意味着使用软件工具来反复运行项目中的测试,并为回归测试提供反馈。

端到端测试又简称E2E(End-To-End test)测试,它不同于单元测试侧重于检验函数的输出结果,端到端测试将尽可能从用户的视角,对真实系统的访问行为进行仿真。对于Web应用来说,这意味着需要打开浏览器、加载页面、运行JavaScript,以及进行与DOM交互等操作。简言之,单元测试的功能只能确保单个组件的质量,无法测试具体的业务流程是否运作正常,而E2E却正好与之相反,它是一个更高层次的面对组件与组件之间、用户与真实环境之间的一种集成性测试 。

E2E测试的意义在于可以通过程序固化和仿真用户操作,对于开发人员而言,基于E2E测试能极大地提高Web的开发效能,节约开发时间。

先来看看如果没有E2E测试下的一次从开发到手工测试成功的过程:

cli 脚手架基于Nightwatch的端到端测试环境的过程

这个过程还属于简化过的,还没有包括在观察结果时要打开浏览器的调试窗口观看某些内部的运行变量或者网页代码结构。整个过程都是纯人工操作,人工操作最大的问题是一个程序可能要调试好几次,同样的操作就要重复数遍。即使有严格的规定,程序员们大多都还是随便地做“通过”式操作,尤其在输入样本数据时,绝大多数的程序员几乎都是乱输,出现得最多的就是各种随意的数字或者是“aaa”、“asd”、“aws”这样毫无意义的字符。以这种方式开发出来的程序在验收时产品经理或者客户会经常说一句话:“我上次试过是没有问题的!”这样的失误归根结底不在程序员本身,因为这是一种人性!一个人如果重复多次自己都觉得毫无意义的动作时,要不就逃避不做,如果不能逃避就会消极对待。

所以我们应该用更高效、更能弥补人性化缺陷和更有意义的办法来处理,这就是E2E测试,先来看看如果使用E2E测试后的开发过程将会变成什么:

cli 脚手架基于Nightwatch的端到端测试环境的过程

从运行测试开始,所有的一切都是自动的!这就是最大的区别,还有更重要的一点是,当我们要写出E2E测试时就需要对操作需求有深刻的理解,在这一过程中还有很大的机会对用户的操作进行优化,从而提高用户体验。

 Nightwatch

vue-cli的webpack模板也为我们准备了一个当下很流行的E2E测试框架——Nightwatch。

Nightwatch是一套新近问世的基于Node.js的验收测试框架,使用Selenium WebDriver API以将Web应用测试自动化。它提供了简单的语法,支持使用JavaScript和CSS选择器来编写运行在Selenium服务器上的端到端测试。

这个框架在配置好后的具体工作流程如下图所示。

cli 脚手架基于Nightwatch的端到端测试环境的过程

Nightwatch采用Fluent interface模式(https://en.wikipedia.org/wiki/Fluent_interface)来简化端到端测试的编写,语法非常简洁易懂,正如以下代码所示。

this.demoTestGoogle = function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body', 1000) .setValue('input[type=text]', 'nightwatch') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .pause(1000) .assert.containsText('#main', 'The Night Watch') .end(); }

我们可以从Nightwatch网站找到当前提供特性的列表:

● 简单但强大的语法。只需要使用JavaScript和CSS选择器,开发者就能够非常迅捷地撰写测试。开发者也不必初始化其他对象和类,只需要编写测试规范即可。

● 内建命令行测试运行器,允许开发者同时运行全部测试——分组或单个运行。

● 自动管理Selenium服务器;如果Selenium运行在另一台机器上,那么也可以禁用此特性。

● 支持持续集成:内建JUnit XML报表,因此开发者可以在构建过程中,将自己的测试与系统(例如Hudson或Teamcity等)集成。

● 使用CSS选择器或Xpath,定位并验证页面中的元素或是执行命令。

● 易于扩展,便于开发者根据需要,实现与自己应用相关的命令。

配置 Nightwatch

要了解Nightwatch的配置和用法,与前文介绍Mocha一样,应该先从工程结构入手。

工程结构

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/62714f18e2ec5be970d0b5711dd26c25.html