Show Menu
トピック×

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

これは、「 最初のアダプティブフォームを作成する 」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
アダプティブフォームの準備が整ったら、エンドユーザーにアダプティブフォームを展開する前に、そのアダプティブフォームをテストすることが重要です。 すべてのフィールドを手動でテスト(機能テスト)したり、アダプティブフォームのテストを自動化したりできます。 複数のアダプティブフォームがある場合、すべてのアダプティブフォームのすべてのフィールドを手動でテストすると、負担の大きいタスクになります。
AEM Forms は、アダプティブフォームのテストを自動化するテストフレームワークCalvinを提供します。 このフレームワークを使用して、Web ブラウザーで直接 UI テストを記述して実行します。フレームワークは、テストを作成するためのJavaScript APIを提供します。 自動テストでは、アダプティブフォームの事前入力エクスペリエンス、アダプティブフォームの送信エクスペリエンス、式ルール、検証からの検証、遅延読み込み、UIインタラクションをテストできます。 このチュートリアルでは、アダプティブフォームで自動テストを作成し、実行する手順について説明します。 このチュートリアルを完了すると、次の操作を実行できるようになります。

Step 1: Create a test suite

テストスイートには、テストケースが集まっています。 複数のテストスイートを設定できます。 フォームごとに個別のテストスイートを作成することをお勧めします。 テストスイートを作成するには:
  1. Log to AEM Forms author instance in as an administrator. CRXDE Liteを開きます。 ロゴ/ ツール / 一般 /CRXDE Liteをタップして、CRXDE Liteを開くにはブラウザでhttps://localhost:4502/crx/de/index.jspAEM URLを開く index.jsp か、 urlを開きます。
  2. CRXDE Liteの/etc/clientlibsに移動します。 /etc/clientlibs サブフォルダーを右クリックして、 作成 ノードを作成 ​をクリックします。「 名前 」フィールドにWeRetailFormTestCasesと入力 します 。 タイプを cq:ClientLibraryFolderとして選択し 、「 OK 」をクリックします。 ノードを作成します。 の代わりに任意の名前を使用でき WeRetailFormTestCases ます。
  3. Add the following properties to the WeRetailFormTestCases node and tap Save ALL .
    プロパティ 複数
    categories String Enabled
    • granite.testing.hobbes.tests
    • granite.testing.calvin.tests
    dependencies String Enabled
    • granite.testing.hobbes.testrunner
    • granite.testing.calvin
    • apps.testframework.all
    次に示すように、各プロパティが個別のボックスに追加されていることを確認します。
  4. Right-click the WeRetailFormTestCases node click Create > Create File . In the Name field, type js.txt and click 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 Testing UI(AEM/ Tools / Operations / Testing )を開きます。 テストスイート( 市販用 — テスト )がUIに表示されます。

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

テストケースとは、特定の機能をテストする一連のアクションです。 例えば、フォームのすべてのフィールドに事前入力し、いくつかのフィールドを検証して、正しい値が入力されていることを確認します。
アクションとは、ボタンのクリックなど、アダプティブフォーム上の特定のアクティビティを指します。 各アダプティブフォームフィールドのユーザー入力を検証するテストケースとアクションを作成するには:
  1. CRXDE Liteで、 /content/forms/af/create-first-adaptive-form フォルダーに移動します。 「 create-first-adaptive-form 」フォルダーノードを右クリックし、 作成 /ファイルを 作成をクリックします 。 In the Name field, type prefill.xml and click 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 に移動します。Right-click the /etc/clientlibs subfolder and click Create > Create Node .
    名前 」フィールドに入力し WeRetailFormTests ます。 タイプを「」として選択 cq:ClientLibraryFolder し、「 OK 」をクリックします。
  3. Add the following properties to the WeRetailFormTests node.
    プロパティ 複数
    categories String Enabled
    • granite.testing.hobbes.tests
    • granite.testing.hobbes.tests.testForm
    dependencies String Enabled
    • 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:スイート内または個々のテストケース内のすべてのテストを実行する

テストスイートには複数のテストケースを含めることができます。 テストスイート内のすべてのテストケースは、一度に実行することも、個別に実行することもできます。 テストを実行すると、アイコンに結果が示されます。
  • A checkmark icon indicates a passed test:
  • An "X" icon indicates a failed test:
  1. AEMアイコン/ ツール / 操作 / テストに移動します。
  2. テストスイートのすべてのテストを実行するには:
    1. Tests パネルで、「 We retail - Tests (1) 」をタップします。 スイートが展開され、テストのリストが表示されます。
    2. 「テストを 実行 」ボタンをタップします。 画面の右側の空白の領域は、テストの実行時にアダプティブフォームに置き換えられます。
  3. テストスイートから1つのテストを実行するには:
    1. Testsパネルで、「 We retail - Tests (1) 」をタップします。 スイートが展開され、テストのリストが表示されます。
    2. 事前入力テスト 」をタップし、「テストを 実行 」ボタンをタップします。 画面の右側の空白の領域は、テストの実行時にアダプティブフォームに置き換えられます。
  4. テスト名「Prefill test」をタップして、テストケースの結果を確認します。 「 Result 」パネルが開きます。 「 Result 」パネルでテストケースの名前をタップし、テストのすべての詳細を表示します。
これでアダプティブフォームの発行準備が整いました。