アダプティブフォームのテスト自動化

概要

アダプティブフォームは、顧客とのやり取りを行う上で欠かすことができないものです。新しい修正パックの展開中やフォーム内のルールの変更中など、アダプティブフォームで行った変更をすべてテストすることが重要です。 しかしながら、アダプティブフォームの機能テストおよびすべてのフィールドの機能テストは面倒な作業です。

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

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

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

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

式のルール

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

遅延読み込み

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

UI インタラクション

前提条件

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

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

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

  1. WebブラウザーのCRXDE Liteに移動:https://'[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

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

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

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

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

  5. 次のコードを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 という名前のテストスイートが作成されます。別の名前でテストスイートを作成するには、それに応じて名前を変更します。

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

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

    プロパティ タイプ
    カテゴリ String[] granite.testing.hobbes.tests、granite.testing.hobbes.tests.testForm
    依存関係 文字列[] granite.testing.calvin.tests
    メモ

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

    2_testformproperties

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

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

    (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のテストでのテストの実行を参照してください。

また、添付ファイル SampleTestPackage.zip に含まれるパッケージをインストールすれば、「例: Hobbes をテスト用フレームワークとして使用してアダプティブフォームのテストスイートを作成する」で説明した手順の結果と同じ結果を得ることができます。

ファイルを入手

自動テストを使用した UI 文字列のテスト

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

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

チェックマークアイコンは、成功したテストを示します。 checkmark

「X」アイコンは、失敗したテストを示します。交差

1 つのテストスイートを実行するには:

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

    1.tapnameoftestcase

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

    2.clickrun

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

    3_pagecontent

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

    4_reviewresults

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

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

用語集

用語 説明

テストスイート

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

テストケース

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

アクション

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

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

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

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

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now