使用Nodejs+Protractor搭建测试环境

Protractor是一个end-to-end的测试框架，从网络上获得的答案是Protractor是做为Angular JS应用程序的测试框架。它的构建基于Selenium WebDriver之上，且围绕着Selenium WebDriver进行封装，所以，Protractor中包含的每个feature对于Selenium WebDriver都是可用的。

至于为何会强调Protractor做为 Angular JS 应用程序的测试框架，或许是由于它针对Angular JS 提供了一些新的定位策略及功能，来更好的支持Angular JS。这里是我的对其进行的猜想，而猜想的依据是Protractor提供了诸如 waitForAngular()方法。

这篇文章就来简单看下怎么搭建一个基于Protractor测试框架的测试环境，用来写咱们的自动化测试代码。

第一步毫无疑问，安装Node.js，安装Node.js并不难，能够直接到 https://nodejs.org/en/ 网站上下载相应的安装包，这里选择的是windows的安装包：

上图高亮的npm package manager是咱们安装Node.js最为重要的目的，固然，Add to PATH是帮助咱们省去了配置变量的环节，也是很重要的，安装步骤很少赘述，若是图方便的话，闭上眼睛一路Next下去就好。

安装完成后，打开命令窗口，使用命令 "npm --version" 查看Node.js是否安装成功：

因为这里须要使用pratractor，因此须要使用命令 "npm install --global protractor" 或者 "npm install -g protractor" 全局安装protractor，为何是全局安装而不是本地安装，由于咱们这里只须要使用CLI(Command Line Interface) 而不须要用require将protractor包含进去，若是须要后者，则须要再在本地安装一次，固然，若是不放心，也彻底能够将全局和本地都安装一次，之后若是须要用，就能够直接用了，这里做为例子来看，只须要全局安装便可。

因为前面说过，Protractor是基于Selenium WebDriver的，而Selenium WebDriver须要安装Java的JDK，所以这里也一样须要安装JDK， 安装完JDK以后，一样的，在command window中输入命令：webdriver-manager update

这时候，能够试着启用webdriver, 注意，若是这里是先作了webdriver-manager update操做，而直接输入 webdriver-manager start则会不成功，它会提示 java 不能识别，它既不是内部也不是外部命令。而紧接着才安装JDK的话，在相同的command window中也一样会持续这个提示，此时只须要从新开一个新的command window便可。

这时候能够发现，webdriver 启动了，接下来咱们试着开始写case来看下是否是能够运行，这里选择的编译器为Visual Studio Code， 固然，我的也挺喜欢用IntelliJ IDEA~

先随便找一个目录建立一个文件夹，而后用Visual Studio Code打开，通常来讲，写一个简单的测试用例只须要两个文件，一个configure文件，一个test case文件就能够了，不过考虑到测试数据的存放，公共方法的共享等等各类因素，渐渐的，咱们的代码结构会随之而变化，这里不会讨论这些东西，但出于我的习惯，仍是选择了三个文件，一个configure文件叫作conf.js, 一个test case文件叫作spec.js，这里还有一个文件叫作TestData.js，考虑到从此本身练手可能会用不一样的网页，这个文件用来存在不一样的测试网页。 

先将三个文件建立出来，而后我的的习惯是先写TestData.js, 这个文件内容很简单，无非是存放一些URL，因此代码以下：

有了测试的URL， 咱们就能够开始写test case了，这里的test case来自于stack overflow 的protractor的介绍文章中他人提供的例子：

这里第3行(hmm... 第1行其实能够不用空的，由于不必)的目的就是为了能获得存放在TestData.js中的URL，一样的，若是之后会将一些被提取出来的公用方法存放在单独的文件中，而本身当前test case文件须要使用相应的方法，也须要使用 var xxx = require('xxx.js') 这样的语法。

最后要写的是最重要的conf.js文件，能够说，当环境搭建完成后，case是否是可以运行得起来，配置可全靠这个conf.js文件，不过不用担忧，由于就目前这个例子来讲，conf.js文件很好写：

对吧，确实好写，但是这个配置是什么意思呢？这个配置是告诉Protractor你的测试文件在什么地方以及你的Selenium 服务器在哪里。seleniumAddress就是指定Selenium的服务器，但是为何是这个地址呢，hmm....写这篇文章以前我还真没想过，好像看到的只要是选择配置seleniumAddress的，配置里都是用这个网址的……点进去看到的以下图所示：

从http://localhost:4444 上来看，这个应该是本机预留给Selenium WebDriver的端口号，所以，这个selenium address应该会默认设置全部其余的配置。

好了，若是这个时候你的webdriver没有启动的话，使用上面介绍过的 webdriver-manager start命令让它run起来吧，确保selenium webdriver正在运行，而后在conf.js文件所在的目录中打开command window, 咱们要来见证奇迹发生的时刻啦~

根据上面的配置，咱们在打开的command window中输入命令： protractor conf.js --config=specs, 而后就静静地看着屏幕上出现的一幕幕精彩表演吧。

此时，若是一切都正常的话，电脑将会自行打开Chrome浏览器，而后输入咱们指定的网址，完成咱们在case中指定的操做并进行一系列的验证，以后浏览器关闭，结果显示在command window中，好比下图：

固然，这幅图说明的是case运行成功的状况，若是有不成功的状况，也会在command window中有必定的提示，这里没有标注任何log，因此咱们看命令行显示看不出case到底作了什么，若是用log的方式一步步标注，那么，咱们能够很清晰地知道case作了什么，哪一步经过顺利，哪一步出现了误差……

到这里，其实本文就告一段落了，既验证了咱们搭建的测试框架可用，也宣告了咱们这条case的成功，不过，用心的读者们会发现一个问题，在咱们的配置文件里，咱们彻底没有对浏览器进行指定，可是run case的时候，却自顾自地打开了Chrome，这是为何呢？查找资料的时候，咱们可能会看到说Protractor对Chrome的支持是全部浏览器中最佳的，可是不是就能够直接认为这个framework默认启用的浏览器是Chrome呢？

答案是确定的~ Chrome is the default browser！

更多内容能够扫描下面二维码关注微信公众号: 倚楼听风雨的如月