【翻译】Siesta事件记录器入门
原文：Getting started with the Siesta event recorder
作者：Mats Bryntse
随着事件记录器功能的发布越来越近，我们准备了一下入门指南，向大家展示如何使用它。
事件记录器是什么？
事件记录器可以为创建应用程序或UI组件的UI测试节省大量的时间。在单击记录按钮后，它会记录用户接口的交互，或协助你记录应用程序中的组件的交互。这意味着它可以检测诸如网管、表单字段或复选框等等Sencha组件，而无需手动指定每个目标的类型。要注意的是，记录器不可能马上就能创建出完美的测试用例，现实是，需要调整它的输出以尽可能的让测试方案保持稳定。无论如何，它都可以节省时间。
入门
首先，应该准备一个用来创建测试交互的UI的测试用例。既可以从应用程序中加载一个HTML页面（使用hostPageUrl配置），也可以创建一个用来创建和记录一个UI组件的测试。在创建测试框架之后，运行塔并确保能渲染完整且没有错误。
这样，测试框架就可以创建准备测试的UI了。现在需要做的是给测试指示等待条件，以便验证UI已经准备好可以进行交换测试。这可以是一些CSS选择符或几个已经加载的Ext JS存储。下面是一个简单的测试框架示例。
StartTest(function (t) {
var customerGrid = new App.grid.Customer({
width : 600,
height : 200,
renderTo : document.body,
cls : 'myGrid'
});
t.chain(
// Make sure some dummy test rows are rendered before test starts
{ waitFor : 'rowsVisible', args : customerGrid }
);
});现在已经指示了测试的等待条件是稳定条件，看可以返回Siesta UI并通过单击记录按钮激活记录器面板。
事件记录器的界面
空的记录器看起来如下图。在左上角，按钮自身已经说明他们的作用：Record（记录）、Stop（停止）、Play（播放）和Clear（清除）允许实现捕获和回放记录的行为。在右上角，可以“Generate code（生成代码）”、添加自定义步骤或“Close（关闭）”记录面板。
网格包含以下三列：
- Action（行为）列是行为的类型
- TargetValue（目标值）列包含的既可能是UI行为的目标、目标的值（键入文本时），也可能是特殊功能步骤的源代码
- Offset（偏移）列允许为行为设置一个偏移值，以便在示例的按钮或文本字段内单击一个精确点。
在网格下方还可以看到最常见的目标类型的速查表（CSS查询、组件查询和复合查询）。
尝试单击记录按钮并在应用程序界面单击某处，将会在记录器的网格看到一些条目。现在，要做的第一件是让验证记录器是否明白你的意图。这意味着要读取目标描述以及可能要调整它。记录器会尝试去理解你的意图，不过它没有读心术。要确保对目标进行优化以让它达到最稳定。有稳定的目标是非常重要的，这可以保证测试能在修改界面或升级到新版本的Sencha框架后继续使用。
一个简单示例：如提出记录Ext JS按钮，Siesta会提出以下建议：
Target : schedulergrid button[text=Seconds] => .x-btn-inner Offset : [27, 13]
这是一个复合查询，左侧是一个常规的Sencha组件查询，而在=>之后是CSS选择符。那么，如何做出最稳定的目标选择符呢？首先，如果希望在单击按钮上任何位置，那就不需要偏移值，因而需要删除它。这就可以确保按钮尺寸改变后（如宽度降低到25像素），测试仍然可正常工作。第二件事是，看看是不是目标自身。除非你想单击一个指定的HTML元素内的按钮，不然真的不需要右侧的表达式。这样也保证了避免在未来的Ext JS版本中“.x-btn-inner”被更名或其他什么情况（如移除）而出现问题。将目标转换为组件查询是最好的选择：
Target : >>schedulergrid button[text=Seconds] Offset :
现在，Siesta将始终单击按钮组件的中心，而不是通常认为的按钮任何地方。当完成目标的调整后，就可以尝试播放测试以确保所有工作正常。当回放一个记录，Siesta会首先执行整个测试（准备好的框架），并在测试完成后，播放记录器的行为。
编辑目标的定位器
在网格中的所有字段都是可以编辑的，因此，可以很容易的调整内联值。单击目标单元格既可选择一个备选方法来使用记录器进行收集，也可以输入你喜欢的任何值。当输入时，Siesta会尝试高亮显示目标。要确保的事情是，目标必须在屏幕上，且目标选择符指定的就是目标。如果页面上有5个Ext JS按钮，只输入“>>button”将不会工作，因为目标定位器太一般了（在这种情况下Siesta会发出警告）。
等待异步操作
正如所看到，刚才只是记录了一些屏幕上的单击和回放他们是否总是工作。有时候，UI可能会包含异步行为。一个窗口在关闭时可能有动画效果，或者一个面板在折叠时使用了动画效果等等。为了让测试对这些异步流不敏感，就需要等待。Siesta会尝试协助你等等目标出现或完成任何正在进行的Ext JS动画。因此，理论上不需要担心这两种情况。
下面来看一个简单的示例：
StartTest(function (t) {
Ext.getBody().update('<div id="client_list"></div>');
var btn = new Ext.Button({
text : 'Load data',
renderTo : document.body,
handler : function() {
// This Ajax request is obviously async
Ext.Ajax.request({
url : 'Customers/Get',
success : function(response) {
// Assuming an array is returned by server
var clients = Ext.decode(response.responseText);
Ext.get('client_list').update(clients.join('<br/'));
}
});
}
});
});假设测试方案是单击按钮，在Ajax请求完成后，再单击渲染客户列表。以下是一个简单尝试：
// Click the button using a Component Query
{ click : ">> button[text=Load data]" },
// Then click the populated client list
{ click : "#client_list" }如果Ajax请求实践上完成得很快，这可能是理想的工作情况。但如果不是，就得靠运气了，在任何情况下，肯定是是要等的。对于这种情况，可以尝试使用waitForElementNotVisible方法。单击“+”按钮添加一个新的自定义步骤，并将它拖到两个单击步骤之间。
在添加等待步骤后，测试队列现在变得更健壮了，就算ajax请求要花费5毫秒还是10秒也没关系了。
功能步骤
在应用程序界面的交互中，有时候可能需要在这个过程中执行一些断言。虽然这个在自己的IDE中实现起来更容易一些，单我们还是在记录器中添加了一个简单的代码编辑器。继续使用上一个示例，在完成加载后，断言某些文本是否存在会更好。为了添加这一功能步骤，在列表中选择fn行为，并按下TAB键。现在可以执行任何常规的脚本了，当然，可以使用任何Siesta测试断言方法。
当感觉到记录事件要完成的时候，就可以简单的单击生产代码按钮并复制-粘贴内容到测试框架。
记录移动的光标的步骤
有时刻可能希望将光标简单的移动到屏幕可能的地方，但不需要做任何进一步的动作。虽然记录器不能记录任何鼠标的移动，但有一种特定的方法来向Siesta发送信号让光标移动到任何地方。这只需要将鼠标简单的移动到某处并保持3秒钟，然后，会看到moveCursorTo行为已经添加到了列表。这在某些情况下非常有用，如要显示网格列的菜单时。你不能马上单击菜单的图标，而需要将光标移动到网格的列标题知道它消失。
记录每个人都快乐，如果对记录器或本文有任何反馈，请告诉我们。
