基于守夜人的端到端测试环境搭建过程

不同公司和组织之间的测试效率差异很大。在这个丰富的交互和响应处理的时代，许多组织使用敏捷方法来开发应用程序，因此测试自动化已经成为软件项目必不可少的一部分。测试自动化意味着使用软件工具在项目中重复运行测试，并为回归测试提供反馈。

端到端测试(E2E)不同于单元测试，它侧重于检查函数的输出结果。端到端测试将尽可能从用户的角度模拟真实系统的访问行为。对于Web应用程序，这意味着打开浏览器、加载页面、运行JavaScript以及与DOM交互。简而言之，单元测试的功能只能保证单个组件的质量，不能测试特定的业务流程是否正常工作，而E2E恰恰相反。它是组件之间以及用户和真实环境之间的更高级别的集成测试。

E2E测试的意义在于它可以通过程序固化和模拟用户操作。对于开发者来说，E2E测试可以大大提高Web的开发效率，节省开发时间。

让我们首先看看从开发到手动测试的成功过程，没有E2E测试：

这个过程是简化的，不包括在观察结果的时候打开浏览器的调试窗口观察一些内部运行变量或者网页代码结构。整个过程纯粹是手工操作，手工操作最大的问题就是一个程序可能要调试好几次，同一操作必须重复好几次。即使有严格的规定，大多数程序员也是随便做“pass”操作的，尤其是在输入样本数据时，大多数程序员几乎是随机输的，而“aaa”、“asd”、“aws”等随机数或无意义字符出现的频率最高。用这种方式开发的程序被接受后，产品经理或客户往往会说一句话：“我上次试了，没问题！”说到底，这样的错误不是程序员自己造成的，因为这是一种人性！如果一个人多次重复他或她觉得没有意义的行为，他或她要么会避免这样做，要么会对他们消极对待，如果他或她无法逃避的话。

因此，我们应该用一种更高效、更人性化、更有意义的方式来应对，那就是E2E测试。让我们首先看看使用E2E测试后开发过程会变成什么样：

从运行测试开始，一切都是自动的！这是最大的区别，更重要的是，我们要写E2E测试的时候，需要对操作需求有深刻的理解，在这个过程中还有很大的机会去优化用户的操作，从而提升用户体验。

守夜人

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

Nightwatch是一个新开发的基于Node.js的验收测试框架，使用Selenium WebDriver API实现web应用程序测试的自动化。它提供了简单的语法，并支持使用JavaScript和CSS选择器编写在Selenium服务器上运行的端到端测试。

该框架配置后的具体工作流程如下图所示。

Nightwatch采用了Fluent接口模式(https://en.wikipedia.org/wiki/Fluent_interface)，简化了端到端测试的编写，其语法非常简单易懂，如下代码所示。

this.demoTestGoogle=函数(浏览器){ browser。url('http://www.google.com ')。waitforlementvisible(' body '，1000)。setValue('input[type=text]'，' nightwatch ')。waitforlementvisible(' button[name=BtNG]'，1000)。点击('按钮[名称=btnG])。暂停(1000)。end()；}我们可以从“夜间观察”网站找到当前可用的功能列表：

简单但强大的语法。有了JavaScript和CSS选择器，开发人员可以非常快速地编写测试。开发人员不需要初始化其他对象和类，只需要编写测试规范。

内置命令行测试运行程序，允许开发人员同时运行所有测试——组或单次运行。

自动管理Selenium服务器；如果Selenium正在另一台机器上运行，您也可以禁用此功能。

支持持续集成：内置JUnit XML报表，开发人员可以在构建过程中将自己的测试与系统(如Hudson或Teamcity)进行集成。

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

易于扩展，让开发者可以根据自己的需求实现与自己应用相关的命令。

配置守夜人

要了解Nightwatch的配置和使用，就要从工程结构入手，就像前面介绍的摩卡一样。

工程结构。 测试 e2e 自定义-断言//自定义断言element count . js page-objects//page对象文件夹报表//输出报表文件夹自动截屏nightwatch.conf.js//nightwatch运行配置runner . js//runnerspecs//测试文件test . spec . js

以上是vue-cli为我们自动创建的Nightwatch工程结构，specs是存储测试文件的文件夹，Nightwatch.conf.js是Nightwatch的运行配置文件。其他目录将在具体章节中逐一介绍。

基本配置

Nightwatch的配置项集中在nightwatch.conf.js中，其实这个配置也可以是JSON格式的，只需要简单的在JSON格式的配置项中写入一些常量就可以了。但是，一些额外的配置代码可以通过使用模块配置来执行，这使得它更加灵活。以下是我调整后的nightwatch.conf.js文件：

require(' babel-register ')；var config=require('././config ')；var硒化服务器=require(' selenium-server ')；var phantom js=require(' phantom js-prebuilded ')；module . exports={ ' src _ folders ' :[' test/e2e/specs ']，' output _ folder ' : ' test/e2e/reports '，' custom _ assessments _ path ' :[' test/e2e/custom-assessments ']，' page _ objects _ path ' : ' test/e2e/page-objects '，' selenium ' : { ' start _ process ' 3: true，' server _ path ' 33: selenium server . path，' port ' :path } }、“test _ settings”: {“default”: {“selenium _ port”: 4444、“selenium _ host”:“localhost”、“silent”: True、launch _ URL :“http://localhost :”(process . env . port | | config . dev . port)、“globals”: { }、“chrome”: {“Desired Capabilities”33330

基本配置；

硒配置；

测试环境配置。

配置模块中的所有根元素配置项都属于基本配置，用于控制Nightwatch的全局操作。下表详细描述了守夜人的基本配置项目。

硒构型

Selenium是一套软件工具，每个工具都有不同的方法来支持测试自动化。大多数使用Selenium的质量保证工程师只关注一两个最能满足他们项目需求的工具。但是，如果您学习了所有的工具，您将有更多的选择来解决不同类型的测试自动化问题。这套工具测试功能丰富，非常适合测试各类网站应用的需求。这些操作非常灵活，有很多选项可以定位UI元素，并将预期的测试结果与实际行为进行比较。Selenium最关键的特性之一是它支持在多浏览器平台上进行测试。

硒诞生于2004年。当在ThoughtWorks工作的Jason Huggins在测试一个内部应用程序时，作为一个聪明的家伙，他意识到他的时间应该比每次变更的手工测试更有价值。他开发了一个可以驱动页面相互交互的JavaScript库，这样多个浏览器就可以自动返回测试结果。该库最终成为硒的核心，是硒遥控和硒集成开发环境所有功能的基础。Selenium RC是开创性的，因为没有其他产品可以让你用自己喜欢的语言来控制浏览器。

硒是一个巨大的工具，所以它也有自己的缺点。因为它使用的是基于JavaScript的自动化引擎，而且浏览器对JavaScript有很多安全限制，有些事情很难实现。更糟糕的是，网站应用程序变得越来越强大，它们使用新浏览器提供的各种功能，这使得这些限制令人痛苦。2006年，谷歌工程师西蒙斯图尔特(Simon Stewart)开始基于这个名为“网络驱动”的项目进行开发。此时，谷歌长期以来一直是Selenium的重度用户，但测试工程师不得不绕过它的限制。Simon需要一个可以通过浏览器和操作系统的本地方法直接与浏览器对话的测试工具，从而解决JavaScript环境的沙盒问题。网络驱动项目旨在解决硒的痛点。

长期以来，Selenium 1(也称为Selenium RC或Remote Control)是最重要的Selenium项目，直到WebDriver和Selenium的结合产生了最新、最强大的Selenium 2。Seleinum 1仍然受到积极支持(更多维护)，并提供了Selenium 2在短时间内可能不支持的一些功能，包括支持多种语言(Java、JavaScript、Ruby、PHP、Python、Perl和C#)以及支持大多数浏览器。

Selenium 2(也称为Selenium WebDriver)代表了这个项目的未来方向，也是Selenium工具集中新增的。这个新的自动化工具提供了许多显著的特性，包括更具凝聚力和面向对象的应用编程接口，并解决了旧版本的限制。Selenium和WebDriver的作者一致认为两者都有各自的优势，它们的结合使这个自动化工具更加健壮。硒2.0就是这里的产品。它支持WebDriver API及其底层技术，为在WebDriver API下通过Selenium 1技术移植测试代码提供了极大的灵活性。另外，为了向后兼容，Selenium 2仍然使用Selenium 1的Selenium RC接口。

你可以在http://selenium-release.storage.googleapis.com/index.html.下载各种稳定版本的硒

如果在Vue项目中使用Vue-CLI，那么Nightwatch将不需要任何额外的配置，否则您将需要在命令行上安装Selenium的打包类库：

$ npm i硒-服务器-D

守夜人可以引导硒启动。实际上，我们不需要修改Selenium服务器的默认运行配置。在nightwatch.conf.js配置文件中，我们只需要声明Selenium server的二进制执行文件的具体路径，可以从selenium-server包提供的Selenium wrapper对象的path属性中获取，无需将本机的物理路径写入配置文件。

var硒化服务器=require(' selenium-server ')；module . exports={ ' selenium ' : { ' start _ process ' : true，' server _ path ' : selenium server . path，' port': 4444，Cli _ args ' : { ' web driver . chrome . driver ' : require(' chrome driver ')。路径}}，//.省略}以下是Selenium配置项的详细说明：

Cli_args配置

web driver . firefox . profile:selenium默认为每个会话创建一个独立的Firefox配置方案。如果想使用新的驱动程序配置，可以在这里声明。

web driver . chrome . driver:Night Watch也可以使用Chrome浏览器加载测试。当然，您必须首先下载ChromeDriver的二进制运行时库来支持这一点。此ci用于指示ChromeDriver的安装位置。此外，您需要在test_settings配置中使用desiredCapabilities对象来为Chrome创建一个配置方案。

web driver . ie . driver:Night Watch也支持IE，其功能和用法与Chrome相同，这里不再赘述。

测试环境配置

test_settings中的项目将应用于所有测试用例。在E2E测试中，我们可以通过Nightwatch提供的默认实例对象浏览器获得这些配置值。vue-cli为我们创建了三个环境配置项，即default、firefox和chrome。默认配置是应用于所有环境的基本配置选项，其他配置项将自动覆盖与默认相同的配置值。

Firefox和chrome是描述和配置两种浏览器驱动的两个配置项。它们也是其他语言或框架的常客，但由于性能较低，通常只是实战中的展示。下面，我将介绍一款实战效率更高的无头浏览器PhantomJS，并对其进行替换。

不要被vue-cli创建的默认配置所迷惑。test_settings不仅仅是浏览器一些基本操作参数的配置，它的正确用法是E2E测试环境的配置。单元测试只能在开发环境下运行，而E2E可以在本地环境和网络环境下运行，更准确的说是开发环境和生产环境下运行。因此，可以通过以下方式设置该配置项：

test _ settings ' : { ' default ' : { ' selenium _ port ' : 4444，' selenium_host': 'localhost '，' silent': true，launch _ URL 3: ' http://localhost 3: '(process . env . port | | config . dev . port)，' globals': {}，' dev ' : { ' desired capabilities ' : { }

下表详细描述了测试环境配置项目：

执行E2E测试

vue-cli已经配置了在package.json中运行测试的指令：

$ npm运行e2e

该指令默认启用Chrome运行时环境。如果指定运行时环境，可以使用- env选项：

$ npm运行e2e -环境

使用无头浏览器PhantomJS

vue-cli webpack脚手架模板非常容易使用，这大大降低了环境的复杂性，但它没有很好地解释其中使用的每个模块的原因和功能，以及它们的使用特点。这对于初学者来说确实把门槛降到了最低点，但是从工程开发的角度来看，仅仅知道这些环境或者工具的存在是远远不够的，这样的坑就埋在了Nightwatch里面。

在配置Mocha和Karma的时候，我们的开发环境中已经安装了PhantomJS，但是如果你仔细阅读一下Nightwatch的默认配置，你会惊讶地发现，根本没有使用PhantomJS，只配置了Chrome和Firefox！有什么问题？一个字：慢！

我在2013年使用了一个标准配置的iMac(i5CPU、8GB内存、1TB HDD硬盘)来运行本书下一章的示例程序。实际运行一次的时间大概在15秒左右！一次只需要15秒，所以你可以想象我们至少要运行一个场景多少次。Chrome启动非常慢，所以如果我们使用真正的浏览器，我们可以像E2E一样进行自动化测试。

表演只能拖后腿，人生不能浪费在无谓的等待中！这就是为什么我们选择了PhantomJS！这种环境最大的失败是默认情况下没有将PhantomJS配置为主浏览器。

解决方案总是比问题多，所以如果没有解决方案，我们可以自己配置。其实解决方法很简单。打开nightwatch.conf.js，在test_settings配置部分添加以下内容：

test _ settings ' : { ' default ' : {//.}}，' phantom ' : { ' desired capabilities ' : { ' browserName ' : ' phantomjs '，' javascriptEnabled': true，' acceptSslCerts ' : true，' phantomjs . page . settings . user agent ' : ' Mozilla/5.0(Macintosh；Intel MacOS X 10 _ 10 _ 5)applebwebkit/537.36(KHTML，像Gecko)Chrome/46 . 0 . 2490 . 80 Safari/537.36 '，Phantom js . binary . path ' : ' node _ modules/PhantomJS-prebuilded/bin/Phantom js ' } } Night Watch通过Selenium加载一个GhostDriver来引导Phantom js浏览器。以上内容相当于告诉Selenium加载一个GhostDriver，可执行程序指向安装在npm上的phantomjs-prebuild包，然后用这个包引导安装在这台机器上的PhantomJS启动。

上面提到的PhantomJS的二进制程序的地址很难看，Selenium执行器在原生配置中的地址也是一样的。这里，引入了一种更为DRY的方法来处理这些路径：

var硒化服务器=require(' selenium-server ')；var phantom js=require(' phantom js-prebuilded ')；Module.exports={//.省略“selenium”: {//.省略“server _ path”: selenium服务器。路径，}，Test_settings': {//.省略“幻影”: {“所需功能”: {//.省略' phantom js . binary . path ' : phantom js . path } }//.省略}}完成此操作

如果(选择。的索引('-env')==-1) {opts=opts。concat (['-env '，' chrome'])}只需将chrome更改为phantom:

如果(选择。的索引('-env')==-1) {opts=opts。concat (['-env '，' phantom'])}重新加载测试程序，在同一个iMac上运行速度直接降低到5秒，测试运行速度提升3倍！如果你有一台配置更好的机器，把硬盘换成SSD后速度会更惊人。

守夜人和黄瓜

如果你正在开发的项目业务复杂度不大，可以直接使用Nightwatch推荐的链式调用方法。但是，当这种方法真正应用到业务流程多或者业务操作相对复杂的应用场景中时，你会觉得总会有无穷无尽的E2E测试，因为没有办法一次覆盖所有的需求！

事实上，E2E测试是行为驱动开发的实现方法。如果跳过行为驱动开发的分析部分，直接写E2E，结果只能是一堆严重碎片化的测试场景，甚至是很多根本不应该出现的操作。

好在Nightwatch有很好的扩展性和兼容性，可以集成最正统的BDD测试框架，https://cucumber.io/.黄瓜是一个最初诞生于Ruby世界的BDD框架，但是它也有很多语言实现版本。我们可以安装一套专门为守夜人编写的黄瓜版——守夜人-黄瓜(https://github.com/mucsi96/nightwatch-cucumber)。本章只介绍环境和工具的配置，如何应用BDD超出了本书的知识范围。有兴趣的话可以参考《攀登架构之巅》中行为驱动开发的章节内容。

$ npm i夜间观察-黄瓜-D

然后在~/test/e2e/nightwatch.conf.js文件中添加黄瓜的配置：

//.省略require(' babel-register ')；require(' night watch-cumulus ')({ night watchclient天冬ameter: true，featurefiles :[' test/e2e/features ']，step definition :[' test/e2e/features/step _ definitions ']，jsonreport : ' test/e2e/reports/cumulus . JSON '，htmlreport : ' test/e2e/reports/cumulus . html '，openreport : false })；摘要

以上是边肖推出的基于Nightwatch的vue-cli脚手架端到端测试环境的流程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！