20230103 TIL codeceptJS 인수테스트 디버깅하기

 

codeceptJS인수테스트는 headless방식으로 실행할 수도 있고, ui를 통해 실행해볼 수도 있다.

그런데 한 방식으로는(예를 들면 headless) 통과를 하고, 실제로도 잘 작동을 하는데

어떤 방식에서는(예를 들면 ui) 실패를 하는 경우가 있다.

 

물론 제대로 작동한다는 것은 알지만, 찝찝함이 남아있을 수 밖에 없다.

분명히 잘 작동을 하는데, headless모드에서 계속 실패를 하는 테스트가 있었다.

해결을 하고 싶었는데 어제는 방법을 못찾다가 오늘 해결 방법을 찾았다!

 

headless모드에서 실패를 하면

위와 같은 결과 코드가 생긴다.

 

artifacts에 있는 스크린샷을 보면 대략 어떤 스크린에서 문제가 발생한 것인지 디버깅을 할 수 있다.

그래서 output 폴더에 들어가보았는데, 이때까지 실패한 테스트에 대한 스크린샷이 너무 많이 있어서

도저히 원하는 파일에 접근을 할 수 없었다.

어제 그래서 output폴더를 삭제를 해두었었는데, 

이렇게 깔끔하게 확인을 할 수 있게 되었다.

그리고 cmd를 누른 채로 artifacts부분의 path를 호버하면 아래와 같이 클릭할 수 있게 되어있고, 클릭하면 이미지가 뜬다!

이를 통해 form을 submit하는 과정에서 너무 빠르게 테스트가 지나가버려서 테스트가 실패한 것을 알 수 있었다.

그래서 submit하는 부분 뒤에 I.wait(2); 를 추가해서 살짝 기다리게 했더니 테스트가 잘 통과했다.

그런데 submit할 때마다 기다려주는 게 테스트가 너무 빨리 넘어가서 실패하는 것을 막기 위해 좋을 것 같아서

I.wait(2)를 추가하다가 아예 submit이라는 커스텀 스텝 내부에서

I.wait(2)를 포함하게 하면 더 간결한 코드를 작성할 수 있을 것 같아서 수정을 하였다.

 

인수테스트를 디버깅할 때는 artifacts를 더 적극적으로 활용을 해보면 좋을 것 같다!

 

그리고 분명히 테스트를 작성했는데 테스트가 인식이되지 않고 있었는데,

이는 codecept.conf.js와 관련이 있다. test에 해당하는 것들을 './tests/**/*_test.js'로 인식하라고 설정파일에 작성을 해두었는데,

내가 테스트 파일 이름에 _test를 붙이지 않아서 테스트가 인식되지 않았던 것이다.

무언가 안되는 게 있으면 어떤 식으로 돌아가는 것인지 파악하고, 되는 것과 차이를 분석해보도록 하자.