Cypress 기본

이번 프로젝트를 들어가면서 처음 써본 프레임워크입니다. 깃헙 액션과 함께 사용하고 있습니다. 기본적인 내용을 한 번 기억삼아서 적어봅니다.

Cypress는 웹 애플리케이션을 위한 인기 있는 엔드-투-엔드 테스팅 프레임워크입니다. 이 툴은 개발자와 QA 엔지니어들이 웹 애플리케이션의 프론트엔드 기능을 자동으로 테스트하는 데 사용됩니다. Cypress는 사용하기 쉽고, 실시간으로 테스트를 볼 수 있으며, 다양한 테스트 기능을 제공합니다.

Cypress의 주요 특징

1. 실시간 로딩: 테스트를 실행하는 동안 실시간으로 애플리케이션의 상태를 볼 수 있습니다.
2. 자동 대기: Cypress는 DOM 요소가 로딩되고, 애니메이션이 완료되고, 네트워크 요청이 끝날 때까지 자동으로 대기합니다.
3. 디버깅 용이: 실패한 테스트에 대해 자세한 오류 메시지와 스크린샷을 제공합니다.
4. 커맨드 체인: Cypress는 체이닝된 커맨드를 사용하여 테스트를 쉽게 작성할 수 있게 합니다.

cy.intercept() 메소드

cy.intercept()는 Cypress에서 네트워크 요청을 가로채고 제어하는 데 사용되는 메소드입니다. 이를 통해 테스트 중에 네트워크 응답을 조작하고, 애플리케이션의 다양한 조건에서의 동작을 테스트할 수 있습니다.

기본 사용법

1. 요청 가로채기:

   • 모든 유형의 HTTP 요청 (GET, POST, PUT, DELETE 등)을 가로챌 수 있습니다.
   • 특정 URL이나 패턴을 매칭하는 데 사용됩니다.
   • 예시: cy.intercept('GET', '/api/users').as('getUsers')

2. 응답 스텁 생성:

   • 가로챈 요청에 스텁 응답을 제공할 수 있습니다.
   • 이를 통해 백엔드에 실제로 접근하지 않고도 서버의 다양한 응답을 시뮬레이션할 수 있습니다.
   • 예시: cy.intercept('POST', '/api/users', { fixture: 'user.json' })

3. 요청 및 응답 검사:

   • cy.wait()를 사용하여 가로챈 요청을 기다린 다음, 요청의 세부 사항이나 응답을 검사할 수 있습니다.
   • 이는 API 테스트나 네트워크 행동을 검증하는 데 유용합니다.

Cypress와 cy.intercept() 메소드는 웹 애플리케이션 테스팅의 효율성과 정확성을 높여줍니다. 테스트 과정에서 애플리케이션의 네트워크 상호작용을 세밀하게 조절할 수 있어, 다양한 시나리오를 시뮬레이션하고 문제를 빠르게 파악할 수 있습니다.