Show Menu
トピック×

UI のテスト

AEM 6.5以降では、hobbes.js UIテストフレームワークは非推奨です。 Adobeでは、Seleniumの機能をさらに強化する予定はありません。Seleniumの自動化をお勧めします。
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 を開きます。( https://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. テスト ​コンソールに移動して、テストスイートを実行します。