목표
1.Github Action을 사용하여 Preview Deploy 생성.
2.생성한 Preview Deploy에 대해 E2테스트 작성 후 성공할 경우에만 Production Deploy에 병합.
Cypress 설치
공식 사이트에 설치방법이 소개되어있다.
설치법은 두가지다. npm으로 설치를 하거나 직접 zip파일을 다운받는 것. 나는 npm을 이용해 설치하였다.
명령어는 다들 예상하듯이 npm install cypress이다.
설치하면 디렉토리에 아래와 같은 파일들이 생성된다.
vercel + github action 및 배포 자동화
이 또한 vercel 공식문서를 참고했다.
preview deploy
production deploy
이렇게 github action으로 작성해주고, E2E test를 통과했을 때만 production branch에 merge나 rebase가 가능하게 해주어야 한다.
setting - Branches에 들어간다.
add Rules을 누른다. 나는 이미 만들어놓아서 아래에 Applies to 1 branch가 뜨는 상태다.
Branch name pattern에 내가 적용할 브랜치의 이름을 적어주면 된다.
rule들에 대한 설명은 매우 친절하게 써있어서 읽고 자신이 적용할 rule에 check하면 된다.
Require status checks to pass before merging은 merge할 branch의 상태를 체크하는 것이다.
검색창에 자신이 적용할 status check를 찾아서 넣어줘야 한다. 나는 cypress E2E test를 작성한 workflow를 넣을 것이다.
cypress E2E test를 github action에 등록
cypress-io/github-action@v5의 with안에 있는 것들은 option들이다.
browser: 내가 사용할 browser, default는 Electron이다.record: true일 경우 테스팅 장면이 녹화가 되어 cypress cloud에 등록이 된다. cypress에 등록하는 방법은 추후에 설명하겠다.
env는 cypress에서 사용할 환경 변수들 등록하는 것이다.CYPRESS_BASE_URL은 내가 테스팅할 preview deploy의 url을 넣어줬고. CYPRESS_RECORD_KEY는 테스팅 장면을 녹화해서 cloud에 저장하기 위한 키다.
아래는 내가 간단하게 작성한 cypress 테스팅 코드이다.
cypress cloud 사용법
cypress 공식 사이트에서 설명하는 대로 따라서 등록하면 된다. 이곳에서 cypress cloud와 내 github repo를 연결 하는 방법, record key를 등록하는 방법 등 모두 나와있다.
