설명서AEM 6.4Developing 안내서

UI 테스트 testing-your-ui

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

작성 대상:

  • Developer
CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

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

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

NOTE
Hobbes.js 를 참조하십시오 설명서 를 참조하십시오.

테스트 구조 structure-of-tests

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

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

테스트 실행 executing-tests

테스트 세트 보기 viewing-test-suites

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

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

chlimage_1-26

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

chlimage_1-27

단일 테스트 세트 실행 running-a-single-test-suite

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

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

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

테스트 세트를 실행하려면

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

    chlimage_1-28

  2. 을 클릭하거나 탭합니다 테스트 실행 버튼을 클릭합니다.

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

    chlimage_1-29

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

    chlimage_1-30

여러 테스트 실행 running-multiple-tests

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

chlimage_1-31

  1. 테스트 패널에서 모든 테스트 실행 버튼 또는 테스트 실행 단추를 클릭합니다.

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

    chlimage_1-32

간단한 테스트 세트 만들기 및 사용 creating-and-using-a-simple-test-suite

다음 절차는 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 노드에 다음 속성을 추가합니다.

    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

  5. 클릭 모두 저장.

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

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

    code language-none 
    #base=.
myTestSuite.js

  8. 클릭 모두 저장 그런 다음 js.txt 파일.

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

  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
2315f3f5-cb4a-4530-9999-30c8319c520e