[Cypress] Cypress Settings

프로그래밍은 세팅이 반이다.
코드를 치는 것보다 코드를 치기 위한 과정이 더 어려울 수 있습니다. 특히나 처음 개발을 접허가나 처음 접하는 스택에 대해서는 더욱 더 그럴 수 있습니다.
매번 세팅에 대한 내용을 공식문서에서 찾아서 적용할 수도 없으며, Cypress에 대한 한글 자료가 생각보다 많이 없기 때문에 이번 포스팅이 많은 개발자들에게 도움이 되길 바라며,,

✨ Initailizing

---

Cyperss는 JavaScript 언어를 기반으로 하고 있어 설치하기도 굉장히 편리합니다.
Cypress는 npm에서 사용할 수 있는 모듈 자체로 존재하기 때문에 프로젝트 폴더 내부에서 아래 명령어를 입력해주면 됩니다.
배포 이후에는 개발자들이 사용하는 툴이기 때문에 --save-dev 옵션을 추가하여 설치합니다.

$ npm install --save-dev cypress

자, 벌써 개발의 절반을 마쳤습니다.
이제 아래의 명령어를 통해 Cypress 테스트를 실행해볼 수 있습니다.

• npx cypress open 👉 Cypress GUI 실행하기
• npx cypress run 👉 Cypress Headless 실행하기

✨ Structure (over v.10.0.0.)

---

아무런 테스트 코드를 작성하지 않고 Cypress GUI를 실행하면, 예시 코드를 제공하는데요.
폴더 구조를 보면 다음과 같습니다.
❗️10.0.0 이후 version 기준입니다.❗️

+--cypress.config.ts
+--cypress
      +--e2e
      |   +-- test1.cy.ts
      |   +-- test2.cy.ts
      +--fixtures
      |   +-- data.json
      |   +-- image.png
      +--support
      |   +-- commands.ts
      |   +-- e2e.ts
      +--screenshots
      +--videos
      +--tsconfig.json 

• cypress.config.ts
  • Cypress 실행 환경을 관리하는 config 설정 파일입니다.
  • v.10.0.0 이후 기존의 plugins 폴더를 대체합니다.
• tsconfig.json
  • TypeScript 컴파일 옵션을 설정할 수 있는 파일입니다.
  • Cypress 공식 문서에 의하면 cypress 폴더 내부에서도 해당 파일을 추가하도록 권장하고 있습니다.

    // cypress/tsconfig.json
    {
      "compilerOptions": {
      "target": "es5",
      "lib": ["es5", "dom"],
      "types": ["cypress", "node"]
      },
      "include": ["**/*.ts"]
    }

• e2e
  • 실제 테스트 코드가 포함되어 있는 디렉토리입니다.
  • *.cy.ts 형식으로 파일을 관리하고 있습니다.
• fixtures
  • 테스트에 필요한 데이터 를 담고 있는 디렉토리입니다.
  • json, image, ts 등 데이터 파일을 저장합니다.
• support
  • commands 및 plugins 등을 전역 관리합니다.
  • 테스트 실행 전 최우선적으로 import 되는 부분입니다.
• screenshots / videos
  • 테스트 실행 결과가 담긴 스크린샷과 비디오 파일이 자동으로 생성되는 곳입니다.
  • GUI와 Headless 실행 이후 실패한 결과값만 확인할 수 있습니다.

✨ Configurations

---

Cypress를 실행하는 방법은 위에서 설명했듯이 두가지 방법이 있습니다.

• GUI
• Headless on CLI

package.json

개발팀 입맛에 맞게 혹은 더 효율적인 방법을 위해 package.json 파일의 scirpts를 추가하여 선택적으로 Cypress를 실행할 수 있습니다.

추가할 수 있는 옵션의 플래그는 다음과 같습니다:

• --config :: 테스트 실행 환경을 설정할 수 있습니다.
• --browser :: 테스트 브라우저 플랫폼을 설정할 수 있습니다.

// package.json
...
...
scripts: {
    "cy:open" : "cypress open--config baseUrl=https://my-service.com --broswer chrome ", // cypress app 실행
    "cy:test" : "cpyrees run --browser chrome" // cypress cli 실행
}

cypress.config.ts

마찬가지로 테스트 환경 설정을 할 수 있는 파일입니다.
package.json 파일과 동일한 경로에 위치하며, 테스트를 위한 환경변수, viewport 등 테스트에 필요한 환경 설정을 할 수 있습니다.

• e2e :: 테스트 간 필요한 plugin들을 관리할 수 있습니다.
• env :: 테스트 실행에 필요한 환경변수를 설정할 수 있습니다.
• experimentalWebKitSupport: webkit을 통해 safari 테스트 시 필요한 설정값입니다.
• baseUrl :: 테스트를 실행하는 url 주소의 기본값을 설정할 수 있습니다. package.json에 이미 명시가 되어 있다면 override되지 않고 package.json에서 설정한 url을 기본 값으로 인식합니다.

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // plugins or setNodeEvents
    },
    env: {
      // environmental variables for cypress test.
    },
	baseUrl: 'https://my-service.com'
  },
});

더 많은 설정 플래그와 옵션은 공식 문서를 참조하면 좋겠습니다.

References

---

Cypress 공식 홈페이지 :: 이동하기