20221217 TIL E2E테스트를 코드로 작성하기 까다로운 부분을 어떻게 작성하면 좋을까?

 

https://microsoft.github.io/code-with-engineering-playbook/automated-testing/e2e-testing/images/e2e-testing.png

요즘은 포트폴리오 기획의 거의 마지막 단계라고 할 수 있는 인수 테스트를 작성하고 있다.

그런데 인수테스트는 결국 codeceptJS로 작성하게 될 예정이기 때문에,

어떻게 작성할지 난감한 부분들이 간혹 있었다.

 

예를 들면 외부 API를 활용하는 부분 (결제 창이 튀어나오거나, 핸드폰 인증 창이 튀어나오거나 등)이나

요소의 position을 비교해야 하는 정렬하는 기능 등이 codeceptJS로 작성하기 애매한 부분이었다.

cypress등의 다른 E2E 테스팅 툴을 사용하면 .getBoundingClientRect() 등의 메서드를 이용해서 요소의 위치를 파악할 수 있다.

하지만 그래픽이 두드러진 어플리케이션은 아니기 때문에 정렬 외에는 codeceptJS로 대부분 표현할 수 있고,

codeceptJS를 이용하면 개발자가 아닌 사람도 쉽게 인수테스트를 읽을 수 있다는 큰 장점이 있기 때문에 

포트폴리오에서는 codeceptJS를 활용해보려고 결정을 하였다.

 

따라서 아직 어떻게 테스트를 작성해야할지 모르겠다면 todo로 남겨두고,

방법을 찾으면 그 때 테스트를 작성하면 좋을 것 같다는 조언을 홀맨님께 받았다.

 

그리고 외부 API에 대한 부분은 팝업창이 새로 나오는 경우가 종종 있기 때문에 어떤 방식으로 테스트하면 좋을지 고민이 되었는데,

이 부분은 백도어 API를 이용하면 된다는 좋은 방법을 얻을 수 있었다.

예를 들면 결제가 성공했을 때, 라는 상황에 해당하는 결과값을 DB에 넣어주는 백도어 API를 이용해서

외부 API를 이용하지 않았지만 이용한 것처럼 결과를 넣어서 확인해주면 된다.

 

인수 테스트 시나리오 작성을 하면서 사람이 테스트한다면 크게 문제되지 않지만

코드로 어떻게 녹여낼지 막막하던 부분이 많이 해소되었다.

그리고 자동화된 테스트를 돌리더라도 배포를 하기 전에 언젠가는 사람이 직접 모든 것을 테스트해보아야 하기 때문에,

테스트를 작성하기 어려운 부분 때문에 구현이 늦어지는 상황은 막아야 한다는 유용한 조언도 얻을 수 있었다.

가능한 많은 시나리오를 코드로 녹여내려고 노력을하되, 더 우선순위가 높은 부분이 있다는 것을 잊지 말고, 

테스트 코드가 정말 중요한 부분을 체크 해주도록 하면서도 구현에 조금 더 집중을 해서 작업을 해야겠다.