Show Menu
トピック×

UI のテスト

AEM には、AEM UI のテストを自動化するためのフレームワークが用意されています。このフレームワークを使用して、Web ブラウザーで直接 UI テストを記述して実行します。このフレームワークには、テストを作成するための JavaScript API が用意されています。
AEMテストフレームワークは、JavaScriptで記述されたテスト用ライブラリであるHobbes.jsを使用します。 Hobbes.js フレームワークは、開発プロセスの一環として AEM のテスト用に開発されたものです。このフレームワークは現在、独自の AEM アプリケーションのテスト用に一般に利用できます。
Refer to the Hobbes.js documentation for full details of the API.

テストの構造

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

テストの実行

テストスイートの表示

テストコンソールを開くと、登録されているテストスイートが表示されます。テストパネルには、テストスイートとそのテストケースのリストが表示されます。
ツールコンソールに移動するには、 グローバルナビゲーション/ツール/運営/テスト ​の順に移動します。
コンソールを開くと、左側には、テストスイートのリストと共に、すべてのテストスイートを順番に実行するためのオプションが表示されます。右側に表示される背景が格子柄のスペースは、テストの実行時にページコンテンツを表示するためのプレースホルダーです。

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

テストスイートは個別に実行できます。1 つのテストスイートを実行すると、テストケースとそのアクションの実行に応じてページが変化し、テストの完了後に結果が表示されます。アイコンによって結果が示されます。
チェックマークアイコンは、成功したテストを示します。
「X」アイコンは、失敗したテストを示します。
1 つのテストスイートを実行するには:
  1. テストパネルで、実行するテストケースの名前をクリックまたはタップして、アクションの詳細を展開します。
  2. Run tests 」ボタンをクリックまたはタップします。
  3. テストが実行されると、プレースホルダーはページコンテンツに置き換えられます。
  4. 説明をタップまたはクリックして​ 結果 ​パネルを開いて、テストケースの結果を確認します。 結果 ​パネルでテストケースの名前をタップまたはクリックすると、すべての詳細が表示されます。

複数のテストの実行

テストスイートは、コンソールに表示された順番で実行されます。テストをドリルダウンして、詳細な結果を確認できます。
  1. テストパネルで、実行するテストスイートのタイトルの下にある「 Run all tests 」ボタンまたは「 Run tests 」ボタンをタップまたはクリックします。
  2. 各テストケースの結果を表示するには、そのテストケースのタイトルをタップまたはクリックします。Tapping or clicking the name of your test in the Result panel shows all details.

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

The following procedure steps you through the creation and execution of a Test Suite using We.Retail content , but you can easily modify the test to use a different web page.
独自のテストスイートの作成について詳しくは、 Hobbes.js API のドキュメント を参照してください。
  1. CRXDE Lite を開きます。( http://localhost:4502/crx/de )
  2. Right-click the /etc/clientlibs folder and click Create > Create Folder . 名前に myTests と入力して、「 OK 」をクリックします。
  3. Right-click the /etc/clientlibs/myTests folder and click Create > Create Node . 以下のプロパティ値を使用して「 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. テスト ​コンソールに移動して、テストスイートを実行します。