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

太阳不下山

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

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

<!DOCTYPE html>
<html>
<head>
<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>
<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>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>

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

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这个文件，比较典型，代码如下：
　　[javascript] view plaincopy
　　

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的一些方法以及能正确获取到要测试的组件的元素。

　　

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

相关帖子

MySQL视图和索引专篇精讲

Java8的Lambda和排序

如何翻译pdf文档

英文pdf翻译成中文步骤

【云原生】如何快速部署Kubernetes

机器学习服务文本翻译能力升级，中文直译模型让译文表达更地道！

浅谈Nodejs+nodemailer怎么发送邮件

php使用GD库创建图片缩略图的方法

谷歌翻译修复神器

node Express学习之聊聊中间件

太阳不下山 LV4

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