《Sencha应用程序的UI测试》一文的示例分析 -web开发-互联网-天达云

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

在昨天翻译了一篇文章《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

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