Cypress Test해보기 (with Vanilla js)

앞에서 알아본 Cypress를 직접 실행해보면서 접근해보겠습니다.

Cypress 설치

공식 홈페이지에 나와있는 설치 요구사항으로는 아래와 같습니다.

Operating Systemp

• macOS 10.9 and above (64-bit only)
• Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
• Windows 7 and above (64-bit only)

Node.js

• npm 사용시 Node.js v12 혹은 v14, 그 이상을 사용하라고 합니다

저는 macOS에서 다음과 같은 버전을 사용하겠습니다.

설치

아래 두가지중 선택하셔서 터미널에 명령어를 입력하면 됩니다. Node 및 npm을 사용하지 않다면 여기를 참고하세요

npm install cypress --save-dev

yarn add cypress --dev

Cypress 실행

설치가 완료되면 터미널에 아래 명령어를 입력하세요. 잠시 후에, Cypress Test Runnder가 실행됩니다.

• npm 설치 시

$(npm bin)/cypress open

yarn 설치 시

yarn run cypress open

실행화면

• 프로젝트내에 cypress 폴더가 생기고 integration부분에 샘플 코드가 들어있으며, integration folder 안에 [file명].spec.js 파일 생성해야 합니다.

코드 작성

• 테스트는 아래와 같이 진행하였습니다.
  • passing test 작성
  • failing test 작성
  • real time으로 Cypress가 실행

1. 성공한 코드 작성

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

2. 실패 코드 작성

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})

3. real time으로 변경되는 Cypress

• 코드를 변경하면 cypress 내의 테스트 코드가 바뀐 것을 감지하여 바로 적용되는 것을 볼 수 있습니다.

 

여기서 describe, it, and expect이 무엇일까?

• 이러한 모든 기능은 Cypress 번들 도구에서 제공됩니다.
• describe 와 it 은 Mocha 문법입니다.
• expect는 Chai 의 문법입니다.

 

출처

https://docs.cypress.io/guides/getting-started/writing-your-first-test

https://docs.cypress.io/guides/getting-started/installing-cypress