《Sencha应用程序的UI测试 》一文的示例分析
更新:HHH   时间:2023-1-7


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

首先来看看QA测试的启动页面index.html(ui-tests\app目录下):
[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <!-- Ext JS -->  
  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.     <!-- Siesta -->  
  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.     <!-- The test harness -->  
  13.     <script type="text/javascript" src="index.js"></script>  
  14. </head>  
  15. <body>  
  16. </body>  
  17. </html>  

代码包含了Ext JS和Siesta的引用,真正的执行文件应该是index.js,代码如下:
[javascript] view plaincopy
  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 plaincopy
  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的一些方法以及能正确获取到要测试的组件的元素。
返回web开发教程...