UI のテスト

メモ

AEM 6.5 以降、hobbes.js UI テストフレームワークは非推奨となります。アドビははそれ以上の機能拡張を行う予定はなく、Selenium 自動化を使用することをお客様に推奨しています。

廃止される機能および削除された機能を参照してください。

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

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

メモ

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

テストの構造

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

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

テストの実行

テストスイートの表示

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

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

chlimage_1-63

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

chlimage_1-64

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

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

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

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

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

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

    chlimage_1-65

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

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

    chlimage_1-66

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

    chlimage_1-67

複数のテストの実行

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

chlimage_1-68

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

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

    chlimage_1-69

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

次の手順は、We.Retail のコンテンツを使用したテストスイートの作成と実行の方法を説明するものですが、別の web ページを使用するよう簡単にテストを変更できます。

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

  1. CRXDE Lite を開きます。(https://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. テスト​コンソールに移動して、テストスイートを実行します。

このページ