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 アプリケーションのテスト用に一般に利用できます。

メモ

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

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

次の手順では、Web.Retailコンテンツを使用してTest Suiteを作成および実行する手順を示しますが、テストを簡単に変更して別の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 文字列[] 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. テスト​コンソールに移動して、テストスイートを実行します。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now