【翻译】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行为已经添加到了列表。这在某些情况下非常有用，如要显示网格列的菜单时。你不能马上单击菜单的图标，而需要将光标移动到网格的列标题知道它消失。

记录每个人都快乐，如果对记录器或本文有任何反馈，请告诉我们。