在昨天翻译了一篇文章《 Sencha应用程序的UI测试》，里面有个示例应用程序，但是没详细说明是怎么写出来，本文将针对该示例做一个说明。

首先来看看QA测试的启动页面index.html（ui-tests\app目录下）：
[html] view plain copy
  1. >  
  2. <html>  
  3. <head>  
  4.       
  5.     <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">  
  6.     <script type="text/javascript" src="../../resources/extjs-4.1.0/ext-all-debug.js">script>  
  7.   
  8.       
  9.     <link rel="stylesheet" type="text/css" href="../../resources/siesta-1.1.5-lite/resources/css/siesta-all.css">  
  10.     <script type="text/javascript" src="../../resources/siesta-1.1.5-lite/siesta-all.js">script>  
  11.   
  12.       
  13.     <script type="text/javascript" src="index.js">script>  
  14. head>  
  15. <body>  
  16. body>  
  17. html>  

代码包含了Ext JS和Siesta的引用，真正的执行文件应该是index.js，代码如下：
[javascript] view plain copy
  1. var Harness = Siesta.Harness.Browser;  
  2.   
  3. Harness.configure({  
  4.     title     : 'Sencha UI Test Demo - Application Tests',  
  5.       
  6.     hostPageUrl: '../../index.html',  
  7.   
  8.     preload : [  
  9.         '../../resources/sinon-1.5.2.js',  
  10.         'api_stub.js'  
  11.     ]  
  12. });  
  13.   
  14.   
  15. Harness.start(  
  16.     {  
  17.         group       : 'Basic application layout',  
  18.           
  19.         items       : [  
  20.             {  
  21.                 title : 'Test tabs for data in grids',  
  22.                 url : 'tests/01_tabs.js'  
  23.             },  
  24.             {  
  25.                 title : 'Test double-click functionality',  
  26.                 url : 'tests/02_RsvpWindow.js'  
  27.             }  
  28.         ]  
  29.     }  
  30. );  

代码首先将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 plain copy
  1. StartTest(function(t) {  
  2.   
  3.     var tabPanel, upcomingEvents, pastEvents;  
  4.   
  5.     t.chain(  
  6.         { waitFor : 500 }, //Allow time for the application to render  
  7.                            // also try to give the Meetup.com API time to return... see note below  
  8.   
  9.         function(next) {  
  10.             //set references after rendering  
  11.             tabPanel =  Ext.ComponentQuery.query('tabpanel')[0];  
  12.             upcomingEvents = tabPanel.items.getAt(0);  
  13.             pastEvents = tabPanel.items.getAt(1);  
  14.   
  15.             next();  
  16.         },  
  17.   
  18.         function(next) {  
  19.             t.diag('Test that the upcoming event grid displays an RSVP popup when a row is double-clicked.');  
  20.   
  21.             t.doubleClick(upcomingEvents.el.down('.x-grid-row').dom, function() {  
  22.                 var win = Ext.ComponentQuery.query('rsvpwindow')[0];  
  23.   
  24.                 t.is(win.isHidden(), false, 'RsvpWindow should be visible.');  
  25.                 win.close();  
  26.   
  27.                 next();  
  28.             });  
  29.         },  
  30.   
  31.         function(next) {  
  32.             t.diag('Switch tabs');  
  33.   
  34.             //click on the past events tab  
  35.             t.click(tabPanel.el.query('.x-tab')[1], next);  
  36.         },  
  37.   
  38.         { waitFor : 500 }, //allow animation to complete  
  39.   
  40.         function(next) {  
  41.             t.diag('Test that the past event grid displays an RSVP popup when a row is double-clicked.');  
  42.   
  43.             t.doubleClick(pastEvents.el.down('.x-grid-row').dom, function() {  
  44.                 var win = Ext.ComponentQuery.query('rsvpwindow')[0];  
  45.   
  46.                 t.is(win.isHidden(), false, 'RsvpWindow should be visible.');  
  47.                 win.close();  
  48.   
  49.                 next();  
  50.             });  
  51.         }  
  52.     );  
  53.   
  54. });  

看了两个文件，格式是固定的，都是以"StartTest(function(t) {"开始，然后t.chain中以JSON格式编写测试函数。
第一个函数，先获取要测试的组件。
第二个函数中的doubleClick表明是用来测试Grid的行的双击操作。这里的关键就是第一个参数要找出实际要测试的HTML元素。如果弹出窗口显示正确，close就能执行正确。
第三个函数是测试标签页切换了。关键还是要掌握怎么找到元素。
第4个函数还是用来测试Grid的行的双击操作。

总的来说，这样写测试代码也不会太困难，关键的地方是掌握Siesta的一些方法以及能正确获取到要测试的组件的元素。