使用karma做多浏览器的UI测试
2016-01-27 16:38
585 查看
avalon1.6开发得差不多,这次使用先进的开发理念进行开发,比如模块化,单元测试什么。。。
ui测试是重要的一环,之前用阿里的totoro,但打开浏览器不方便。于是从webdrieverio, nightwatch,一直找到karma!
karma的官网尤其烂,我搞了好久才能运行起来
用到的npm模块有:
在你项目下添加karma.config.js
然后我们在此项目中建立一个叫karma的目录,里面建index.js
然后执行karma start命令就能看到效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/06/a7e662263e39499252d1a581835d9683.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/06/e77e3a2da50af75f2fd40c6434ead5ee.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/06/703d8a8b46ab366b58e1e4f23b5fe366.png)
大家还看不懂,可以看这里
ui测试是重要的一环,之前用阿里的totoro,但打开浏览器不方便。于是从webdrieverio, nightwatch,一直找到karma!
karma的官网尤其烂,我搞了好久才能运行起来
用到的npm模块有:
karma karma-mocha karma-mocha-reporter karma-firefox-launcher karma-chrome-launcher karma-opera-launcher karma-safari-launcher
在你项目下添加karma.config.js
module.exports = function (config) { config.set({ basePath: '', frameworks: ['mocha'], files: [ {pattern: 'node_modules/chai/chai.js', include: true}, 'karma/index.js' ], exclude: [], reporters: ['mocha'], mochaReporter: { output: 'autowatch', colors: { success: 'green', info: 'bgGreen', warning: 'cyan', error: 'bgRed' } }, port: 9876, colors: true, logLevel: config.LOG_INFO, //autoWatch为true,Karma将自动执行测试用例 autoWatch: true, //http://www.cnblogs.com/NetSos/p/4371075.html browsers: ['Opera','Chrome', 'Firefox',"Safari"], singleRun: false, plugins: [ 'karma-mocha', 'karma-mocha-reporter', 'karma-firefox-launcher', 'karma-chrome-launcher', 'karma-opera-launcher', 'karma-safari-launcher' ] }) }
然后我们在此项目中建立一个叫karma的目录,里面建index.js
/** * Created with IntelliJ IDEA. * User: shenyanchao * Date: 3/5/13 * Time: 5:51 PM * To change this template use File | Settings | File Templates. */ var assert = chai.assert; var should = chai.should(); describe('Array', function(){ before(function(){ console.log('this called in before all'); }); beforeEach(function(){ console.log('invoke before each method'); }); afterEach(function(){ console.log('invoke after each method'); }); after(function(){ console.log('this called in after all'); }); describe('#indexOf()', function(){ it('should return -1 when the value is not present', function(){ console.log('invoke one assert'); assert.equal(-1, [1,2,3].indexOf(5)); assert.equal(-1, [1,2,3].indexOf(0)); }); }); describe('#indexOf()', function(){ it('should return -1 when the value is not present', function(){ console.log('invoke second should'); [1,2,3].indexOf(5).should.equal(-1); [1,2,3].indexOf(0).should.equal(-1); }); }); })
然后执行karma start命令就能看到效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/06/a7e662263e39499252d1a581835d9683.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/06/e77e3a2da50af75f2fd40c6434ead5ee.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/06/703d8a8b46ab366b58e1e4f23b5fe366.png)
大家还看不懂,可以看这里
相关文章推荐
- managedQuery 和 getContentResolver().query的区别
- JAVA基础笔记之StringBuilder和StringBuffer
- request.getRequestDispatcher()和response.sendRedirect()
- 错误400-The request sent by the client was syntactically incorrect
- mysql 5.5及以前版本的编码问题“Incorrect string value: '\xE6\x9B\xB9\xE5\x86\xAC...' for column 'realname' at row 1”
- Retrofit(2.0)入门小错误 -- Could not locate ResponseBody xxx Tried: * retrofit.BuiltInConverters
- Handler、Message、MessageQueue、Looper 理解
- 解决ntp的错误 no server suitable for synchronization found
- SPOJ QTREE - Query on a tree 【树链剖分】
- 实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(三)
- PB协议报错 it is missing required fields: (cannot determine missing fields for lite message)
- Juit3原理分析一(测试入门)
- UIMenuController,复制UILabel上的文字
- 使用UITabBarController创建Tabbar获取tabBarItem的点击方法
- UITabBarController和UINavigationController的整合使用
- Speeding up Gradle builds
- 交互设计的用户行为模式十二项 【转载】
- UITableViewCell中的bug
- Please specify exact device preset UUID
- build and install everything into local directory