Cypress 사용해보자 1편

 

 

✏️ 1. Cypress 사용을 고려하게 된 이유.

✏️ 2. Cypress 초보자는 설치부터 해보자.

✏️ 3. 설치 후 맛만 보자. 

 

 

 

 

1. Cypress 사용을 고려하게 된 이유. 

 

테스트 코드를 작성해본적은 거의 없다. TDD 관련 동영상을 보고 토이 프로젝트에서 Jest를 간단하게 사용해봤지만, 

실무에 어떻게 적용을 해야 할지 감이 잡히지 않았고, 그래서 자연스럽게 테스트 코드에서 관심이 멀어지게 되었다.

 

그러던 어느 날, 실무에 테스트 코드를 적용해야 하는 날이 왔고, 이제부터라도 익숙해지기 위해서 Cypress를 시작하려한다. Cypress를 동료가 추천해주기도 했고, 테스트를 하기 적합하다고 해서 Cypress를 선택했다.

 

 

 

 

2. Cypress 초보자는 설치부터 해보자. 

 

Cypress는 문서가 굉장히 잘되어있다. (물론 영어로 되어 있..) 

설치는 npm으로 install 할 수 있다.

 

cd /your/project/path

npm install cypress --save-dev

yarn add cypress --dev

 

yarn 이나 npm을 통해 설치를 먼저 진행한다.

설치후에 Cypress를 실행할 수 있는데,  문서에 있는 건 4개의 실행 방법이 있다.

 

 

$(npm bin)/cypress open

./node_modules/.bin/cypress open

npx cypress open

yarn run cypress open

 

실행을 하고 나면

 

이렇게 Cypress 창이 뜬다.

 

여기까지 완료하면 설치 & 실행은 성공! 

 

 

 

 

 

3. 설치 후 맛만 보자.

 

 

아! 그리고 실행을 조금 더 간단하게 하기 위해 sciprt를 추가할 수 있다.

 

// Package.json

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

// npm run cypress:open 

 

Cypress 폴더를 먼저 찾고, integration 폴더 안에 sample_spec.js 를 생성한 후, 간단한 테스트 코드를 작성해보자.

 

describe('My first Test', () => {
	it('expect true', () => {
		expect(true).to.equal(true);
	});
});

 

파일을 저장하면, Cypress에서 sample_spec.js 가 보이는데 파일을 클릭하면 테스트가 진행된다!

테스트가 정상적으로 통과하면 아래와 같은 화면을 볼 수 있다.

 

만약에 테스트가 실패한다면? 

 

붉은 화면을 만나볼 수 있다!

 

이렇게 간단한 테스트 코드를 작성해보았다.

 

Cypress를 좀 더 자세하게 사용하는 방법은...!

쓴이도 학습해야 하기 때문에 이후에 더 자세한 내용으로 2탄 포스팅을...!