저는 AngularJS에 대한 배경 지식이 풍부하고 종단 간(e2e) 테스트를 작성하고 수정하는 데 많은 시간을 할애했습니다. AngularJS와 함께 제공되는 도구는 Protractor 입니다. 당시의 대안들보다 훨씬 낫긴 했지만 완벽과는 거리가 멀었습니다. 이제 Protractor being deprecated 으로 대안을 찾아야 했습니다. Cypress가 가장 흥미롭게 보였지만 유료 구독의 일부인 기능과 무료로 사용할 수 있는 기능이 무엇인지 잘 모르겠습니다. 이 기사에서는 지불하지 않고 사용할 수 있는 각도기의 주요 개선 사항을 안내합니다.

경고의 한마디

내가 각도기로 경험한 문제 중 얼마나 많은 문제가 실제로 테스트 도구 자체의 단점인지, 그리고 그것이 내 프로젝트의 설정 방식에 얼마나 영향을 미쳤는지 잘 모르겠습니다. 이제 각도기가 사라지고 조사하기에는 너무 늦었습니다.

즉각적인 테스트 실행

내 각도기 테스트는 실행 속도가 꽤 느렸습니다. 약 10~20초였습니다. 테스트 문제 해결을 위해 브라우저 창을 화면에 연결하여 무슨 일이 일어나고 있는지 확인하는 것을 좋아했습니다. 그러나 이 경우 탐색을 실행하는 테스트는 새 테스트가 시작될 때마다 다른 모든 창 위에 팝업되는 습관이 있었습니다. 간단히 말해서, 백그라운드에서 테스트를 실행할 수 없거나 변경 작업을 수행할 때 테스트를 시작할 수 없었습니다.

이 모든 것이 Cypress에서 많이 개선되었습니다. 테스트 실행 도구를 시작하면 항상 포그라운드 또는 백그라운드에서 원하는 위치에 있습니다. 테스트 코드를 변경하면 테스트가 자동으로 다시 시작됩니다. 그리고 다음 기능 때문에 테스트 실행을 완전히 놓쳤다고 해도 문제가 되지 않습니다.

테스트 실행 되감기

각도기에서 나는 종종 테스트를 다시 시작하여 무슨 일이 일어나고 있는지 다시 확인했습니다. 테스트 실행을 위해 10~20초로 다소 느린 프로세스였습니다. 종종 나는 다음과 같은 것을 넣었습니다.

browser.sleep(100_000)

따라서 오류가 발생하기 전에 애플리케이션 내부에 무엇이 있는지 더 잘 볼 수 있습니다.

Cypress의 테스트 실행 도구에는 되감기 기능이 있습니다. 테스트가 실행한 모든 작업을 보여주고 마우스를 가져가면 해당 시간에 애플리케이션이 어떻게 보이는지 확인할 수 있습니다. 문제 해결 속도를 크게 높이는 시각적 피드백을 제공합니다.

테스트 실행 비디오 녹화

되감기는 로컬 테스트 실행에 매우 적합합니다. CI 실행의 경우 노출하도록 CI를 설정할 수 있습니다cypress/videos. 해당 폴더에는 각 테스트에 대한 실행 동영상이 있습니다. 이것은 다시 CI의 e2e에서 무엇이 잘못되었을 수 있는지에 대한 많은 정보를 제공합니다.

보편성

Cypress의 또 다른 훌륭한 기능은 프레임워크에 국한되지 않는다는 것입니다. 하나의 도구를 배우고 작업하는 모든 JS 프로젝트를 테스트하는 데 사용할 수 있습니다. 그것은 각도기로 기술적으로 가능했지만 각도가 아닌 코드에서는 꽤 어색해졌습니다.

요약

요컨대, 각도기에서 Cypress로 이동하는 것은 큰 개선 사항이며 이미 이 마이그레이션을 시작하게 되어 기쁩니다. 결국, Angular 팀은 현재 사용 가능한 훨씬 더 나은 도구가 있기 때문에 도구를 중단하고 우리 모두가 대안을 찾도록 하는 좋은 결정을 내렸습니다.