angularjs e2e测试初步学习（一）

e2e测试是从用户角度出发，认为整个系统都是一个黑盒，只有UI暴露出来。

angularjs的测试框架是采用protractor。

一、建立文件

首先建立一个项目文件夹test，而后再建立两个文件，一个是测试文件testbook.spec.js，另外一个是配置文件testbook.conf.js

能够先在test文件夹下使用npm init，自动建立package.json文件，文件目录以下：

二、安装测试框架

直接使用npm下载protractor框架以及以下图的全部依赖。

三、直接上代码

配置文件testbook.conf.js

 1 const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
 2 
 3 exports.config = {
 4     // 测试框架
 5     framework: 'jasmine',
 6     // 测试服务器接入地址
 7     // seleniumAddress: 'http:127.0.0.1:3000',
 8     // 须要运行的测试程序代码文件列表
 9     specs: ['testbook.spec.js'],
10     baseUrl: 'http://127.0.0.1:3000',
11     directConnect: true,
12     chromeDriver: './node_modules/.bin/chromedriver',
13 
14     jasmineNodeOpts: {
15         print: function () {} // 禁止默认的...输出
16     },
17 
18     onPrepare: function () {
19         let specReporter = new SpecReporter({ // add jasmine-spec-reporter
20             spec: {
21                 displayPending: true,
22                 displayErrorMessages: true,
23                 displayStacktrace: true
24             },
25             summary: {
26                 displayErrorMessages: true
27             }
28 
29         });
30         // 初始化必须
31         // 一个是jasmine的运行环境,是单例模式jasmine.getEnv()
32         // 还有一个是将测试结果显示出来的addReporter(specReporter)
33         jasmine.getEnv().addReporter(specReporter);
34     }
35 }

测试文件testbook.spec.js

 1 // spec.js
 2 
 3 // describe定义一个测试案例集，it为单个测试案例
 4 describe('Protractor Demo App', function () {
 5     it('should have some text', function () {
 6         // browser是经过protractor建立expect的全局变量,用于浏览器范围的命令控制,好比tonguebrowser.get进行导航
 7         // browser.get 跳转到指定页面,还会从新刷新整个页面
 8         browser.get('/');
 9         // browser.pause(); // 让浏览器停下来
10         // 测试二者值是否相等,相等则测试经过,不相等则测试失败
11         expect(browser.getTitle()).toEqual('Book System');
12     });
13 });

上面代码简单测试了跳转到的指定页面的title是否和Book System相等。

运行命令为：./node_modules/.bin/protractor testbook.conf.js

运行成功的截图：