現在表示中:

概要

アダプティブフォームは、顧客との対話には不可欠なものです。新しい修正パックの展開やフォームでルール変更があった場合など、アダプティブフォームに変更が加えられるたびにアダプティブフォームをテストすることが重要です。しかしながら、アダプティブフォームの機能テストおよびすべてのフィールドの機能テストは面倒な作業です。 

Calvin を使用すれば Web ブラウザーでアダプティブフォームの自動テストを実行できます。Calvin は、テストの実行用に Hobbes のユーザーインターフェイスを利用して、次のツールを提供します。

  • テスト作成用の JavaScript API。
  • テスト実行用のユーザーインターフェイス。

Calvin を使用して、CRXDE でテストケースを作成して Web ブラウザーで直接 UI テストを実行し、アダプティブフォームの以下の点について十分にテストすることができます。

テストするアダプティブフォームの機能 説明
アダプティブフォームの事前入力機能
  • フォームはデータモデルのタイプに基づいて予想通りに事前入力されているか。
  • フォームオブジェクトのデフォルト値は予想通りに事前入力されているか。
アダプティブフォームの送信機能
  • 送信時に適切なデータが生成されているか。
  • フォームは送信時にサーバー上で再検証されているか。
  • フォームに対して設定された送信アクションは実行されているか。

式のルール

 

  • 関連する UI 操作を実行した後、フォームオブジェクトに関連付けられている式(フィールドを閉じた後のスクリプトの計算、表示、実行など)は実行されているか。
検証
  • 操作を実行した後にフィールド検証は予想通りに実行されているか。

遅延読み込み

 

  • タブ(またはパネルのナビゲーション項目)をクリックすると、HTML は遅延読み込みの設定ごとにサーバーから取得されているか。

 

UI インタラクション

 

前提条件

この記事を読んでテストケースを作成する前に、次の内容を理解しておく必要があります。

例: Hobbes をテスト用フレームワークとして使用してアダプティブフォームのテストスイートを作成する

次の例では、複数のアダプティブフォームのテスト用にテストスイートを作成する手順を説明しています。テストする必要のある各フォームに対して個別のテストケースを作成します。以下の手順と同じ手順に従って、手順 11 の JavaScript コードを変更し、独自のテストスイートを作成してアダプティブフォームをテストすることができます。 

  1. Web ブラウザーで CRXDE Lite(http://[server]:[port]/crx/de)に移動します。

  2. /etc/clientlibs サブフォルダーを右クリックして、作成ノードを作成をクリックします。名前(ここでは afTestRegistration)を入力し、ノードのタイプを cq:ClientLibraryFolder と指定して「OK」をクリックします。

    clientlibs フォルダーには、使用するアプリケーション(JS および Init)の登録機能が含まれています。clientlibs フォルダーには、フォームに固有の Hobbes のすべてのテストスイートオブジェクトを登録することをお勧めします。

  3. 次のプロパティ値を、新しく作成したノード(ここでは afTestRegistration)で指定し、「すべて保存」をクリックしますこれらのプロパティにより、Hobbes でフォルダーをテストとして認識できます。このクライアントライブラリを他のクライアントライブラリで依存関係として再利用するには、granite.testing.calvin.tests という名前を付けます。

    プロパティ タイプ

    categories

    String[]

    granite.testing.hobbes.tests, granite.testing.calvin.tests

    dependencies

    String[]

    granite.testing.hobbes.testrunner, granite.testing.calvin, apps.testframework.all

    注意:

    granite.testing.calvin.af clientlib には、すべてのアダプティブフォーム API が含まれます。これらの API は、Calvin の名前空間の一部です。

    1_afTestRegistration
  4. テストノード(ここでは afTestRegistration)を右クリックして、作成ファイルを作成をクリックします。ファイル名に「js.txt」と入力して、「OK」をクリックします。

  5. js.txt ファイルに次のテキストを追加します。

    #base=.
    js.txt
    
  6. すべて保存」をクリックして、js.txt ファイルを閉じます。

  7. テストノード(ここでは afTestRegistration)を右クリックして、作成ファイルを作成をクリックします。ファイル名に「init.js」と入力して、「OK」をクリックします。

  8. init.js ファイルに次のコードをコピーして、「すべて保存」をクリックします。

    (function(window, hobs) {
        'use strict';
        window.testsuites = window.testsuites || {};
     	// Registering the test form suite to the sytem
     	// If there are other forms, all registration should be done here
        window.testsuites.testForm = new hobs.TestSuite("Adaptive Form - Demo Test", {
            path: '/etc/clientlibs/afTestRegistration/init.js',
            register: true
        });
    	// window.testsuites.testForm1 = new hobs.TestSuite("testForm1");
    }(window, window.hobs));

    上記のコードを使用すると、Adaptive Form - Demo Test という名前のテストスイートが作成されます。別の名前でテストスイートを作成するには、それに応じて名前を変更します。

  9. 作成ノードを作成をクリックし、テストを行う各フォームの clientlib フォルダーの下にノードを作成します。この例では、testForm という名前のノードを使用して、testForm という名前のアダプティブフォームをテストします次のプロパティを指定して「OK」をクリックします。

    • 名前:testForm(使用するフォーム名)
    • タイプ:cq:ClientLibraryFolder
  10. 次のプロパティを新しく作成したノード(ここでは testForm)に追加し、アダプティブフォームをテストします。

    プロパティ タイプ
    categories String[] granite.testing.hobbes.tests, granite.testing.hobbes.tests.testForm
    dependencies String[] granite.testing.calvin.tests

    注意:

    この例では、より良い管理のために、クライアントライブラリ granite.testing.calvin.tests における依存関係を使用します。また、必要に応じてクライアントライブラリカテゴリ「granite.testing.hobbes.tests.testForm」を追加して、このクライアントライブラリを再使用しています。

    2_testFormProperties
  11. テストフォーム用に作成したフォルダー(ここでは testForm)を右クリックし、作成ファイルを作成を選択します。ファイルに scriptingTest.js と名前を付けて、次のコードをファイルに追加して「すべて保存」をクリックします。

    次のコードを使用して別のアダプティブフォームをテストするには、navigateTo(行 11、36、62)および個々のテストケースで、フォームのパスと名前を変更します。フォームおよびフォームオブジェクトのさまざまな機能をテストするための API について詳しくは、「Calvin API」を参照してください。

     

    (function(window, hobs) {
        'use strict';
    
    	var ts = new hobs.TestSuite("Script Test", {
            path: '/etc/clientlibs/testForm/scriptingTest.js',
    		register: false
    	})	
    
        .addTestCase(new hobs.TestCase("Checking execution of calculate script")
            // navigate to the testForm which is to be tested
            .navigateTo("/content/forms/af/testForm.html?wcmmode=disabled")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
            .execSyncFct(function () {
                // create a spy before checking for the expression
                calvin.spyOnExpression("panel1.textbox1");
                // setValue would trigger enter, set the value and exit from the field
                calvin.setValueInDOM("panel1.textbox", "5");
            })
            // if the calculate expression was setting "textbox1" value to "5", let's also check that
            .asserts.isTrue(function () {
                return calvin.isExpressionExecuted("panel1.textbox1", "Calculate");
            })
            .execSyncFct(function () {
                calvin.destroySpyOnExpression("panel1.textbox1");
            })
            .asserts.isTrue(function () {
                return calvin.model("panel1.textbox1").value == "5"
            })
        )
    
        .addTestCase(new hobs.TestCase("Calculate script Test")
            // navigate to the testForm which is to be tested
            .navigateTo("/content/forms/af/cal/demoform.html?wcmmode=disabled&dataRef=crx:///content/forms/af/cal/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
    
            .execSyncFct(function () {
                // create a spy before checking for the expression
                calvin.spyOnExpression("panel2.panel1488218690733.downPayment");
                // setValue would trigger enter, set the value and exit from the field
                calvin.setValueInDOM("panel2.panel1488218690733.priceProperty", "1000000");
            })
            .asserts.isTrue(function () {
                return calvin.isExpressionExecuted("panel2.panel1488218690733.downPayment", "Calculate");
            })
            .execSyncFct(function () {
                calvin.destroySpyOnExpression("panel2.panel1488218690733.downPayment");
            })
            .asserts.isTrue(function () {
                // if the calculate expression was setting "downPayment" value to "10000", let's also check that
    			return calvin.model("panel2.panel1488218690733.downPayment").value == 10000
            })
        )
    
        .addTestCase(new hobs.TestCase("Checking execution of Value commit script")
            // navigate to the testForm which is to be tested
            .navigateTo("/content/forms/af/cal/demoform.html?wcmmode=disabled&dataRef=crx:///content/forms/af/cal/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
    
            .execSyncFct(function () {
                // create a spy before checking for the expression
                calvin.spyOnExpression("panel2.panel1488218690733.priceProperty");
                // setValue would trigger enter, set the value and exit from the field
                calvin.setValueInDOM("panel2.panel1488218690733.priceProperty", "100");
            })
            .asserts.isTrue(function () {
                return calvin.isExpressionExecuted("panel2.panel1488218690733.priceProperty", "Value Commit");
            })
            .execSyncFct(function () {
                calvin.destroySpyOnExpression("panel2.panel1488218690733.priceProperty");
            })
            .asserts.isTrue(function () {
    	        // if the value commit expression was setting "textbox1488215618594" value to "0", let's also check that
                return calvin.model("panel2.panel1488218690733.textbox1488215618594").value == 0
            })
        );
    
    	// register the test suite with testForm
     	window.testsuites.testForm.add(ts);
    
    
     }(window, window.hobs));
    

    テストケースが作成されます。テストケースを実行して、Hobbes を介してアダプティブフォームをテストします。テストケースの実行手順について詳しくは、「自動化されたテストを使用した UI のテストでテストを実行する」を参照してください。

ダウンロード

自動化されたテストを使用した UI のテスト

1 つのテストスイートの実行

テストスイートは個別に実行できます。テストスイートを実行すると、ページがテストケースに変更され、そのアクションが実行されてテスト完了後に結果が表示されます。アイコンは結果を示しています。

チェックマークのアイコンは、合格したテストを示しています。

「X」のアイコンは、不合格となったテストを示しています。

テストスイートの実行手順

  1. 「テスト」パネルで、実行するテストケースの名前をクリックまたはタップし、アクションの詳細を展開します。

    1_TapNameOfTestCase
  2. 「テストを実行」ボタンをクリックまたはタップします。

    2_ClickRun
  3. テストが実行されると、プレースホルダーがページコンテンツと置き換えられます。

    3_PageContent
  4. 説明をタップまたはクリックして「結果」パネルを開き、テストケースの結果を確認します。「結果」パネルでテストケースの名前をタップまたはクリックすると、すべての詳細が表示されます。

    4_ReviewResults

AEM アダプティブフォームのテスト手順は、AEM UI のテスト手順と同じです。アダプティブフォームのテストについて詳しくは、「UI のテスト」で以下のセクションを参照してください。

  • テストスイートの表示
  • 複数のテストの実行

用語集

用語 説明

テストスイート

テストスイートは関連するテストケースのコレクションです。

テストケース

テストケースは、ユーザーが UI を使用して実行するタスクを表します。テストスイートにテストケースを追加して、ユーザーが実行するアクティビティをテストします。

アクション

アクションとは、UI でジェスチャ(ボタンのクリックや入力ボックスへの値の入力など)を実行するメソッドです。

hobs.actions.Asserts、hobs.actions.Core、hobs.utils.af クラスのメソッドが、テストで使用できるアクションです。すべてのアクションは同期的に実行されます。

オーサー環境とパブリッシュ環境

一般的に、フォームはオーサー環境またはパブリッシュ環境のいずれかでテストできます。パブリッシュ環境の場合、デフォルトではテストを実行するためにアクセスは制限されています。これは、テスト実行者に関連するすべてのクライアントライブラリが、JCR 構造のライブラリにあるためです。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー