チュートリアル:アダプティブフォームのテスト

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

アダプティブフォームの準備が整ったら、アダプティブフォームをエンドユーザーにロールアウトする前にテストすることが重要です。 すべてのフィールドを手動でテスト(機能テスト)したり、アダプティブフォームのテストを自動化したりできます。 複数のアダプティブフォームがある場合、すべてのアダプティブフォームのすべてのフィールドを手動でテストするのは、大変な作業です。

AEM Formsは、アダプティブフォームのテストを自動化するテストフレームワークCalvinを提供します。 このフレームワークを使用して、Web ブラウザーで直接 UI テストを記述して実行します。このフレームワークは、テストを作成するためのJavaScript APIを提供します。 自動テストを使用すると、アダプティブフォームの事前入力エクスペリエンス、アダプティブフォームの送信エクスペリエンス、式ルール、検証、遅延読み込み、UIの操作をテストできます。 このチュートリアルでは、アダプティブフォームで自動化されたテストを作成し、実行する手順について説明します。 このチュートリアルを完了すると、次の操作を実行できるようになります。

手順1:テストスイートの作成

テストスイートには、テストケースの集まりがあります。 複数のテストスイートを持つことができます。 各フォームに個別のテストスイートを用意することをお勧めします。 テストスイートを作成するには:

  1. のAEM Formsオーサーインスタンスに管理者としてログインします。 CRXDE Liteを開きます。 AEMロゴ/ツール / 一般 / CRXDE Lite​をタップするか、ブラウザーでhttps://localhost:4502/crx/de/index.jsp URLを開いてCRXDE Liteを開きます。

  2. CRXDE Liteの/etc/clientlibsに移動します。 /etc/clientlibs サブフォルダーを右クリックして、作成ノードを作成​をクリックします。「名前」フィールドに、WeRetailFormTestCases​と入力します。 タイプとして​cq:ClientLibraryFolder​を選択し、「OK」をクリックします。 ノードが作成されます。 WeRetailFormTestCasesの代わりに任意の名前を使用できます。

  3. WeRetailFormTestCasesノードに次のプロパティを追加し、「すべて保存」をタップします。

    プロパティ タイプ 複数
    categories 文字列 Enabled
    • granite.testing.hobbes.tests
    • granite.testing.calvin.tests
    dependencies 文字列 有効
    • granite.testing.hobbes.testrunner
    • granite.testing.calvin
    • apps.testframework.all

    次に示すように、各プロパティが別々のボックスに追加されていることを確認します。

    dependencies

  4. WeRetailFormTestCases​ノードを右クリックし、作成 / ファイルを作成​をクリックします。 「名前」フィールドに「js.txt」と入力し、「OK」をクリックします。

  5. js.txtファイルを編集用に開き、次のコードを追加して、ファイルを保存します。

    #base=.
     init.js
    
  6. WeRetailFormTestCasesノードにファイル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.testForm3 = new hobs.TestSuite("We retail - Tests", {
            path: '/etc/clientlibs/WeRetailFormTestCases/init.js',
            register: true
        });
     // window.testsuites.testForm2 = new hobs.TestSuite("testForm2");
    }(window, window.hobs));
    

    上記のコードは、「 We retail - Tests 」という名前のテストスイートを作成します。

  7. AEMテストUIを開きます(AEM > ツール > 操作 > テスト)。 テストスイート​We retail(Tests)がUIに表示されます。

    we-retail-test-suite

手順2:アダプティブフォームに事前に値を入力するテストケースを作成する

テストケースは、特定の機能をテストするための一連のアクションです。 例えば、フォームのすべてのフィールドの事前入力や、正しい値が入力されていることを確認するためのいくつかのフィールドの検証を行います。

アクションとは、アダプティブフォーム上の特定のアクティビティのことで、ボタンのクリックなどを指します。 各アダプティブフォームフィールドのユーザー入力を検証するテストケースとアクションを作成するには:

  1. CRXDE liteで、/content/forms/af/create-first-adaptive-formフォルダーに移動します。 create-first-adaptive-form​フォルダーノードを右クリックし、作成 ファイルを作成​をクリックします。 「名前」フィールドに「prefill.xml」と入力し、「OK」をクリックします。 次のコードをファイルに追加しました。

    <?xml version="1.0" encoding="UTF-8"?><afData>
      <afUnboundData>
        <data>
          <customer_ID>371767</customer_ID>
          <customer_Name>John Jacobs</customer_Name>
          <customer_Shipping_Address>1657 1657 Riverside Drive Redding</customer_Shipping_Address>
          <customer_State>California</customer_State>
          <customer_ZIPCode>096001</customer_ZIPCode>
         </data>
      </afUnboundData>
      <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/"/>
      </afBoundData>
    </afData>
    
  2. /etc/clientlibs に移動します。/etc/clientlibsサブフォルダーを右クリックし、「作成ノードを作成」をクリックします。

    名前」フィールドにWeRetailFormTestsと入力します。 タイプを「cq:ClientLibraryFolder」と選択し、「OK」をクリックします。

  3. WeRetailFormTests​ノードに次のプロパティを追加します。

    プロパティ タイプ 複数
    カテゴリ 文字列 有効
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    dependencies 文字列 有効
    • granite.testing.calvin.tests
  4. WeRetailFormTests​ノードにjs.txtというファイルを作成します。 ファイルに以下を追加します。

    #base=.
    prefillTest.js
    

    すべて保存」をクリックします。

  5. WeRetailFormTests​ノードにprefillTest.jsファイルを作成します。 以下のコードをファイルに追加します。 コードはテストケースを作成します。 テストケースでは、フォームのすべてのフィールドが事前に入力され、正しい値が入力されていることを確認するために一部のフィールドが検証されます。

    (function (window, hobs) {
        'use strict';
    
        var ts = new hobs.TestSuite("Prefill Test", {
            path: '/etc/clientlibs/WeRetailFormTests/prefillTest.js',
            register: false
        })
    
        .addTestCase(new hobs.TestCase("Prefill Test")
            // navigate to the testForm which is to be test
            .navigateTo("/content/forms/af/create-first-adaptive-form/shipping-address-add-update-form.html?wcmmode=disabled&dataRef=crx:///content/forms/af/create-first-adaptive-form/prefill.xml")
            // check if adaptive form is loaded
            .asserts.isTrue(function () {
                return calvin.isFormLoaded()
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ID").value == 371767;
            })
            .asserts.isTrue(function () {
                return calvin.model("customer_ZIPCode").value == 96001;
            })
        );
    
        // register the test suite with testForm
        window.testsuites.testForm3.add(ts);
    
    }(window, window.hobs));
    

    テストケースが作成され、実行する準備が整いました。 テストケースを作成して、計算スクリプトの実行確認、パターンの検証、アダプティブフォームの送信操作の検証など、アダプティブフォームの様々な側面を検証することができます。 アダプティブフォームのテストの様々な側面について詳しくは、「アダプティブフォームの自動テスト」を参照してください。

手順3:スイート内のすべてのテストまたは個々のテストケースを実行します。

テストスイートには複数のテストケースを含めることができます。 テストスイート内のすべてのテストケースは、一度に、または個別に実行できます。 テストを実行すると、結果が次のアイコンで示されます。

  • チェックマークアイコンは、合格したテストを示します。save_icon
  • 「X」アイコンは、失敗したテストを示します。close-icon
  1. AEMアイコン/ ツール> 操作 テスト​に移動します。

  2. テストスイートのすべてのテストを実行するには:

    1. Testsパネルで、We retail - Tests (1)​をタップします。 テストスイートが展開され、テストのリストが表示されます。

    2. テストを実行」ボタンをタップします。 テストを実行すると、画面の右側の空白の領域がアダプティブフォームに置き換えられます。

      ランオールテスト

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

    1. テストパネルで、「 We retail - Tests (1) 」をタップします。 テストスイートが展開され、テストのリストが表示されます。
    2. 事前入力テスト」をタップし、「テストを実行」ボタンをタップします。 テストを実行すると、画面の右側の空白の領域がアダプティブフォームに置き換えられます。
  4. テスト名「事前入力テスト」をタップして、テストケースの結果を確認します。 結果パネルが開きます。 結果パネルでテストケースの名前をタップし、テストの詳細をすべて表示します。

    review-results

これで、アダプティブフォームの発行準備が整いました。

このページ