angularjs e2e测试初步学习（一）

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

angularjs的测试框架是采用protractor。

1、创建文件

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

可以先在test文件夹下使用npm init，自动创建package.json文件，文件目录如下：

2、安装测试框架

直接使用npm下载protractor框架以及如下图的所有依赖。

3、直接上代码

配置文件testbook.conf.js

 const SpecReporter = require('jasmine-spec-reporter').SpecReporter;

 exports.config = {
     // 测试框架
     framework: 'jasmine',
     // 测试服务器接入地址
     // seleniumAddress: 'http:127.0.0.1:3000',
     // 需要运行的测试程序代码文件列表
     specs: ['testbook.spec.js'],
     baseUrl: 'http://127.0.0.1:3000',
     directConnect: true,
     chromeDriver: './node_modules/.bin/chromedriver',

     jasmineNodeOpts: {
         print: function () {} // 禁止默认的...输出
     },

     onPrepare: function () {
         let specReporter = new SpecReporter({ // add jasmine-spec-reporter
             spec: {
                 displayPending: true,
                 displayErrorMessages: true,
                 displayStacktrace: true
             },
             summary: {
                 displayErrorMessages: true
             }

         });
         // 初始化必须
         // 一个是jasmine的运行环境,是单例模式jasmine.getEnv()
         // 还有一个是将测试结果显示出来的addReporter(specReporter)
         jasmine.getEnv().addReporter(specReporter);
     }
 }

测试文件testbook.spec.js

 // spec.js

 // describe定义一个测试案例集，it为单个测试案例
 describe('Protractor Demo App', function () {
     it('should have some text', function () {
         // browser是通过protractor创建expect的全局变量,用于浏览器范围的命令控制,比如tonguebrowser.get进行导航
         // browser.get 跳转到指定页面,还会重新刷新整个页面
         browser.get('/');
         // browser.pause(); // 让浏览器停下来
         // 测试两者值是否相等,相等则测试通过,不相等则测试失败
         expect(browser.getTitle()).toEqual('Book System');
     });
 });

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

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

运行成功的截图：