Cypress - e2e 테스트 준비 (1)

이번 포스트부터는 Cypress e2e 테스트에 대해서 알아보도록 하겠습니다.

개발시에 테스트는 필수입니다. Front-end 개발시에 많은 테스트를 진행하게 되며, 그중 실제 사용자의 사용성과 관련된 테스트를 e2e 테스트라고 합니다. 즉, 사용자가 직접 사용한다는 가정하에 테스트를 진행하게 되며, 개발의 거의 마지막 단계로 가장 중요한 테스트입니다.

e2e 테스트를 위한 프레임워크

• cypress(https://www.cypress.io/)
• testcafe(https://devexpress.github.io/testcafe),
• nightwatch(https://nightwatchjs.org/)
  

이번 소개할 내용은 최근 e2e 프레임워크중에서 인기가 있는 Cypress e2e 테스트 프레임워크에 대한 내용입니다.

이번 편에는 Cypress 가 무엇이며 어떤것들을 처리하는지 그리고 다른 e2e 테스트 툴과 다른점에 대해서 간단하게 소개하겠습니다.

참고: 좀더 자세한 설명을 원하시면, Cypress 공식 홈페이지에서 확인하실 수 있습니다.

Cypress란?

Cypress는 최신 웹용으로 설계된 차세대 프론트엔드 테스트 도구입니다.
Cypress의 사용자는 일반적으로 최신 Javascript 프레임워크를 사용하여 웹 응용 프로그램을 개발하는 개발자 또는 QA 엔지니어입니다.

Cypress를 사용하면 모든 유형의 테스트를 작성할 수 있습니다.

• e2e 테스트
• 통합 테스트
• 단위 테스트
  
  

Cypress는 무료이며, Local에 설치하여 환경을 구성할 수 있습니다.

• 개발자의 애플리케이션을 로컬에서 개발할때 매일 테스트를 설정하고 시작하는데 도움을 줍니다.
• 일련의 테스트를 작성하고 Cypress를 CI공급자와 통합한 후 Cypress의 Dashboard를 통해 테스트 실행 및 기록할 수 있습니다.
  
  

Cypress가 처리하는 일?

Cypress가 다른 e2e 툴과 다른점은?

1. 아키텍쳐

Selenium (이하 셀레니움)과 같은 대부분의 e2e 테스트 도구는 브라우저 외부에서 실행하고 네트워크에서 원격 명령을 실행하여 작동합니다. Cypress는 정반대로 애플리케이션과 동일한 실행 루푸에서 실행됩니다.

Cypress 뒤에는 Node 서버 프로세스가 있습니다. Cypress와 Node 프로세스는 서로를 대신하여 지속적으로 통신하고, 동기화하며 작업을 수행합니다. 두 부분에 모두 액세스하면 응용 프로그램의 이벤트에 실시간으로 응답하는 동시에 더 높은 권한이 필요한 작업을 위해 브라우저 외부에서 작업할 수 있습니다.

Cypress는 웹 트래픽을 즉시 일고 변경하여 네트워크 계층에서 작동합니다. 이를 통해 Cypress는 브라우저로 들어오고 나가는 모든 것을 수정할 수 있을뿐만 아니라, 브라우저 자동화 기능을 방해할 수 있는 코드를 변경할 수 있습니다.

Cypress는 궁극적으로 전체 자동화 프로세스를 위에서 아래로 제어하므로 브라우저 내부 및 외부에서 발생하는 모든 것을 이해할 수 있는 고유한 위치에 배치되어 일관된 결과를 제공할 수 있습니다. Cypress는 로컬에서 설치되므로 자동화 작업을 위해 운영 체제를 추가로 활용할 수 있습니다. 따라서 스크린 샷 찍기, 비디오 녹화, 일반 파일 시스템 작업 및 네트워크 작업과 같은 작업을 수행할 수 있습니다.

2. 기본 액세스

Cypress는 애플리케이션 내에서 작동하는 모든 단일 객체에 고유하게 액세스 할 수 있습니다.

• window
• document
• DOM 요소
• 응용 프로그램 인스턴스
• 함수
• 타이머
• Service Worker
• 기타 등 Cypress는 객체 직렬화, 무선 프로토콜이 없으며, 모든 것에 액세스 할 수 있습니다. 테스트 코드는 응용 프로그램 코드와 동일한 모든 개체에 액세스 할 수 있습니다.
  
  
  
  

3. 새로운 종류의 테스트

응용 프로그램, 네트워크 트래픽 및 모든 호스트 개체에 대한 기본 액세스를 궁극적으로 제어하면 이전에는 불가능했던 새로운 테스틀 방법을 이용할 수 있습니다.

Cypress는 애플리케이션을 잠그지 않고 쉽게 제어할 수 없는 대신에 애플리케이션 작동 방식을 변경할 수 있습니다. 기존 주어진 상황에 필요한 상태를 만드는 것과 같이 느리고 비용이 많이 드는 테스트 대신, 단위 테스트에서와 같이 인위적으로 이러한 상태를 만들 수 있습니다. 예를들어 다음을 수행할 수 있습니다.

1. 브라우저 또는 응용 프로그램 기능을 Stub 하고 테스트 사례에서 필요에 따라 작동하도록 합니다.
2. 테스트 코드에서 직접 응용 프로그램의 상태를 프로그래밍 방식으로 변경할 수 있도록 데이터 저장소를 노출할 수 있습니다.
3. 서버가 빈 응답을 보내도록하여 ‘비어있는 뷰’ 와 같은 최첨단 사례를 테스트할 수 있습니다.
4. 테스트에서 필요한 시간 동안 기다릴 필요가 없습니다.
   • 타이머 또는 폴링이 자동으로 실행되도록 응답상태 코드를 500으로 수정하여 애플리케이션 서버의 오류에 응답하는 방식을 테스트할 수 있습니다.
5. 자신의 이벤트 리스너를 추가하여 애플리케이션에 응답 할 수 있습니다.
   • Cypress는 테스트 도중에 애플리케이션 코드가 다르게 작동하도록 할 수 있습니다.
   • Cypress 내에서 WebSocket 메시지를 제어하고 조건부로 타사 스크립트를 로드하거나, 응용 프로그램에서 직접 함수를 호출 할 수 있습니다.
     
     
     
     

4.레이크 방지

Cypress는 애플리케이션에서 발생하는 모든 사항을 동기적으로 알고 이해합니다.

• 페이지가 Load 되는 순간과 페이지가 Unload 되는 순간을 알립니다. Cypress가 이벤트를 발생시킬 때 요소를 놓치는 것은 불가능합니다.
• Cypress는 요소의 애니메이션 속도를 알고 있으며, 특정 네트워크 요청에 대한 에니메이션이 끝나기를 기다릴 수 있습니다.
  
  

Cypress는 브라우저 내에서 대부분의 명령을 실행하므로 네트워크 지연이 없습니다.

• 명령은 렌더링 할 수 있는한 빨리 응용 프로그램을 실행하고 구동합니다.
• 복잡한 UI가 있는 최신 Javascript 프레임 워크를 처리하기 위해, 어설션을 사용하여 Cypress에 원하는 애플리케이션 상태를 알려줍니다.
• Cypress는 계속 진행하기 전에 애플리케이션이 이 상태에 도달할 때까지 자동으로 기다립니다.
• 수동 대기 또는 재시도를 통해 소란을 완전히 차단할 수 있습니다.
• Cypress는 자동으로 요소가 존재하기를 기다리며 DOM에서 분리된 오래된 요소를 생성하지 않습니다.
  
  
  
  

5. 디버깅 가능성

무엇보다도 Cypress는 유용성을 위해 만들어졌습니다.

• Cypress가 테스트에 실패한 정확한 이유를 설명하는 수백개의 사용자 지정 오류 메시지가 있습니다.
• 명령 실행, 어설션, 네트워크 요청, 스파이, 스텁, 페이지로드 또는 URL 변경을 시작적으로 보여주는 풍부한 UI가 있습니다.
• Cypress는 애플리케이션의 스냅샷을 작성하여 명령 실행 당신의 상태로 시간 여행을 할 수 있습니다.
• 테스트가 실행되는 동안 개발자 도구를 사용할 수 있습니다.
  • 모든 콘솔 메시지와 모든 네트워크 요청을 볼수 있습니다.
  • 스펙 코드 또는 애플리케이션 코드에서 디버거 명령문을 사용할 수 있습니다.
  • 사용자는 이미 익순한 모든 도구를 사용할 수 있습니다.
    
    
    
    

Cypress.io
참고: 좀더 자세한 설명을 원하시면, Cypress 공식 홈페이지에서 확인하실 수 있습니다.