Cypress 설치 및 환경 설정

다운로드 및 설치

맥OS 에서 npm 등을 이미 사용 중이라면 터미널에서 명령어 입력.

지금 설치 환경은 윈도우. npm, yarn 등 패키지 매니징 프로그램이 없기 때문에  설치 파일을 다운받았다. 

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

Installing Cypress | Cypress Documentation

설치를 완료했다면 실행하여 런치패드 진입까지 확인하기.

 

 

프로젝트 파일 설정

앞으로 사용할 워크스페이스를 만든다. (깃에 올려서 지속적으로 관리할 것)

빈 폴더를 하나 만들고 런치패드에서 해당 폴더를 선택한다. 

폴더를 선택하면 다음과 같은 화면이 나타나는데 여기서 E2E Testing 클릭.

Configureation files 화면에서 Continue 클릭 > 테스트할 브라우저를 선택 > Start E2E Testing in Chrome 

 

테스트 파일 Specs 만들기

위 화면에서 Create new spec 선택 > 테스트 파일의 이름을 입력하는데 보통 테스트 케이스는 구조화되어 있으므로

이 점을 고려하여 명명한다. 

라고 했는데 갑자기 Cypress  종료됐다. 뭐지.

다시 실행하니까 내가 설정한대로 잘 돼있었다. 완전 다행~

 

테스트 코드를 자동으로 만들기 위한 옵션 추가

화면 왼쪽에 Settings > Project settings > cypress.config.js 클릭

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
experimentalStudio : true,
  },
};

experimentalStudio : true 추가하면  아래와 같이 Studio 영역  Enabled로 변경됨.

experimentalStudio 옵션은 테스트 코드를 직접 작성하지 않고 브라우저에서 키보드와 마우스로 사용자 액션을 기록하고 Assertion을 정의합니다. 테스트 코드는 Cypress Studio가 대신 만든다.

https://docs.cypress.io/guides/references/cypress-studio

이제부터는 테스트 시나리오에 따라 사용자 액션을 기록하고 Assertion을 자유롭게 추가할 수 있다. 

Assertion은 화면에서 원하는 위치로 이동한 후에 마우스 오른쪽 클릭을 하면 추가할 수 있다. 

 

아니 .. 왜 안되는건지...? 

검색해도 방법을 모르겠어서 일단 보던 블로그는 접어두고...

마침 인프런에 cypress 강의가 있길래 결제 완..

이미 시작한 거 뭐라도 만들고 끝내보장... 

 

참고)

https://fe-developers.kakaoent.com/2022/221222-cypress-studio-test-automation-low-code/

테스트 코드 자동으로 만들기 feat. Cypress Studio | 카카오엔터테인먼트 FE 기술블로그

https://usage.tistory.com/126

Cypress로 E2E 테스트 시작하기

 

 

---

내가 보고 참고한 강의는 아래 자바스크립트 코드로 E2E 테스트 코드 구현하기

테스트용으로 계산기정도 만드는 것 같당 

목표 ~ 우선 계산기 만들어서 테스트코드 구현해보고 이후에 로그인 페이지까지 만들어서 적용해보기

https://www.inflearn.com/course/%EC%8B%B8%EC%9D%B4%ED%94%84%EB%A0%88%EC%8A%A4-%ED%85%8C%EC%8A%A4%ED%8A%B8

하루만에 Cypress로 작성하는 자바스크립트 E2E 테스트 코드 - 인프런 | 강의

 

시작~~

 

목차

1. Cypress 설치 및 실행

2. 카운터 및 계산기 테스트 코드 작성

3. 테스트에 대한 이해

 

실행 환경 mac ~^^

 

1. Cypress 설치 및 실행