테스트 코드 자동으로 만들기 feat. Cypress Studio

Cypress Studio 로 E2E 테스트 코드를 손으로 짜지 않고 마우스·키보드 조작 기록만으로 만들어 내는 방법을 정리한 글이다. 특히 Node.js 나 npm 환경 설정 없이 Standalone 앱만으로 시작하는 경로를 잡아, 프로그래밍을 모르는 QA 도 로우코드로 테스트를 만들 수 있게 안내한다.

핵심 포인트

E2E 테스트 도입을 막는 두 가지는 비슷한 코드를 케이스 수만큼 반복 작성하는 시간과, 프로그래밍을 배워야 하는 러닝 커브다.
Cypress Studio 는 사용자 액션을 기록해 테스트 코드를 자동 생성하고, Assertion 도 마우스 우클릭으로 추가한다.
지원 액션은 click, type, check, uncheck, select 다. 도메인이 다른 여러 서비스를 오가는 테스트는 지원하지 않는다.
Standalone 앱을 내려받으면 npm·Node.js 설치 없이 빈 폴더 하나로 프로젝트를 시작할 수 있다.
생성한 테스트 코드는 Git 에 올리되, 개발 브랜치 전략과 동일하게 브랜치를 따서 관리하기를 권한다.

상세 정리

출발점: if(kakao)dev 2022 의 '웹 반응성 개선하기' 세션에서 소개된 크롬 개발자도구 Recorder 에서 영감을 받았다. Recorder 는 액션을 기록해 json 으로 저장하고 puppeteer 에서 재사용할 수 있다.
글의 범위를 먼저 자른다. E2E 테스트가 무엇인지, Cypress 가 무엇인지는 다른 글로 대체하고 Studio 활용에 집중한다.
설치: 맥 기준으로 Standalone 앱을 내려받아 압축을 풀고 더블클릭하면 런치패드(Launchpad)가 뜬다.
프로젝트 준비: 빈 폴더를 만들어 런치패드에서 선택하면 필요한 설정 파일이 자동 생성되고, 설치된 브라우저 목록에서 테스트할 브라우저를 고른다.
테스트 파일 생성: 테스트 케이스가 보통 카테고리로 구조화되므로 폴더와 파일 이름으로 구분되게 짓는다. 예로 홈 화면의 GNB 테스트를 `e2e/home/gnb.spec.js` 로 둔다.
설명 수정: 자동 생성된 테스트 설명은 의미 없는 문구라 런치패드에서 못 고치고 편집기로 열어 `'홈 화면'`, `'GNB에 "cypress.io"라는 문구가 나타난다.'` 처럼 직접 바꿔야 한다. 저장하면 테스트가 자동 재실행된다.
옵션 활성화: 런치패드의 Settings → Project settings 에서 Cypress 설정 파일을 열어 experimentalStudio 옵션을 켠다. 저장하면 테스트 브라우저가 닫혔다 새로 뜨고 Studio 가 활성화된 것을 확인할 수 있다.
기록 방법: 시나리오대로 화면을 조작하고, Assertion 은 원하는 위치에서 우클릭해 추가한다. 예로 GNB 왼쪽의 "cypress.io" 텍스트가 존재해야 한다는 단언을 넣는다.
저장: 오른쪽 위 Save 버튼을 누르면 spec 파일에 테스트 코드가 자동으로 삽입된다.
브랜치 전략: QA 대상 개발 브랜치가 있으면 테스트 코드도 그에 맞는 브랜치를 따고, 핫픽스로 main 이 배포되면 테스트 코드도 main 용으로 관리한다. 한 벌로만 관리하면 위험하다고 짚는다.
한계 인정: Studio 는 아직 실험적 기능이고 제약이 있지만, 반복 작성 비용과 러닝 커브를 동시에 없앤다는 점에서 획기적이라고 평가한다.