Cypress는 웹 자동화 테스트 프레임워크이며 E2E테스트를 할수있다.
무엇보다 크로미윰 기반이라 브라우저 환경테스트는 Chrome, Edge, Firefox를 지원하고있다.
install
yarn add cypress --dev아래와 같이 cypress 폴더가 생성된다.
나 같은 경우는 vpn으로 인해 yarn add cypress –dev 가 실행되지 않아
직접 cypress데스크탑 앱을 다운받았다.
https://download.cypress.io/desktop/6.8.0
실행
cypress open
cypress/e2e 경로의 *cy.ts 형태의 파일들로 테스트 코드를 작성한다.
테스트 코드 문법은 jest, mocha 와 비슷한 형태로 많은 어려움은 없었다.
우선 login에 관련된 코드를 작성하여 테스트를 해보았다.
describe('login', () => {
it('passes', () => {
// 방문할 url주소
cy.visit(
'방문할 주소 A',
)
cy.url().should('include', 'A주소가 맞는지 확인)
// 로그인 id입력
cy.get('#username')
.type('아이디')
.should('have.value', '아이디')
// 로그인 pw입력
cy.get('#password')
.type('비밀번호')
.should('have.value', '비밀번호')
// 로그인 버튼 클릭 동작
cy.get('#btnSubmit')
.click()
.then(() => {
cy.url().should('include', '로그인후 라우팅되는 url이 맞는지 확인')
})
})
})우선 로그인이 유저 flow에 맞게 코드를 작성후 로그인 성공후, 로그인후 이동되는 url이 맞는지 확인하는 코드를 간략하게 만들었다.
문제발생
발생된 문제는 A라는 도메인에서 인증관련된 값을 cookies에 저장뒤 로그인 인증을 받고 B라는 도메인으로 접속이 되는 구조인데 아마도 E2E테스트를 할때마다 해당 쿠키값이 모두 초기화 되어지는걸로 보인다. 로그인인증 테스트를 하고 다른 e2e테스트 코드를 동작할때 B라는 도메인으로 접속하는 코드를 작성하면 cookies에 인증관련 값이 없어져서 로그인을 못하는 문제가 발생되었다.
이를 해결하는 방법을 찾아보지는 못하여 우선 로그인을 공통으로 사용할수 있게 변경을 하였다.
utils로 로그인 로직을 분리하여 여러곳에서 쓸수 있게 변경하였다.
우선은 모든 e2e테스트를 하기위해 login()함수를 불러와 B도메인으로 이동후 BDD를 실행할수있게 테스트 코드를 작성하였다.
결론
아직 많은 테스트 코드를 작성하지 못하였지만 프론트개발자로써 먼저 개발자수다타임에서 주도적으로 cypress의 도입을 주장하고 자료도 준비하게되었다.
이유는 일단 백엔드 api의 변화나 프론트에서 수정사항이 발생하여 의도치 않은 사이드 이펙트가 발생하는것을 놓치고 베타배포를 하는경우가 종종 있었다.
이런 부분들을 Q/A로 넘기게 되면 티켓이 발행되고 다시 수정을 이루는 번거로움이 발생되어 업무의 비효율성이 증가하는거 같았다.
그리하여 이런 Q/A테스트를 어느정도 배포전에 사전에 검증할수있는 BDD로 예방을 할 수 있을것 같았다.아직은 많은양의 테스트 코드를 작성하지 못하였지만 어느정도 규모가 커지고 smallTC에 관련된걸 e2e테스트로 대체한다면 업무의 비효율성을 줄일 수 있기를 기대하고 있다.