说完了，前端技术的发展史，那么对应的前端测试发展史也随之发展。
石器时代——纯手工测试
早期的页面基本都是静态化的页面，只有几个链接或者图片，那么相对测试工作量不大，只需要我们打开页面查看加载是否正确。
铁器时代–xunit
到了javascript时代，随着其他语言xunit 风靡天下,js 也出现了它的xunit 框架。
Jsunit，以往在测试js的时候，都是以alert方式来检测错误，很不专业。
2001年 jsunit 出现，让js调试称为可能。
Jsunit 主要参考junit的设计，只要你会使用junit 那么jsunit 对你来说，根本不是什么事，具体使用参考
http://llying.iteye.com/blog/258605
DEMO:
测试代码
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
<!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>
|
测试驱动
123456789101112131415161718192021222324252627282930 |
<!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(); //增加的测试页面的路径是相对于测试运行器的路径的（testRunner.html），而不是相对于当前的页面 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>
|
工业革命–ajax流行
随着ajax的流行，jquery框架在前端开发中的普及，让开发者看到了前端的新纪元，
jquery 团队也为广大开发人员开发了Qunit.QUnit 是一款强大而且容易使用的JavaScript 测试框架，它被用于jQuery 与其插件的测试，同时它也同样可以测试普通的JavaScript 代码.
TDD的时代来临 QUnit框架版本
将要被测试的代码需要添加到myProject.js中，并且你的测试用例应该插入到myTest.js。要运行这些测试，只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。
12345678910111213141516171819 |
<!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> <!-- Your project file goes here --> <mce:script type="text/javascript" src="myProject.js" mce_src="myProject.js"></mce:script> <!-- Your tests file goes here --> <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://karma-runner.github.io/0.13/index.html
这些框架本人就不举列子了，会在以后的篇章里面一一介绍。
前端的未来
未来，我希望有一种框架能够解救苦逼的qa,简单的语法与api，使得我们能够处理所有前端框架而不用考虑控件问题，良好的性能，支持并发，跑ui和单元测试都在秒级，当然越快越好，最好能够自动更新ui自动化中页面对象的路径等等。也许只是个梦。Qa 还需努力。
最新内容请见作者的GitHub页：http://qaseven.github.io/