평소와 다름없이 새로운 기술이나, 흥미로운 것들을 찾다가
테스트 자동화 프로그램 Cypress Studio에 대한 이야기가 적힌 글을 읽게 되었는데, 자동으로 사용자의 마우스, 키보드 등의 액션과 페이지의 동작을 기록하여 재생한다는 부분을 보고 글을 다 읽기도 전에 이건 우리 회사 프로그램에 적용시키면 좋을 것 같다는 생각이 들어서 테스트 삼아 집에서 간단하게 사용해 봤습니다.
(흥미로운 Cypress Studio 주제의 글은 바로 카카오 FE블로그 유동식 개발자님의 글이었습니다. 아래 링크 입니다!
설치 방법은 카카오블로그의 글과 제가 작성한 글에 모두 존재합니다!.)
테스트해보다가 자료를 찾아보는데 Cypress Studio와 관련된 국내 글이 별로 없는 것 같아서 올립니다!.
Cypress 공식문서 주소 : https://docs.cypress.io/guides/references/cypress-studio#Limitations
Cypress Studio | Cypress Documentation
Experimental Cypress Studio is an experimental feature and can be enabled by adding the experimentalStudio attribute to your Cypress configuration.
docs.cypress.io
Cypress Studio을 사용해보기
1. Cypress Studio 설치!
Cypress Studio를 설치하는 방법은 npm , yarn 등을 사용하는 방법이 있지만 저는 Cypress 에서 제공하는
CDN에서 파일을 다운받았습니다. 다른 여러가지 방법은 공식 문서를 참고해주세요!.
(귀찮은 분들을 위한 다운로드 링크 : https://download.cypress.io/desktop)
파일을 다운 받으셨다면 압축을 해제하시고
다운받은경로\cypress\Cypress\Cypress.exe 파일을 실행하시면
위와 같은 화면이 나타나는데, 이 화면을 Launchpad라고 한다고 합니다.
2. 테스트 설정 파일 생성하기
중앙에 Drag your project directory here or browse manually 문구 부분을 클릭하시고 미리 생성해두신 Cypress 파일을 저장하실 폴더나, 새롭게 폴더를 생성하여 저장폴더를 지정합니다.
폴더를 선택하시면 아래와 같은 화면이 나타나는데 우측에 E2E Testing 을 클릭해주세요.
클릭하게되면 아래 이미지로 이동하고
자동으로 설정 파일들을 생성해주는데, 일단은 기본 셋팅대로 Continue 를 눌러 생성해줍니다.
위와 같이 나타난다면 성공한 것이고 마지막으로 테스트를 진행할 브라우저를 선택하시고, Start E2E Testing IN ~
버튼을 클릭해주시면 됩니다.
3. Specs(테스트) 파일 생성하기
새로운 테스트 파일을 생성하기 위해서는 화면 우측에 Create new empty spec을 클릭하시고 나타나는 화면에서
원하시는 경로, 테스트 파일명을 작성하시고 Create spec 버튼을 클릭해주시면 파일이 만들어지고
Okay, run the spec 버튼을 클릭하시면 테스트를 곧바로 수행하는데 초기 셋팅된 테스트를 수행하기 때문에
https://example.cypress.io/ 사이트를 접속하는 테스트를 수행합니다
위의 제 화면에서는 네이버 Cypress 검색어 테스트 라는 문구가 출력되어지고 있는데, 이런식으로 테스트의 문구를
변경하고 싶으시다면 이전에 테스트(spec) 생성 시 만들어진 .cy.js 경로
(ex) D:\Cypress\cypress\e2e\NaverCypressSearch.cy.js) 의 파일을 VScode 혹은 여러 에디터 프로그램을 사용하여
오픈하셔서 아래처럼 describe 부분을 수정하시면 됩니다.
3. 사용자의 테스트를 기억해 자동으로 코드로 변환하고, 테스트 사용하기
사용자의 마우스클릭, 데이터 입력 등을 자동으로 테스트코드로 변환하기 위해서는 먼저 셋팅을 추가해 주어야합니다.
먼저 Cypress를 설치하신 파일에서 cypress.config.js파일을 직접 여시거나 런치패드 화면 좌측상단에 톱니모양을 눌러
셋팅 화면을 여시고 Project Setting을 누르시면 우측에 나오는 cypress.config.js을 클릭하여 editor를 선택하셔서 파일을
오픈합니다.
파일을 여시면 experimentalStudio: true 설정을 추가해줍니다.
자, 이제 기존 런치패드를 재시작했을때 상단에 자동화된 테스트 소프트웨어에 의해 제어되고있습니다. 가 뜬다면
정상작동 중인 것이고 우측에 Specs 에서 아까 만들었던 Spec에 들어가서 이전과 동일한 https://example.cypress.io/ 접속 화면이 뜨는지 확인합니다.
여기까지 성공하셨다면 이제 내가 테스트한 과정을 Spec 코드로 자동변환하기 과정을 시작해야합니다.
좌측에 생성했던 테스트의 문구 옆에 마우스 커서를 살짝 올려보시면 아래와 같은 Add New Test라는 문구가 뜨면서
클릭이 활성화되는데
여기서 클릭을 하면
위 이미지 처럼 검색창에 URL을 입력하라고 안내메시지가 출력되는데 이곳에 테스트하실 페이지의 URL을 입력하시면
해당 페이지가 우측에 뜨게됩니다. 저는 테스트 파일의 이름처럼 Cypress를 네이버에서 검색할 것이기 때문에
www.naver.com 을 입력하고 Continue 를 눌렀습니다.
그럼 해당 페이지로 이동하게되고, 좌측에는 계속해서 실행되는 기능들에 대한 정보나 테스트 코드가 쌓입니다.
페이지가 이동완료 되었다면 이제 테스트가 필요한 기능을 우측 페이지에서 수행해주세요.
저는 Cypress Studio를 검색하는 기능을 테스트할 것이기 때문에 이 검색되었을 때 좌측 하단에 Save Commands를
눌러서 지금까지 동작에 대한 TEST Code를 저장했습니다. Save Commands를 누르면 아래처럼 테스트 이름을
입력하고 저장을 하시면 됩니다.
이제 자동으로 해당 내역들이 저장되고, 런치패드에서 spec을 업데이트하면서 우측화면에 방금 전 테스트했던 방식
그대로 화면이 테스트되는 것을 확인 하실 수 있고, 좌측에 TEST BODY에서 어떤 식으로 테스트가 흘러가는지에 대해
적혀져 있는것을 확인하실 수 있습니다.
실제 테스트 코드는 저장된 .cy.js 파일을 오픈해서 보시면 아래 이미지 처럼 확인할 수 있습니다.
4. 페이지 로딩 제한시간 설정 (pageLoadTimeout)
여러 페이지를 연습삼아 테스트 하던 중 로딩이 오래걸리는 사이트를 visit(방문? 접속?)하는 것을 수행했을 때
로딩시간이 기본 연결시간 제한을 넘어서 테스트 실패가 발생하는 문제를 확인 하였습니다.
해당 문제를 해결하기 위해서는 로딩시간 제한을 풀어주는 설정을 해야하는데, 첫번째로 페이지에 접속하는
기능을 수행하는 코드인 cy.visit()의 2번째 인자로 timeout 값을 넣어주어 설정하는 방식이 있었는데
저는 여러가지 테스트가 수행될 때 동일한 설정을 해주고 싶어서 다른방법을 찾아보았습니다.
그래서 찾은 방법이 다른 바로 cypress.config.js파일을 수정하는 방법입니다.
cypress.config.js에서 위 이미지처럼 pageLoadTimeout 설정을 사용하여 원하는 페이지로드 최대시간을 지정할 수 있습니다.
5. 테스트 웹사이트 크기 조절(viewport)
마지막으로 회사에서 개발 중인 페이지를 테스트를 진행했는데 개발용으로 설정된 페이지의 크기가 1920*1080 였기 때문에 Cypress의 기본 크기와 달라 화면이 깨지는 부분을 발견했습니다.
이 부분을 해결하고자 테스트하는 페이지의 크기를 조절하는 설정을 찾아보았고, 4번 페이지 로드와 동일하게
cypress.config.js 에서 설정하면 된다는 것을 찾았습니다.
간단하게 위와같이 설정해주시면 화면의 높이, 넓이를 지정할 수 있습니다.
이미지와 함께 글을 쓰다보니 길어져버렸네요.
Cypress Studio 라는 것을 처음 써보는데 생각보다 테스트가 잘만들어 지는 것 같아서 계속해서
사용해보고, 실제 프로젝트에서도 살짝 적용해볼까 고민 중입니다.
아직은 조작하는 기술이 미숙해서 조금더 사용해보고 고민해봐야할 것 같네요.