UI のテスト

AEM には、AEM UI のテストを自動化するためのフレームワークが用意されています。このフレームワークを使用して、Web ブラウザーで直接 UI テストを記述して実行します。このフレームワークは、テストを作成するための JavaScript API を提供します。

AEMのテストフレームワークは、JavaScript で記述されたテストライブラリ Hobbes.js を使用します。 Hobbes.js フレームワークは、開発プロセスの一環として AEM のテスト用に開発されたものです。このフレームワークは現在、独自の AEM アプリケーションのテスト用に一般に利用できます。

メモ

Hobbes.js を参照してください。 ドキュメント を参照してください。

テストの構造

自動化されたテストを AEM 内で使用する場合は、以下の用語を理解しておくことが重要です。
動作 An アクション は、リンクやボタンのクリックなど、Web ページ上の特定のアクティビティです。
テストケース A テストケース は、1 つ以上の アクション.
テストスイート A テストスイート は、関連する テストケース を組み合わせて、特定のユースケースをテストします。

テストの実行

テストスイートの表示

テストコンソールを開くと、登録されているテストスイートが表示されます。テストパネルには、テストスイートとそのテストケースのリストが表示されます。

ツールコンソールに移動するには、グローバルナビゲーション／ツール／運営／テスト​の順に移動します。

chlimage_1-26

コンソールを開くと、左側には、テストスイートのリストと共に、すべてのテストスイートを順番に実行するためのオプションが表示されます。右側に表示される背景が格子柄のスペースは、テストの実行時にページコンテンツを表示するためのプレースホルダーです。

chlimage_1-27

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

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

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

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

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

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

    chlimage_1-28

  2. 「Run tests」ボタンをクリックまたはタップします。

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

    chlimage_1-29

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

    chlimage_1-30

複数のテストの実行

テストスイートは、コンソールに表示された順番で実行されます。テストをドリルダウンして、詳細な結果を確認できます。

chlimage_1-31

  1. テストパネルで、実行するテストスイートのタイトルの下にある「Run all tests」ボタンまたは「Run tests」ボタンをタップまたはクリックします。

  2. 各テストケースの結果を表示するには、そのテストケースのタイトルをタップまたはクリックします。でテストの名前をタップまたはクリック 結果 パネルには、すべての詳細が表示されます。

    chlimage_1-32

シンプルなテストスイートの作成と使用

以下の手順で、を使用してテストスイートを作成および実行します。 We.Retail コンテンツを変更して別の Web ページを使用するように簡単にテストを変更できます。

独自のテストスイートの作成について詳しくは、Hobbes.js API のドキュメントを参照してください。

  1. CRXDE Lite を開きます。(http://localhost:4502/crx/de)

  2. を右クリックします。 /etc/clientlibs フォルダーに移動して、 作成/フォルダーを作成. 名前にmyTestsと入力して、「OK」をクリックします。

  3. を右クリックします。 /etc/clientlibs/myTests フォルダーに移動して、 作成/ノードを作成. 以下のプロパティ値を使用して「OK」をクリックします。

    • 名前：myFirstTest
    • 型：cq:ClientLibraryFolder

  4. myFirstTest ノードに次のプロパティを追加します。

    名前 タイプ 値
    categories String[] granite.testing.hobbes.tests
    dependencies String[] granite.testing.hobbes.testrunner
    メモ

    AEM Forms のみ

    アダプティブフォームをテストするには、categories と dependencies に次の値を追加してください。次に例を示します。

    カテゴリ: granite.testing.hobbes.tests, granite.testing.hobbes.af.commons

    依存: granite.testing.hobbes.testrunner, granite.testing.hobbes.af

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

  6. myFirstTest ノードを右クリックして、作成／ファイルを作成​をクリックします。ファイル名にjs.txtと入力して、「OK」をクリックします。

  7. js.txt ファイルに次のテキストを入力します。

    #base=.
myTestSuite.js

  8. 「すべて保存」をクリックして、js.txt ファイルを閉じます。

  9. myFirstTest ノードを右クリックして、作成／ファイルを作成​をクリックします。ファイル名にmyTestSuite.jsと入力して、「OK」をクリックします。

  10. myTestSuite.js ファイルに次のコードをコピーして、ファイルを保存します。

    new hobs.TestSuite("Experience Content Test Suite", {path:"/etc/clientlibs/myTests/myFirstTest/myTestSuite.js"})
   .addTestCase(new hobs.TestCase("Navigate to Experience Content")
      .navigateTo("/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html")
   )
   .addTestCase(new hobs.TestCase("Hover Over Topnav")
      .mouseover("li.visible-xs")
   )
   .addTestCase(new hobs.TestCase("Click Topnav Link")
      .click("li.active a")
);

  11. テスト​コンソールに移動して、テストスイートを実行します。

このページ