測試您的UI testing-your-ui

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
開發

建立對象：

開發人員

CAUTION

AEM 6.4已結束延伸支援，本檔案不再更新。如需詳細資訊，請參閱技術支援期. 尋找支援的版本此處.

AEM提供AEM UI測試自動化的架構。使用框架時，直接在Web瀏覽器中編寫並運行UI測試。架構提供用於建立測試的javascript API。

AEM測試架構使用Hobbes.js，這是以Javascript撰寫的測試程式庫。 Hobbes.js架構是在開發程式中為測試AEM而開發。此架構現已可供公開使用，以測試您的AEM應用程式。

NOTE

請參閱Hobbes.js 檔案以取得API的完整詳細資訊。

測試結構 structure-of-tests

在AEM內使用自動化測試時，下列辭彙是您務必了解的重要項目：

動作

安動作是網頁上的特定活動，例如按一下連結或按鈕。

測試案例

A 測試案例 是由一或多個組成的特定情況動作.

測試套裝

A 測試套裝 是一組 測試案例 一起測試特定使用案例。

執行測試 executing-tests

檢視測試套裝 viewing-test-suites

開啟測試主控台，查看已註冊的測試套裝。「測試」面板包含測試套裝及其測試案例的清單。

透過導覽至工具主控台 全局導航 — >工具>操作 — >測試.

chlimage_1-26

開啟主控台時，測試套裝會列在左側，並附上可依序執行所有測試套裝的選項。右側以方格背景顯示的空格是測試執行時顯示頁面內容的預留位置。

chlimage_1-27

執行單一測試套裝 running-a-single-test-suite

測試套裝可個別執行。當您執行測試套裝時，頁面會隨著測試案例及其動作執行而變更，結果會在測試完成後顯示。圖示會指出結果。

勾選記號圖示表示通過的測試：

「X」圖示表示測試失敗：

若要執行測試套裝：

在「測試」面板中，按一下或點選您要執行的「測試案例」名稱，以展開「動作」的詳細資訊。
按一下或點選 運行測試 按鈕。
測試執行時，預留位置會以頁面內容取代。
點選或按一下說明以開啟結果中。點選或按一下結果面板會顯示所有詳細資料。

執行多個測試 running-multiple-tests

測試套裝會依其顯示在主控台中的順序執行。您可以深入檢視測試，以查看詳細結果。

chlimage_1-31

在「測試」面板上，點選或按一下 運行所有測試 按鈕或 執行測試 按鈕（位於要運行的測試套裝標題下）。
若要檢視每個測試案例的結果，請點選或按一下測試案例的標題。在結果面板會顯示所有詳細資料。

建立和使用簡單測試套裝 creating-and-using-a-simple-test-suite

以下過程將逐步引導您使用 We.Retail內容，但您可以輕鬆修改測試，以使用不同的網頁。

如需建立自己測試套裝的完整詳細資訊，請參閱 Hobbes.js API檔案.

開啟CRXDE Lite。 (http://localhost:4502/crx/de)
以滑鼠右鍵按一下 /etc/clientlibs 資料夾，按一下 建立>建立資料夾. 類型 myTests 按一下確定.
以滑鼠右鍵按一下 /etc/clientlibs/myTests 資料夾，按一下 建立>建立節點. 使用下列屬性值，然後按一下確定:
- 名稱: 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
若要測試適用性表單，請將下列值新增至類別和相依性。例如：
類別: `granite.testing.hobbes.tests, granite.testing.hobbes.af.commons`
相依性: `granite.testing.hobbes.testrunner, granite.testing.hobbes.af`

按一下 全部儲存.
以滑鼠右鍵按一下 myFirstTest 節點，按一下 建立>建立檔案. 為檔案命名 js.txt 按一下確定.

在 js.txt ，請輸入以下文本：

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

按一下 全部儲存 然後關閉 js.txt 檔案。
以滑鼠右鍵按一下 myFirstTest 節點，按一下 建立>建立檔案. 為檔案命名 myTestSuite.js 按一下確定.

將下列程式碼複製到 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

2315f3f5-cb4a-4530-9999-30c8319c520e