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
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
运行成功的截图: