現在表示中:

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

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

注意:

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

テストの構造

自動化されたテストを AEM 内で使用する場合は、以下の用語を理解しておくことが重要です。

アクション アクションとは、リンクやボタンのクリックなど、Web ページに対する特定のアクティビティです。
テストケース テストケースとは、1 つ以上のアクションで構成できる特定の状況です。
テストスイート テストスイートとは、特定のユースケースをまとめてテストする、関連したテストケースのグループです。

テストの実行

テストスイートの表示

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

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

chlimage_1

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

chlimage_1

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

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

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

chlimage_1

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

chlimage_1

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

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

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

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

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

    chlimage_1

複数のテストの実行

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

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

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

    chlimage_1

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

次の手順は、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 に次の値を追加してください。次に例を示します。

    categoriesgranite.testing.hobbes.tests, granite.testing.hobbes.af.commons

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー