前端自动化测试分享

自动化单元测试：karma+jasmine
自动化功能测试：phantomjs+casperjs

Transcript

1. 前端⾃自动化测试分享 ⺫⽬目录： 背景：TDD(T est Drive Development) ⾃自动化单元测试：Karma+jasmine ⾃自动化功能测试：phantomJS+casperJS
2. 背景：TDD TDD(T est Driven Development)测试驱动开发，是 敏捷开发中提出的最佳实践之⼀一。 ! 测试驱动开发，对软件质量起到了规范性的控制。 未写实现，先写测试，⼀一度成为Java领域研发的圣 经。随着Javascript兴起，功能越来越多，代码量越 来越⼤大，开发⼈人员书写代码⻛风格相差悬殊，真的有 必要建⽴立对代码的规范性控制。
3. ⾃自动化单元测试:karma+jasmine ⺫⽬目录： karma+jasmine介绍 Karma+jasmine安装 Karma + Jasmine配置 ⾃自动化单元测试 Karma和istanbul代码覆盖率
4. Karma+jasmine介绍 ⼀一、Karma介绍 Karma是T estacular的新名字，在2012年google开源了T estacular，2013年T estacular改名为 Karma。Karma是⼀一个让⼈人感到⾮非常神秘的名字，表⽰示佛教中的缘分，因果报应，⽐比 Cassandra这种名字更让⼈人猜不透！ ! Karma是⼀一个基于Node.js的JavaScript测试执⾏行过程管理⼯工具（T est Runner）。该⼯工具可 ⽤用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）⼯工具，也可和其 他代码编辑器⼀一起使⽤用。这个测试⼯工具的⼀一个强⼤大特性就是，它可以监控(Watch)⽂文件的变 化，然后⾃自⾏行执⾏行，通过console.log显⽰示测试结果。 ! Jasmine是单元测试框架，今天将介绍⽤用Karma让Jasmine测试⾃自动化完成。 ! istanbul是⼀一个单元测试代码覆盖率检查⼯工具，可以很直观地告诉我们，单元测试对代码的 控制程度。 ! !
5. Karma+jasmine介绍 ⼆二、jasmine介绍 jasmine官⺴⽹网：http://jasmine.github.io/ ! jasmine很有意思的提出了BDD(Behavior Driven Development) ⾏行为驱动开发，其本质还是TDD. ! Jasmine是⼀一个⽤用来编写Javascript测试的框架，它不依赖于任 何其它的javascript框架。它有拥有灵巧⽽而明确的语法可以让你 轻松的编写测试代码。 ! !
6. Karma+jasmine介绍 jasmine的结构很简单： ! describe("A suite", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); ! afterEach(function() { foo = 0; }); ! it("contains spec with an expectation", function() { expect(true).toBe(true); }); }); ! 每个测试都在⼀一个测试集中运⾏行，Suite就是⼀一个测试集，⽤用describe函数封装。 Spec表⽰示每个测试⽤用例，⽤用it函数封 装。通过expect函数，作为程序断⾔言来判断相等关系。setup过程⽤用beforeEach函数封装，tearDown过程⽤用afterEach 封装。 事实上jasmine就是JUNIT的javascript重写版
7. Karma安装 #安装Karma 2014270deMacBook-Pro-3:~ a2014270$ >mkdir karmaL 2014270deMacBook-Pro-3:~ a2014270$ >cd karmaL 2014270deMacBook-Pro-3:karmaL a2014270$ >npm install karma 2014270deMacBook-Pro-3:karmaL a2014270$ >npm install -g karma-cli # 测试是否安装成功 2014270deMacBook-Pro-3:~ a2014270$ >karma init
8. Karma+jasmine配置 #初始化karma配置⽂文件karma.conf.js 2014270deMacBook-Pro-3:karmaL a2014270$ karma init ! Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine ! Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question. > no ! Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > ! What is the location of your source and test files ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. > ! Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "**/*.swp". Enter empty string to move to the next question. > ! Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > yes ! ! Config file generated at "/Users/a2014270/karmaL/karma.conf.js".
9. Karma+jasmine配置 #安装集成包karma-jasmine 2014270deMacBook-Pro-3:karmaL a2014270$ >npm install karma-jasmine
10. ⾃自动化单元测试 3步准备⼯工作： • 1. 创建源⽂文件：⽤用于实现某种业务逻辑的⽂文件，就是我们平时写的 js脚本 • 2. 创建测试⽂文件：符合jasmineAPI的测试js脚本 • 3. 修改karma.conf.js配置⽂文件 1）.创建源⽂文件：⽤用于实现某种业务逻辑的⽂文件，就是我们平时写的js 脚本 有⼀一个需求，要实现单词倒写的功能。如：”ABCD” ==> “DCBA” ~vi scr.js function reverse(name){ return name.split("").reverse().join(""); }
11. ⾃自动化单元测试 2). 创建测试⽂文件：符合jasmineAPI的测试js脚本 ! describe("A suite of basic functions", function() { it("reverse word",function(){ expect("DCBA").toEqual(reverse("ABCD")); }); });
12. ⾃自动化单元测试 3). 修改karma.conf.js配置⽂文件 我们这⾥里需要修改：files和exclude变量 ! module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine'], files: ['*.js'], exclude: ['karma.conf.js'], reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], captureTimeout: 60000, singleRun: false }); };
13. ⾃自动化单元测试 启动karma 单元测试全⾃自动执⾏行 ! ^C2014270deMacBook-Pro-3:karmaL a2014270$ karma start INFO [karma]: Karma v0.12.23 server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 37.0.2062 (Mac OS X 10.9.2)]: Connected on socket -0OtHTDV-p9tsjbPNEgd with id 2555004 Chrome 37.0.2062 (Mac OS X 10.9.2): Executed 1 of 1 SUCCESS (0 secs / 0.005 secsChrome 37.0.2062 (Mac OS X 10.9.2): Executed 1 of 1 SUCCESS (0.008 secs / 0.005 secs) ! ! 浏览器会⾃自动打开，显⽰示测试结果 ! ⾄至此完成了最基础的jasmine功能。
14. Karma和istanbul代码覆盖率 增加代码覆盖率检查和报告，增加istanbul依赖 ~ D:\workspace\javascript\karma>npm install karma-coverage ! 修改karma.conf.js配置⽂文件
15. 单元测试:jasmine 启动karma start，在⼯工程⺫⽬目录下⾯面找到index.html⽂文 件，coverage/chrome/index.html ! 打开后，我们看到代码测试覆盖绿报告 ! ! ! ! ! 覆盖率是100%，说明我们完整了测试了src.js的功能。
16. 单元测试:jasmine 接下来，我们修改src.js，增加⼀一个if分⽀支 function reverse(name){ if(name=='AAA') return "BBB"; return name.split("").reverse().join(""); } 再看覆盖率报告， ! !
17. ⾃自动化功能测试：phantomJS+casperJS 1.phantomjs: PhantomJS 是⼀一个基于WebKit的服务器端 JavaScript API。它全⾯面⽀支持web⽽而不需浏览器⽀支持，其快速，原⽣生 ⽀支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以⽤用于⻚页⾯面⾃自动化，⺴⽹网 络监测，⺴⽹网⻚页截屏，以及⽆无界⾯面测试等。 2.casperjs(http://casperjs.org/) CasperJS 是⼀一个开源的导航脚本处理和测试⼯工具，基 于PhantomJS（前端⾃自动化测试⼯工具）编写。 CasperJS简化了完整的导航场景的过程定义，提供了⽤用 于完成常⻅见任务的实⽤用的⾼高级函数、⽅方法和语法。 [øB¢Ñs)N ¶ÐĪ ÏÛĪTDD(T est Drive Development) B¢ŽÑsĪKarma+jasmine B¢®ÑsĪphantomJS+casperJS