cypress란[docs 번역]

Architecture

대부분의 테스팅 툴은 브라우저 바깥에서 실행되고, 네트워크를 거쳐서 리모트 명령어를 실행한다.

Cypress는 application에서 돌아가는것처럼 실행된다.

 

Cypress뒤에는 노드서버 process 가 있다. Cypress 와  node process 는 끊임없이 통신하고, 싱크를맞춘다.

프론트와 백에 접근권한을 갖고있어 리얼타임으로 어플리케이션에 응답을 줄 수 있다.

또한 플라이에서 웹 트래픽을 읽고 바꾸면서 네트워크 레이어에서 운영될 수 있다.

이것은 브라우저 안과 밖에서 모든걸 수정할 수 있게 할 뿐만 아니라, 브라우저를 자동화하는 능력을 방해하는 코드까지 바꿀 수 있도록 한다.

Cypress는 궁극적으로 위에서 아래로 모든 자동화 프로세스를 조종한다. 이것은 브라우저의 안과 바깥에서 어떤 일이 벌어지는지 모두 알수 있도록 한다. 

왜냐하면 Cypress는 로컬에 설치가 되고 자동화 테스트를 위한 운영 시스템에 도달할 수있게 한다.

이는 스크린샷, 비디오 녹화, 파일시스템 운영, 네트워크 운영까지 가능하게 한다.

---

Native access

 

 

사이프레스는 어플리케이션 내부에서 운영하므로, 각 객체에 네이티브적인 접근이 가능하다.

window든, documnet든, Dom element든, 어플리케이션 인스턴스, 함수, 타이머, 서비스워커, 등등.

객체 serialization은 없고, 유선 프로트콜도 없다. 

---

New kind of testing​

이러한 비제약성 덕분에,

제약적인 상태를 만드는 비싸고 느린 테스트보다는 주어진 상황을 대신해 유닛테스트에서 할만한 인공적인 상태들을 만들 수 있다.

 

- 브라우저나 어플리케이션의 함수들을 stub하고 테스트케이스에 활용하기 적합하도록 만든다.

- 데이터 저장소들을 노출하고(Redux 처럼) 테스트코드로부터 직접적으로 프로그래밍적으로 어플리케이션의 상태를 바꿀 수 있다.

- 엣지 케이스(빈 화면 과 같은)를 서버가 빈 응답을 보내도록 하여 테스트할수잇다.

- 상태코드가 500이 되도록 수정하여 어플리케이션이 에러에 어떻게 응답하는지 테스트한다.

- DOM Element를 즉각 수정한다. ( 숨겨진 element를 나타나게 하는 것처럼.)

- 서드파트 플러그인을 프로그래밍 적으로 이용한다. 

- 복잡한 ui 위젯(멀티 셀렉트 , 자동완성, 드롭다운, 트리 뷰나 캘린더,와 같은)을 다루는 것 보다는, 그것들을  조종하도록 테스트 코드에 메소드를 호출할 수 있다.

- 테스팅을 할때 어플리케이션의 모든 코드가 실행되기 전 구글 에널리틱스를 로딩하지 않도록 할 수 있다.

- 어플리케이션이 다른 페이지로 가거나 unload되기 시작할때 동기적인 알림을 받을 수 있다.

- 앞으로갓다 뒤로갓다 하면서 시간을 조종할 수 있어 타이머나 설문조사(polls)가 자동적으로 일어나가 하여 테스팅하는동안 요구되는 시간을 기다릴 필요 없다.

- 이벤트 리스너를 추가하여 어플리케이션에 응답하세요. 웹소켓 메시지를 조종하여 서드파티 스크립트를 조건에 따라 로드하거나 어플리케이션에서 직접적으로 함수를 호출할 수 있습니다.

---

shortcuts

 

테스트를 하며 어플리케이션의 구역에 도달하기 힘들은가요? 액션이 만드는 사이드이펙트를 싫어하나요? 

반복적이고 느린 액션을 다시 시도하기 싫은가요? 대부분의 테스트 케이스에서 skip 할 수 있다.

 

Cypress는 브라우저 context가 cy.session()에 캐시되도록 한다. 

이는 유저로서 인증만 진행한다면, 각 테스트에서 저장된 세션을 복구할 수 있다.

이는 로그인 페이지를 방문할 필요 없고 유저네임과 패스워드를 치고 페이지가 로드되거나 리다이렉트를 하는것을 기다리는 것을 할 필요 없다는 것이다. 

cy.session()을 한번만 하면 가능하며 필요하다면 cy.origin()을 쓴다.

 

Cypress는 또한 shotcut을 찍고 프로그래밍적으로 로그인할수있는 능력을 준다. 

cy.request()와 같은 명령어로 http 요청을 직접적으로 보낼 수 있고, 여전히 이 요청들을 브라우저와 동기화 할 수 있다.

쿠키는 자동적으로 보내지고 다시 적용된다. CORS에 대해 걱정할 필요없이 완벽하게 우회된다. 

유저처럼 테스트할지, 느리게 skip 하고 반복적인 테스트를 할지 고르는것은 당신 몫이다.

---

Flake resistant

Cypress는 애플리케이션에서 일어나는것들에 대해서 동기적으로 알고있다. 

페이지가 로드되고 언로드 되는 시점들을 알고있다.

 Cypress는 element가 얼마나 빨리 애니메이팅 되는지도 알고 애니메이팅이 끝나는 시점까지 기다린다.

게다가 element 가 보이게 될때까지, 가능할때까지, 그리고 가려지지 않을때까지 자동적으로 기다린다.

페이지가 전환되기 시작할때 Cypress는 명령실행을 멈추고 페이지가 완전히 로드될때까지 기다린다.

Cypress에게 특정한 네트워크 요청이 끝날때까지 기다리라고 할수도 있다.

 

Cypress는 브라우저 안쪽에서 거의 모든 명령을 실행하기 때문에 네트워크 랙이 없다.

명령어들은 애플리케이션이 렌더링될수잇도록 충분히 빠르게 실행한다.

모든 자바스크립트 프레임워크를 다루기 위해서는 복잡한 UI를 다룰 수 있어야하므로 , 

Cypress에게 애플리케이션이 어떠한 상태가 되어야하는지 말하여 평가할수잇다.

 

Cypress는 자동적으로 애플리케이션이 이러한 상태에 도달할 수 있도록 기다릴 것이다.

우린 기다리고 재시도할필요가 없다.

Cypress가 자동적으로  element가 존재하도록 기다릴것이고 DOM으로부터 탈락된 element를 찾도록 하지 않을것이다

---

Debuggability

다양한 UI를 통해 실행 평가 네트워크 요청, spies, stubs, 페이지 로드, url 변화 명령을 보여준다.

Cypress는  snapshot을 통해 시간여행을 하여 명령어가 실행되었던 상태로 돌아갈 수 있다.

우리는 테스트가 돌아가는 동안 개발자 도구를 이용할 수 있고, 모든 콘솔 메시지를 볼수잇고 모든 네트워크 요청을 볼 수 있다.

element를 탐색할 수 있고 디버거 상태를 spce code나 어플리케이션코드에 사용할 수 있다.

적응한 모든 툴을 사용할 수 있다. 이는 개발과 테스트를 동시에 할 수 있도록 한다.

 

---

Trade offs

많은 새롭고 강력한 능력이 있지만, trade-off라는 것도 있다.