2

新製品のクライアント側に Sencha ExtJS を使用することを決定し、クライアント側で自動機能テストを行う予定です。Ranorex、Selenium、Telerik Test Studio などのいくつかのツールを調べましたが、これまでのところ、Test Studio が他のツールよりも気に入っています。とにかく、私が尋ねている質問は、これらのツールのどれを使用するかに関係なく関連しています。

extjs コントロールの内部要素を取得するための推奨される方法を知りたいです。十分に明確にするために、例を挙げます。

数値フィールド コントロールがあり、「上へ」ボタンをクリックすると、フィールドの値が 1 単位増加することをテストしたいと思います。数値フィールドに一意の ID を設定したことに注意してください (id="testDurationHourNumberField")。数値フィールドには、次の (簡略化された) DOM 構造があります。

<table id="testDurationHourNumberField">
<tbody>
    <tr id="testDurationHourNumberField-inputRow">
        <td id="testDurationHourNumberField-labelCell">
            <label id="testDurationHourNumberField-labelEl">Label:</label>
        </td>
        <td id="testDurationHourNumberField-bodyEl">
            <table id="testDurationHourNumberField-triggerWrap">
                <tbody>
                    <tr>
                        <td id="testDurationHourNumberField-inputCell">
                            <input id="testDurationHourNumberField-inputEl">
                        </td>
                        <td>
                            <div role="button" id="ext-gen1211"></div>
                            <div role="button" id="ext-gen1212"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
</table>

これを行うには、入力要素 (id="testDurationHourNumberField-inputEl") とボタン (id="ext-gen1211") にアクセスする必要があります。これらの 2 つの要素にアクセスするための推奨される方法は?

これまでのところ、次のオプションがあります。

  • ExtJS の内部 ID を使用します。
    • これらは内部 ID であり、自分では制御できないため、後でページに別のコントロールを追加すると変更される可能性があります
    • 同じページに対して、ブラウザごとに異なる ID を取得しているようです。たとえば、IE 10 では、Google Chrome で取得した ID とは異なるボタンの ID を取得します。
  • 一意の ID でコントロールを取得し、内部 DOM 構造または属性を知ることで内部要素を取得します。
    • ExtJS の次のバージョンにアップグレードするときに、内部 DOM 構造が変更されないか、一部の属性名が変更され、作成したテストを更新する必要があるかどうかがわからないため、この方法は使用したくありません。
    • 例: 擬似コード: getById('testDurationHourNumberField').getElementByAttributeAndIndex('role=button', 0)

これを行うための推奨される方法を教えてください。

ありがとう、
ポール

4

3 に答える 3

2

これは私のプロジェクトでそれを行う方法です：

it("should increment the control value", function () {
    var ctrl = Ext.ComponentQuery.query('#age')[0],
        upBtn = Ext.ComponentQuery.query('#upButton')[0],
        curValue = ctrl.getValue();

    upBtn.fireEvent('click');

    expect(ctrl.getValue()).toEqual(curValue + 1);
});

ジャスミンを使っています。

アップデート：

機能テストについては、これを読む必要があります。

  1. できればセレンを使用して、ブラウザでextjsコードをテストするための提案はありますか? この：
  2. http://www.sencha.com/blog/testing-ext-js-ext-gwt-applications-with-selenium
于 2012-12-18T14:59:50.890 に答える
1

しばらく経ちましたが、この問題にどのように対処することにしたかをここに書きます。機能テストには Telerik TestStudio を使用し、内部要素を取得するには GetById アプローチを使用します。各コンポーネントの各 ID は一意である必要があります。このアプローチの主な問題は、自動生成された ID にありました。

  • 内部コンポーネントの ID は、ブラウザーによって異なる値を取得します。
  • 内部コンポーネントの ID は、ExtJs のアップグレードで変更される可能性があります
  • ページに他のコンポーネントを追加すると、内部コンポーネントの ID が変更される場合があります (これは常に発生します)。

これを解決するために、ExtJS クラスのパッチを実装して、内部要素の ID が一意であることを確認しました。

私の質問の数値フィールドの例では、次のパッチを実装して、数値フィールドのボタンに別のブラウザーで変更されない一意の ID があることを確認しました。

Ext.define('Waf.patch.extJS411.form.field.Spinner', {
    override: 'Ext.form.field.Spinner',

    getTriggerMarkup: function() {
        var me = this,
            hideTrigger = (me.readOnly || me.hideTrigger);

        me.triggerTpl = '<td style="{triggerStyle}">' +
            '<div class="' + Ext.baseCSSPrefix + 'trigger-index-0 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-up"' + 'id="' + me.id + '-buttonUp"' + ' role="button"></div>' +
            '<div class="' + Ext.baseCSSPrefix + 'trigger-index-1 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-down"' + 'id="' + me.id + '-buttonDown"' + ' role="button"></div>' +
            '</td>' +
            '</tr>';

        return me.getTpl('triggerTpl').apply({
            triggerStyle: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px')
        });
    }
});

この問題が発生した他のクラスにもパッチを実装したため、ほとんどのユースケースをカバーしました。多くのパッチはありません:

  • Ext.form.field.Spinner
  • Ext.form.field.Trigger
  • Ext.panel.Panel
  • Ext.view.BoundList
  • Ext.window.MessageBox

よろしく、ポール

于 2013-05-15T15:55:00.010 に答える
0

自動化された機能的なGUIテストツールRIATestを確認することをお勧めします。

ExtJS UIウィジェットは、RIATestの第一級市民です。つまり、他のHTMLテストツールとは異なり、実際にExtJSコンポーネントを操作する必要がある場合に、HTMLDOM要素を操作するテストを作成する必要はありません。

RIATestは、ExtJSによって動的に生成されたIDを無視する方法を知っていますが、コンポーネントに手動でIDを割り当てると、ツールはそれらを識別に使用します（たとえば、以下のサンプルの＃tree2を参照）。

RIATestのテストは、ExtJSUIウィジェットの観点から動作します。

ExtJSウィジェットで動作するRIATestスクリプトの例：

次のラベルが「次のページ」のExtJSボタンをクリックします。

ExtButton("Next Page")=>click();

そして、以下は、あるExtJSツリーから別のExtJSツリーへの行のドラッグアンドドロップを行います。

ExtRow("Controller.js")=>dragAndDropTo(
    ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));

そして、これはExtJSボックスのヘッダーを折りたたむ：

ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();

（上記のすべてのサンプルコードは、ExtJSサンプルアプリケーションで実行される実際のテストスクリプトからのものです）。

RIATestは、ExtJS AJAXが終了するのを自動的に待機するタイミングも認識しているため、UIが動的コンテンツのダウンロードを行う場合、テストはサーバーからデータが受信されるまで自動的に待機します。

（免責事項：私はRIATestチームのメンバーです）。

于 2013-01-30T05:39:11.380 に答える