UI のテスト testing-your-ui

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

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

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

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

テストの構造 structure-of-tests

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

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

テストの実行 executing-tests

テストスイートの表示 viewing-test-suites

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

からツールコンソールに移動します。 グローバルナビゲーション/ツール/操作/テスト.

chlimage_1-63

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

chlimage_1-64

単一のテストスイートの実行 running-a-single-test-suite

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

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

チェックマークアイコン。

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

円の中に X が表示された、テストの失敗を示すアイコン。

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

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

    chlimage_1-65

  2. テストを実行」をクリックします。

    「テストを実行」ボタンの画像。円の中に右向きのポインターが表示されています。

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

    chlimage_1-66

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

    chlimage_1-67

複数のテストの実行 running-multiple-tests

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

chlimage_1-68

  1. テストパネルで、 すべてのテストを実行 ボタンまたは テストを実行 ボタンをクリックします。

    円内の右向きのポインターで示される、「テストをすべて実行」ボタンと「テストを実行」ボタンの画像。

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

    chlimage_1-69

シンプルなテストスイートの作成と使用 creating-and-using-a-simple-test-suite

次の手順は、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 ノードに次のプロパティを追加します。

    table 0-row-3 1-row-3 2-row-3
    名前 タイプ
    categories String[] granite.testing.hobbes.tests
    dependencies String[] granite.testing.hobbes.testrunner
    note note
    NOTE
    AEM Forms のみ
    アダプティブフォームをテストするには、カテゴリと依存関係に次の値を追加します。次に例を示します。
    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 ファイルに次のテキストを入力します。

    code language-none
    #base=.
    myTestSuite.js
    
  8. すべて保存」をクリックして、js.txt ファイルを閉じます。

  9. myFirstTest ノードを右クリックして、作成/ファイルを作成 ​をクリックします。ファイル名にmyTestSuite.jsと入力して、「OK」をクリックします。

  10. myTestSuite.js ファイルに次のコードをコピーして、ファイルを保存します。

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2