说完了,前端技术的发展史,那么对应的前端测试发展史也随之发展。
石器时代——纯手工测试
早期的页面基本都是静态化的页面,只有几个链接或者图片,那么相对测试工作量不大,只需要我们打开页面查看加载是否正确。
铁器时代–xunit
到了javascript时代,随着其他语言xunit 风靡天下,js 也出现了它的xunit 框架。
Jsunit,以往在测试js的时候,都是以alert方式来检测错误,很不专业。
2001年 jsunit 出现,让js调试称为可能。
Jsunit 主要参考junit的设计,只要你会使用junit 那么jsunit 对你来说,根本不是什么事,具体使用参考
http://llying.iteye.com/blog/258605
DEMO:
测试代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>testHtml</TITLE> </HEAD> <script type="text/javascript" src="myjs.js"></script> <script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script> <script type="text/javascript"> <!-- function testAdd(){ var result = add(arg1,arg2); warn("result", result); debug("result", result); info("result", result); assertEquals(6,result); }
function testMinus(){ var result = minus(arg1,arg2) assertEquals(2,result); }
function testMultiply(){ var result = multiply(arg1,arg2) assertEquals(8,result); }
function testDivide(){ var result = divide(arg1,arg2) assertEquals("4 divide 2 is 2",2,result); }
function setUpPage(){ arg1 = 4; arg2 = 2; setUpPageStatus = "complete"; }
function exposeTestFunctionNames(){ var tests = new Array(); tests[0]="testAdd"; tests[1]="testMinus"; tests[2]="testMultiply"; return tests; }
//--> </SCRIPT> <BODY>
</BODY> </HTML>
|
测试驱动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>suit test</TITLE> </HEAD> <script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script> <script type="text/javascript"> <!-- function suite() { var testSuite = new top.jsUnitTestSuite(); testSuite.addTestPage("../mytest1.html"); testSuite.addTestSuite(Suite2()); return testSuite; } function Suite2() //需要与suite定义在同一个页面中 { var testSuite = new top.jsUnitTestSuite(); testSuite.addTestPage("../mytest2.html"); return testSuite; }
</SCRIPT> <BODY>
</BODY> </HTML>
|
http://www.jsunit.net/
工业革命–ajax流行
随着ajax的流行,jquery框架在前端开发中的普及,让开发者看到了前端的新纪元,
jquery 团队也为广大开发人员开发了Qunit.QUnit 是一款强大而且容易使用的JavaScript 测试框架,它被用于jQuery 与其插件的测试,同时它也同样可以测试普通的JavaScript 代码.
TDD的时代来临 QUnit框架版本
将要被测试的代码需要添加到myProject.js中,并且你的测试用例应该插入到myTest.js。要运行这些测试,只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html> <head> <title>QUnit Test Suite</title> <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" mce_href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen"> <mce:script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js" mce_src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></mce:script> <mce:script type="text/javascript" src="myProject.js" mce_src="myProject.js"></mce:script> <mce:script type="text/javascript" src="myTests.js" mce_src="myTests.js"></mce:script> </head> <body> <h1 id="qunit-header">QUnit Test Suite</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> </body> </html>
|
参考
http://www.cnblogs.com/nuaalfm/archive/2010/02/26/1674235.html
http://qunitjs.com/
现代化技术-BBD
紧着angluar react 等框架大行其道的同时,bdd也在开发中兴起,基于bdd的测试框架开始在前端如雨后春笋般冒出,jasmine,mocha,karma都是其中的代表,但是各得其道,到底谁好,没惹能说得清楚。但google 在前端测试的贡献,绝对是业界良心。
![](https://i-blog.csdnimg.cn/blog_migrate/129785c02a53272ba28c4bcfc0fbb843.png)
http://jasmine.github.io/
![](https://i-blog.csdnimg.cn/blog_migrate/164673b1561cafb8c2ca56af8c20c4e0.png)
https://karma-runner.github.io/0.13/index.html
![](https://i-blog.csdnimg.cn/blog_migrate/d7f3baed12daf651ec90fc81ad0843f6.png)
https://mochajs.org/
这些框架本人就不举列子了,会在以后的篇章里面一一介绍。
前端的未来
未来,我希望有一种框架能够解救苦逼的qa,简单的语法与api,使得我们能够处理所有前端框架而不用考虑控件问题,良好的性能,支持并发,跑ui和单元测试都在秒级,当然越快越好,最好能够自动更新ui自动化中页面对象的路径等等。也许只是个梦。Qa 还需努力。
最新内容请见作者的GitHub页:http://qaseven.github.io/