《Sencha应用程序的UI测试》一文的示例分析

webdev2014

浏览: 678558 次

最近访客更多访客>>

u012363178

仙丹灵药

hellodota

WIN2333

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1653)

社区版块

存档分类

2014-04 ( 64)
2014-03 ( 97)
2014-02 ( 113)
更多存档...

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

首先来看看QA测试的启动页面index.html（ui-tests\app目录下）：

<!DOCTYPE html>
<html>
<head>
    <!-- Ext JS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
    <script type="text/javascript" src="../../resources/extjs-4.1.0/ext-all-debug.js"></script>

    <!-- Siesta -->
    <link rel="stylesheet" type="text/css" href="../../resources/siesta-1.1.5-lite/resources/css/siesta-all.css">
    <script type="text/javascript" src="../../resources/siesta-1.1.5-lite/siesta-all.js"></script>

    <!-- The test harness -->
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>

代码包含了Ext JS和Siesta的引用，真正的执行文件应该是index.js，代码如下：

var Harness = Siesta.Harness.Browser;

Harness.configure({
    title     : 'Sencha UI Test Demo - Application Tests',
    
    hostPageUrl: '../../index.html',

    preload : [
        '../../resources/sinon-1.5.2.js',
        'api_stub.js'
    ]
});


Harness.start(
    {
        group       : 'Basic application layout',
        
        items       : [
            {
                title : 'Test tabs for data in grids',
                url : 'tests/01_tabs.js'
            },
            {
                title : 'Test double-click functionality',
                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这个文件，比较典型，代码如下：

StartTest(function(t) {

    var tabPanel, upcomingEvents, pastEvents;

    t.chain(
        { waitFor : 500 }, //Allow time for the application to render
                           // also try to give the Meetup.com API time to return... see note below

        function(next) {
            //set references after rendering
            tabPanel =  Ext.ComponentQuery.query('tabpanel')[0];
            upcomingEvents = tabPanel.items.getAt(0);
            pastEvents = tabPanel.items.getAt(1);

            next();
        },

        function(next) {
            t.diag('Test that the upcoming event grid displays an RSVP popup when a row is double-clicked.');

            t.doubleClick(upcomingEvents.el.down('.x-grid-row').dom, function() {
                var win = Ext.ComponentQuery.query('rsvpwindow')[0];

                t.is(win.isHidden(), false, 'RsvpWindow should be visible.');
                win.close();

                next();
            });
        },

        function(next) {
            t.diag('Switch tabs');

            //click on the past events tab
            t.click(tabPanel.el.query('.x-tab')[1], next);
        },

        { waitFor : 500 }, //allow animation to complete

        function(next) {
            t.diag('Test that the past event grid displays an RSVP popup when a row is double-clicked.');

            t.doubleClick(pastEvents.el.down('.x-grid-row').dom, function() {
                var win = Ext.ComponentQuery.query('rsvpwindow')[0];

                t.is(win.isHidden(), false, 'RsvpWindow should be visible.');
                win.close();

                next();
            });
        }
    );

});

看了两个文件，格式是固定的，都是以"StartTest(function(t) {"开始，然后t.chain中以JSON格式编写测试函数。

第一个函数，先获取要测试的组件。

第二个函数中的doubleClick表明是用来测试Grid的行的双击操作。这里的关键就是第一个参数要找出实际要测试的HTML元素。如果弹出窗口显示正确，close就能执行正确。

第三个函数是测试标签页切换了。关键还是要掌握怎么找到元素。

第4个函数还是用来测试Grid的行的双击操作。

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

分享到：

步步测试完善Java中Socket通信图解法（三） | Sencha应用程序的UI测试

2013-01-14 14:24
浏览 386
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论