Cypress

프로그램 소개

Cypress는 브라우저에서 실행되는 모든 웹 애플리케이션을 위해 빠르고, 간편하며, 안정적인 테스트를 제공하는 프레임워크입니다. 이 오픈소스 도구는 현대적인 웹 애플리케이션을 직접 브라우저 안에서 테스트할 수 있도록 설계되었습니다.

주요 기능

• 테스트를 기록하고, 자연어 프롬프트를 사용하여 테스트 코드를 생성하는 Cypress Studio를 제공합니다.

• 테스트 실행 중 발생한 실패를 직접 브라우저의 개발자 도구를 사용하여 디버깅할 수 있습니다.

• UI 커버리지와 접근성 검사 기능을 통해 테스트의 사각지대를 발견하고 문제를 해결할 수 있습니다.

다운로드·설치 방법

npm을 사용하여 프로젝트에 개발 의존성으로 설치합니다.

npm install cypress –save-dev

yarn add cypress –dev

pnpm add cypress –save-dev

기본 사용법/명령어

설치 후 ‘npx cypress open’ 명령을 실행하면 Cypress 앱이 열립니다. 여기서 테스트를 생성하고 실행할 수 있습니다. 테스트는 .spec.js 또는 .cy.js 파일로 작성하며, ‘describe’와 ‘it’ 블록으로 테스트 스위트와 개별 테스트 케이스를 구조화합니다.

이런 경우에 유용합니다

• 반복적인 수동 테스트를 자동화하여 개발 속도를 높이고 싶을 때
• 브라우저에서 실제 사용자처럼 동작하는 E2E(End-to-End) 테스트를 구현할 때
• 컴포넌트 수준에서 UI의 시각적 회귀 테스트를 수행할 때

지원 환경·시스템 요구사항

Node.js가 설치된 Windows, macOS, Linux 시스템을 지원합니다. Chrome, Firefox, Edge 브라우저에서 테스트를 실행할 수 있습니다.

최신 버전·업데이트

현재 최신 버전은 16.0.0입니다. 이 버전은 HTTP/2 지원을 통해 테스트 실행 속도를 크게 개선했습니다.

화면으로 보는 주요 기능

Heroes 페이지 테스트

Cypress Studio를 사용하여 'cy.heroes' 웹 애플리케이션의 캐릭터 카드 그리드를 탐색하고 스크립트를 생성하는 화면입니다.

테스트 실행 및 네트워크 모니터링

Cypress 테스트 스크립트가 실행되면서 브라우저의 실제 동작과 네트워크 요청을 실시간으로 모니터링하는 화면입니다.

접근성 검사 결과

테스트된 웹 페이지의 접근성 위반 사항을 규칙별로 분류하여 보여주는 검사 결과 화면입니다.

엔터프라이즈 테스트 보고서

테스트 결과 추세, 상태별 분포, 그리고 실행 통계를 시각화한 대시보드 화면입니다.