UI のテスト testing-your-ui

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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」アイコンは、失敗したテストを示します。

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

テストパネルで、実行するテストケースの名前をクリックして、アクションの詳細を展開します。
「テストを実行」をクリックします。
テストが実行されると、プレースホルダーはページコンテンツに置き換えられます。
「説明」をタップまたはクリックして結果パネルを開き、テストケースの結果を確認します。結果パネルでテストケースの名前をタップまたはクリックすると、すべての詳細が表示されます。

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

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

chlimage_1-68

テストパネルで、実行するテストスイートのタイトルの下にある「Run all tests」ボタンまたは「Run tests」ボタンをクリックします。
各テストケースの結果を表示するには、そのテストケースのタイトルをクリックします。結果パネルでテストの名前をクリックすると、すべての詳細が表示されます。

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

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

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

CRXDE Lite を開きます。(https://localhost:4502/crx/de)
/etc/clientlibs フォルダーを右クリックして、作成／フォルダーを作成 をクリックしてください。名前にmyTestsと入力して、「OK」をクリックします。
/etc/clientlibs/myTests フォルダーを右クリックし、作成／ノードを作成 をクリックしてください。以下のプロパティ値を使用して「OK」をクリックします。
- 名前：myFirstTest
- 型：cq:ClientLibraryFolder

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 のみ
アダプティブフォームをテストするには、カテゴリと依存関係に次の値を追加します。次に例を示します。
categories：`granite.testing.hobbes.tests, granite.testing.hobbes.af.commons`
dependencies：`granite.testing.hobbes.testrunner, granite.testing.hobbes.af`

「すべて保存」をクリックします。
myFirstTest ノードを右クリックして、作成／ファイルを作成 をクリックします。ファイル名にjs.txtと入力して、「OK」をクリックします。

js.txt ファイルに次のテキストを入力します。

code language-none
`#base=. myTestSuite.js`

「すべて保存」をクリックして、js.txt ファイルを閉じます。
myFirstTest ノードを右クリックして、作成／ファイルを作成 をクリックします。ファイル名にmyTestSuite.jsと入力して、「OK」をクリックします。

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

code language-none

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") );`

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")
);

テスト コンソールに移動して、テストスイートを実行します。

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2