Siestaイベントレコーダーを使い始める

こんにちは、ゼノフィnakamuraです。

この記事は、Bryntum社ブログ Getting started with the Siesta event recorder を翻訳したものです。

イベントレコーダー機能の公開の日が近づいてきましたので、その使用方法を説明するために、このガイドを作りました。

recorder-target-editor

イベントレコーダーとは

イベントレコーダーによって、アプリケーションやUIコンポーネントのUIテストの作成にかかる時間をとても節約できます。レコードボタンを押した後、レコーダーはユーザーインターフェイスとのインタラクションを記録し、アプリケーション内のコンポーネントをターゲットすることをアシストします。このため、手動でターゲットを一つひとつ書き込まなくても、グリッド、フォームフィールド、チェックボックスなどのSenchaコンポーネントを検出できます。注：レコーダーはおそらくすぐに完璧なテストケースを作成しないので、実際にはあなたのテスト状況に対して出来るだけ安定するように、出力を少し調整したほうがいいです。とは言え、時間は確実に節約できます！

始めましょう

まずはテストに操作して欲しいUIを作成するテストケースを準備しましょう。アプリケーションから（hostPageUrl構成を利用して）HTMLページをロードするか、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に戻り、レコーダーアイコンをクリックしてレコーダーパネルをアクティブにできます。

recorder2

イベントレコーダーのインターフェイス

空のレコーダーは次のイメージのようになっています。左上のボタンは説明しなくてもわかりますね：‘Record’, ‘Stop’, ‘Play’, ‘Clear’で、キャプチャしたり記録されたアクションを取り込んで再生できます。右上には ‘Generate code’ (コードを生成する)、カスタムの手順の追加、レコーダーパネルを‘Close’（閉じる）ボタンがあります。

recorder3

その下のグリッドには三つのカラムがあります：

‘Action’カラムはアクションの種類です。
‘Target/Value’カラムは、UIアクションのターゲット、値（テキスト入力している場合）、特別な関数の手順のソースコードのどれかが含まれています。
‘Offset’カラムは例えばボタンやテキストフィールドの厳密なポイントをクリックできるようにアクションのオフセットを設定できるようになっています。

グリッドの下には、よく使うターゲット類（CSS query, Component Query, Composite Query）のチートシートがあります。

Recordボタンを押してみて、アプリケーションUIの一部をクリックしてみて下さい。レコーダーグリッドに入力が表示されるはずです。この時点でまず行うのは、レコーダーがあなたの目的を理解したかどうか確認することです。これはターゲットの記述を読んで、もしかしたら少し変更するという意味です。レコーダーは目的を理解しようとしますが、心を読むことは（まだ）できません。最も安定させるために、必ずターゲットを最適化して下さい。安定したターゲットであることは、UIを変更したり、Senchaフレームワークを新しいバージョンにアップグレードする度にテストを成功させるために重要になります。

単純な例：例えばExt JSボタンのクリックを記録したらSiestaが次のようにサジェストします：

1 2	Target : schedulergrid button[text=Seconds] => .x-btn-inner Offset : [27, 13]

これはComposite Queryで、左側は通常のSencha Component Queryで、=> の後の部分は単純なCSSセレクターです。では、最も安定しいるターゲットセレクターとはどのようにできるでしょうか？まず最初に、もし単にボタンのどこかをクリックしたいのなら、オフセットには意味がないので削除しましょう。こうすると、もし後でボタンの寸法が変更されても（例えば横幅が25pxに下げられても）、テストは無事に動作します。次はターゲット自体を見ましょう。ボタン内の特別なHTML要素をクリックする必要がなければ、式の右側は不要です。それにより今後のExt JSバージョンで.x-btn-inner が違う名称になったり（削除されたり）場合にも大丈夫になります。ターゲットをComponent Queryに切り替えるのが一番いい方法です：

1 2	Target : >>schedulergrid button[text=Seconds] Offset :

これで、Siestaはいつもボタンコンポーネントの真ん中をクリックします。通常、ボタンにはこれが理想的だと思います。ターゲットの変更が終わったら、全てが問題なく動作していることを確認するために、テストを再生して下さい。再生している最中、Siestaはまずテスト（準備したスケルトン）を全体的に実行しますので、テストが最終処理を行ったあとにレコーダーのアクションが再生されます。

ターゲットロケータの編集

グリッド内のフィールドは全て編集可能となっていますので、簡単にインラインで値を変更できます。ターゲットセルをクリックすると、レコーダーが集めた選択肢の中から一つを選択するか、好きな値を入力できます。入力している最中は、Siestaがターゲットをハイライトします。画面の中のもの一つだけをターゲットとし、あなたのターゲットセレクターをそのターゲット専用にして下さい。もし五つのExt JSボタンが一つページにあるとした場合 “>> button” を入力しても、ターゲットロケータとして一般的すぎるので、うまく動作しません（この場合はSiestaが警告します）。

recorder-target-editor

非同期の操作を待つ

よく見られることですが、単純にただ画面のクリックを記録して、それを再生するといつもうまく動作するとは限りません。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 のメソッドを利用してみることができます。 + ボタンをクリックして、カスタムステップを追加し、二つのクリックステップの間にドラッグして下さい。

recorder-wait-action

待つステップを追加した後では、このテストシーケンスは丈夫なので、Ajaxの要求が5ミリ秒もしくは10秒かかるとしても関係ありません。

関数の手順

アプリケーションUIと対話すると、その最中にいくつかのアサーションを実行したくなると思います。これは自分のIDEで行うほうがもっと簡単ですが、レコーダーにも単純なコードエディタを追加しました。もし以前のサンプルで続けると、ロードが終了してから特定のテキストが存在していることをアサートすると良いですね。このような関数の手順を追加するには、リストで‘fn’アクションを選択して、TABを押して下さい。そうすればどの通常なJSでも、どんなSiesta.Test アサーションメソッドであっても実行できます。

recorder-fn-step

記録されたイベントに対して全てが完了したと思ったら、単純にGenerate codeボタンを押して、テストスケルトンに内容をコピーして貼付けます。

recorder_generated_code

move-cursor-toの手順を記録する

時々他のアクションを起こさずに、ただ画面のどこかにカーソルを移動させたいときがあります。レコーダーは全てのマウス移動を記録しませんので、Siestaにカーソルをどこかに動かしたいと通信する特別な方法があります。単純にマウスを適当な場所に移動させて、そこに３秒置いておくと moveCursorTo のアクションがリストに追加されます。例えばグリッドカラムを表示するためにトリガーしている時など、これは色々な状況で役に立ちます。メニューアイコンはカーソルをグリッドカラムヘッダーの上に動かすまで隠されているので、すぐにはメニューアイコンをクリックできません。

楽しんで記録して下さい！このガイド、またはレコーダーについてフィードバックがありましたら、是非教えて下さい。

Bryntum