《Sencha应用程序的UI测试 》一文的示例分析
在昨天翻译了一篇文章《Sencha应用程序的UI测试》，里面有个示例应用程序，但是没详细说明是怎么写出来，本文将针对该示例做一个说明。
首先来看看QA测试的启动页面index.html（ui-tests\app目录下）：[html] view plaincopy<!DOCTYPEhtml><html><head><!--ExtJS--><linkrel="stylesheet"type="text/css"href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css"><scripttype="text/javascript"src="../../resources/extjs-4.1.0/ext-all-debug.js"></script><!--Siesta--><linkrel="stylesheet"type="text/css"href="../../resources/siesta-1.1.5-lite/resources/css/siesta-all.css"><scripttype="text/javascript"src="../../resources/siesta-1.1.5-lite/siesta-all.js"></script><!--Thetestharness--><scripttype="text/javascript"src="index.js"></script></head><body></body></html>
代码包含了Ext JS和Siesta的引用，真正的执行文件应该是index.js，代码如下：[javascript] view plaincopyvarHarness=Siesta.Harness.Browser;Harness.configure({title:'SenchaUITestDemo-ApplicationTests',hostPageUrl:'../../index.html',preload:['../../resources/sinon-1.5.2.js','api_stub.js']});Harness.start({group:'Basicapplicationlayout',items:[{title:'Testtabsfordataingrids',url:'tests/01_tabs.js'},{title:'Testdouble-clickfunctionality',url:'tests/02_RsvpWindow.js'}]});
代码首先将Harness指向Siesta.Harness.Browser，方便代码编写。接着是为起做一个配置（configure）。在配置里，title应该是标题了。接着是hostPageUrl，根据地址可以知道是应用程序的启动页面。preload是要预加载的文件，这里要加载的是sinon，这东西是用来组织数据的，api_stub.js就是用这个来生成返回数据的。接着是执行start方法，开始运行测试，测试里设置了2项，一项是调用01_tabs.js，一项是调用02_rsvpWindo.js，显示在页面中也就是文中配图的左边两项。下面来看看02_rsvpWindo.js这个文件，比较典型，代码如下：[javascript] view plaincopyStartTest(function(t){vartabPanel,upcomingEvents,pastEvents;t.chain({waitFor:500},//Allowtimefortheapplicationtorender//alsotrytogivetheMeetup.comAPItimetoreturn...seenotebelowfunction(next){//setreferencesafterrenderingtabPanel=Ext.ComponentQuery.query('tabpanel')[0];upcomingEvents=tabPanel.items.getAt(0);pastEvents=tabPanel.items.getAt(1);next();},function(next){t.diag('TestthattheupcomingeventgriddisplaysanRSVPpopupwhenarowisdouble-clicked.');t.doubleClick(upcomingEvents.el.down('.x-grid-row').dom,function(){varwin=Ext.ComponentQuery.query('rsvpwindow')[0];t.is(win.isHidden(),false,'RsvpWindowshouldbevisible.');win.close();next();});},function(next){t.diag('Switchtabs');//clickonthepasteventstabt.click(tabPanel.el.query('.x-tab')[1],next);},{waitFor:500},//allowanimationtocompletefunction(next){t.diag('TestthatthepasteventgriddisplaysanRSVPpopupwhenarowisdouble-clicked.');t.doubleClick(pastEvents.el.down('.x-grid-row').dom,function(){varwin=Ext.ComponentQuery.query('rsvpwindow')[0];t.is(win.isHidden(),false,'RsvpWindowshouldbevisible.');win.close();next();});});});
看了两个文件，格式是固定的，都是以"StartTest(function(t) {"开始，然后t.chain中以JSON格式编写测试函数。第一个函数，先获取要测试的组件。第二个函数中的doubleClick表明是用来测试Grid的行的双击操作。这里的关键就是第一个参数要找出实际要测试的HTML元素。如果弹出窗口显示正确，close就能执行正确。第三个函数是测试标签页切换了。关键还是要掌握怎么找到元素。第4个函数还是用来测试Grid的行的双击操作。
总的来说，这样写测试代码也不会太困难，关键的地方是掌握Siesta的一些方法以及能正确获取到要测试的组件的元素。
首先来看看QA测试的启动页面index.html（ui-tests\app目录下）：[html] view plaincopy<!DOCTYPEhtml><html><head><!--ExtJS--><linkrel="stylesheet"type="text/css"href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css"><scripttype="text/javascript"src="../../resources/extjs-4.1.0/ext-all-debug.js"></script><!--Siesta--><linkrel="stylesheet"type="text/css"href="../../resources/siesta-1.1.5-lite/resources/css/siesta-all.css"><scripttype="text/javascript"src="../../resources/siesta-1.1.5-lite/siesta-all.js"></script><!--Thetestharness--><scripttype="text/javascript"src="index.js"></script></head><body></body></html>
代码包含了Ext JS和Siesta的引用，真正的执行文件应该是index.js，代码如下：[javascript] view plaincopyvarHarness=Siesta.Harness.Browser;Harness.configure({title:'SenchaUITestDemo-ApplicationTests',hostPageUrl:'../../index.html',preload:['../../resources/sinon-1.5.2.js','api_stub.js']});Harness.start({group:'Basicapplicationlayout',items:[{title:'Testtabsfordataingrids',url:'tests/01_tabs.js'},{title:'Testdouble-clickfunctionality',url:'tests/02_RsvpWindow.js'}]});
代码首先将Harness指向Siesta.Harness.Browser，方便代码编写。接着是为起做一个配置（configure）。在配置里，title应该是标题了。接着是hostPageUrl，根据地址可以知道是应用程序的启动页面。preload是要预加载的文件，这里要加载的是sinon，这东西是用来组织数据的，api_stub.js就是用这个来生成返回数据的。接着是执行start方法，开始运行测试，测试里设置了2项，一项是调用01_tabs.js，一项是调用02_rsvpWindo.js，显示在页面中也就是文中配图的左边两项。下面来看看02_rsvpWindo.js这个文件，比较典型，代码如下：[javascript] view plaincopyStartTest(function(t){vartabPanel,upcomingEvents,pastEvents;t.chain({waitFor:500},//Allowtimefortheapplicationtorender//alsotrytogivetheMeetup.comAPItimetoreturn...seenotebelowfunction(next){//setreferencesafterrenderingtabPanel=Ext.ComponentQuery.query('tabpanel')[0];upcomingEvents=tabPanel.items.getAt(0);pastEvents=tabPanel.items.getAt(1);next();},function(next){t.diag('TestthattheupcomingeventgriddisplaysanRSVPpopupwhenarowisdouble-clicked.');t.doubleClick(upcomingEvents.el.down('.x-grid-row').dom,function(){varwin=Ext.ComponentQuery.query('rsvpwindow')[0];t.is(win.isHidden(),false,'RsvpWindowshouldbevisible.');win.close();next();});},function(next){t.diag('Switchtabs');//clickonthepasteventstabt.click(tabPanel.el.query('.x-tab')[1],next);},{waitFor:500},//allowanimationtocompletefunction(next){t.diag('TestthatthepasteventgriddisplaysanRSVPpopupwhenarowisdouble-clicked.');t.doubleClick(pastEvents.el.down('.x-grid-row').dom,function(){varwin=Ext.ComponentQuery.query('rsvpwindow')[0];t.is(win.isHidden(),false,'RsvpWindowshouldbevisible.');win.close();next();});});});
看了两个文件，格式是固定的，都是以"StartTest(function(t) {"开始，然后t.chain中以JSON格式编写测试函数。第一个函数，先获取要测试的组件。第二个函数中的doubleClick表明是用来测试Grid的行的双击操作。这里的关键就是第一个参数要找出实际要测试的HTML元素。如果弹出窗口显示正确，close就能执行正确。第三个函数是测试标签页切换了。关键还是要掌握怎么找到元素。第4个函数还是用来测试Grid的行的双击操作。
总的来说，这样写测试代码也不会太困难，关键的地方是掌握Siesta的一些方法以及能正确获取到要测试的组件的元素。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
