UI 테스트

AEM에서는 AEM UI에 대한 테스트를 자동화하는 프레임워크를 제공합니다. 프레임워크를 사용하면 웹 브라우저에서 직접 UI 테스트를 작성하고 실행할 수 있습니다. 프레임워크는 테스트 생성을 위한 Javascript API를 제공합니다.

AEM 테스트 프레임워크는 Javascript로 작성된 테스트 라이브러리인 Hobbes.js를 사용합니다. Hobbes.js 프레임워크는 개발 프로세스의 일부로 AEM을 테스트하기 위해 개발되었습니다. 이제 AEM 애플리케이션을 테스트하는 데 프레임워크를 공용 용도로 사용할 수 있습니다.

노트

API에 대한 자세한 내용은 Hobbes.js 설명서를 참조하십시오.

테스트 구조

AEM 내에서 자동화된 테스트를 사용할 때는 다음 용어를 이해하고 있어야 합니다.

작업 작업​은 링크나 단추를 클릭하는 것과 같은 웹 페이지의 특정 활동입니다.
테스트 사례 테스트 사례​는 하나 이상의 작업​으로 구성할 수 있는 특정 상황입니다.
테스트 세트 테스트 세트​는 특정 사용 사례를 함께 테스트하는 관련 테스트 사례 그룹입니다.

테스트 실행 중

테스트 세트 보기

테스트 콘솔을 열어 등록된 테스트 세트를 확인합니다. 테스트 패널에는 테스트 세트 및 해당 테스트 사례 목록이 포함되어 있습니다.

전역 탐색 -> 도구 > 작업 -> 테스트​를 통해 도구 콘솔로 이동합니다.

chlimage_1-26

콘솔을 열면 테스트 세트가 왼쪽과 함께 나열되며 이 모든 세트를 순차적으로 실행하는 옵션이 제공됩니다. 오른쪽에 체크된 배경과 함께 표시되는 공백은 테스트 실행 시 페이지 컨텐츠를 표시하기 위한 자리 표시자입니다.

chlimage_1-27

단일 테스트 세트 실행

테스트 세트는 개별적으로 실행할 수 있습니다. 테스트 세트를 실행하면 페이지가 테스트 사례 및 해당 작업이 실행되어 테스트가 완료된 후 결과가 나타납니다. 아이콘은 결과를 나타냅니다.

확인 표시 아이콘은 전달된 테스트를 나타냅니다.

X 아이콘은 실패한 테스트를 나타냅니다.

테스트 세트를 실행하려면

  1. 테스트 패널에서 실행할 테스트 사례 이름을 클릭하거나 탭하여 작업의 세부 사항을 확장합니다.

    chlimage_1-28

  2. 테스트 실행 단추를 클릭하거나 탭합니다.

  3. 테스트가 실행될 때 자리 표시자가 페이지 콘텐츠로 바뀝니다.

    chlimage_1-29

  4. 설명을 탭하거나 클릭하여 결과 패널을 열어 테스트 케이스 결과를 검토합니다. 결과 패널에서 테스트 케이스 이름을 탭하거나 클릭하면 모든 세부 사항이 표시됩니다.

    chlimage_1-30

여러 테스트 실행

테스트 세트는 콘솔에 표시되는 순서대로 실행됩니다. 테스트로 드릴다운하여 자세한 결과를 확인할 수 있습니다.

chlimage_1-31

  1. 테스트 패널에서 모든 테스트 실행 단추 또는 실행하려는 테스트 세트의 제목 아래에 있는 테스트 실행 단추를 탭하거나 클릭합니다.

  2. 각 테스트 케이스의 결과를 보려면 테스트 케이스의 제목을 탭하거나 클릭합니다. 결과 패널에서 테스트 이름을 탭하거나 클릭하면 모든 세부 사항이 표시됩니다.

    chlimage_1-32

단순 테스트 세트 만들기 및 사용

다음 절차는 We.Retail 컨텐츠를 사용하여 테스트 세트를 작성 및 실행하는 과정을 거치지만, 다른 웹 페이지를 사용하도록 테스트를 쉽게 수정할 수 있습니다.

고유한 테스트 세트 만들기에 대한 자세한 내용은 Hobbes.js API 설명서 를 참조하십시오.

  1. CRXDE Lite을 엽니다. (http://localhost:4502/crx/de)

  2. /etc/clientlibs 폴더를 마우스 오른쪽 단추로 클릭하고 만들기 > 폴더 만들기​를 클릭합니다. 이름에 myTests을 입력하고 확인​을 클릭합니다.

  3. /etc/clientlibs/myTests 폴더를 마우스 오른쪽 단추로 클릭하고 만들기 > 노드 만들기​를 클릭합니다. 다음 속성 값을 사용하고 확인​을 클릭하십시오.

    • 이름: myFirstTest
    • 유형: cq:ClientLibraryFolder
  4. myFirstTest 노드에 다음 속성을 추가합니다.

    이름 유형
    categories String[] granite.testing.hobbes.tests
    dependencies String[] granite.testing.hobbes.testrunner
    노트

    AEM Forms 전용

    적응형 양식을 테스트하려면 카테고리 및 종속성에 다음 값을 추가합니다. 예:

    카테고리: granite.testing.hobbes.tests, granite.testing.hobbes.af.commons

    종속성: granite.testing.hobbes.testrunner, granite.testing.hobbes.af

  5. 모두 저장​을 클릭합니다.

  6. myFirstTest 노드를 마우스 오른쪽 단추로 클릭하고 만들기 > 파일 만들기​를 클릭합니다. 파일 이름을 js.txt로 지정하고 확인​을 클릭합니다.

  7. js.txt 파일에 다음 텍스트를 입력합니다.

    #base=.
    myTestSuite.js
    
  8. 모두 저장​을 클릭한 다음 js.txt 파일을 닫습니다.

  9. myFirstTest 노드를 마우스 오른쪽 단추로 클릭하고 만들기 > 파일 만들기​를 클릭합니다. 파일 이름을 myTestSuite.js로 지정하고 확인​을 클릭합니다.

  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. 테스트 콘솔로 이동하여 테스트 세트를 시도합니다.

이 페이지에서는