ドキュメントAEM 6.4開発ガイド

UI のテスト testing-your-ui

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Developer
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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

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

NOTE
この API について詳しくは、Hobbes.js のドキュメントを参照してください。

テストの構造 structure-of-tests

AEM内で自動テストを使用する場合、次の用語を理解することが重要です。

動作
アクション ​は、リンクやボタンのクリックなど、web ページ上の特定のアクティビティです。
テストケース
テストケース ​は、1 つ以上の​ アクション ​で構成できる特定の状況です。
テストスイート
テストスイート ​は、関連する​ テストケース ​を組み合わせて、特定のユースケースをテストします。

テストの実行 executing-tests

テストスイートの表示 viewing-test-suites

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

からツールコンソールに移動します。 グローバルナビゲーション/ツール/操作/テスト.

chlimage_1-26

コンソールを開くと、テストスイートが左側に表示され、すべてを順番に実行するオプションも表示されます。 右側のスペースには、背景がチェックマーク付きで表示され、テストの実行時にページのコンテンツを表示するためのプレースホルダーです。

chlimage_1-27

単一のテストスイートの実行 running-a-single-test-suite

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

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

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

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

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

    chlimage_1-28

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

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

    chlimage_1-29

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

    chlimage_1-30

複数のテストの実行 running-multiple-tests

テストスイートは、コンソールに表示される順序で順番に実行されます。 テストの詳細を調べて、結果を確認できます。

chlimage_1-31

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

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

    chlimage_1-32

シンプルなテストスイートの作成と使用 creating-and-using-a-simple-test-suite

次の手順は、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 ノードに次のプロパティを追加します。

    table 0-row-3 1-row-3 2-row-3
    名前 タイプ 値
    categories String[] granite.testing.hobbes.tests
    dependencies String[] granite.testing.hobbes.testrunner
    note note
    NOTE
    AEM Formsのみ
    アダプティブフォームをテストするには、カテゴリと依存関係に次の値を追加します。 次に例を示します。
    categories：granite.testing.hobbes.tests, granite.testing.hobbes.af.commons
    dependencies：granite.testing.hobbes.testrunner, granite.testing.hobbes.af

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

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

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

    code language-none 
    #base=.
myTestSuite.js

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

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

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

    code language-none 
    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. テスト ​コンソールに移動して、テストスイートを実行します。

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e