End User Test - Cypress

[1] 목적

최종 배포와 동시에 어플리케이션의 주요 기능들이 문제없이 작동하는지 검증한다.

최종배포 : dev branch & main branch에 Merge될때를 의미한다.

개발이 완료된 Product의 디버깅을 자동화해서 불필요한 리소스를 줄인다.

[2] E2E 테스트란?

E2E(End-to-End) 테스트란 사용자 중심으로 처음부터 끝까지 어플리케이션 흐름을 테스트하는 소프트웨어 테스트 방법 중 하나입니다. E2E 테스트의 목적은 실제 사용자 시나리오를 시뮬레이션하고 어플리케이션 구성 요소의 통합 및 데이터 무결성을 검증하는 것 입니다.

[3] Cypress 모듈 설치

*Mocha 기반의 테스팅 모듈 ( Mocha - the fun, simple, flexible JavaScript test framework )

Mocha란?

모카(Mocha)는 JavaScript를 위한 테스트 프레임워크입니다. 테스트 도구를 작성하고 실행하고 보고하는 데 사용됩니다. 모카는 테스트 스위트(Test Suite)를 작성하고, 테스트 케이스(Test Case)를 구성하며, 테스트를 실행하고 결과를 보고하는 기능을 제공합니다.

모카는 다양한 테스트 스타일을 지원하며, BDD(행위 주도 개발)와 TDD(테스트 주도 개발) 스타일을 모두 지원합니다. BDD 스타일은 describe()와 it() 함수를 사용하여 테스트 스위트와 테스트 케이스를 작성하는 방식이며, TDD 스타일은 suite()와 test() 함수를 사용합니다.

모카는 Node.js 및 브라우저에서 실행할 수 있으며, 다양한 기능을 제공합니다. 예를 들어, 비동기 코드를 테스트하기 위한 콜백 함수(done)나 async/await을 지원하며, 테스트 커버리지를 측정하는 기능도 포함되어 있습니다. 또한, 다양한 리포트 형식으로 테스트 결과를 출력하거나, 테스트 스위트를 선택적으로 실행하는 등의 유연한 설정도 가능합니다.

모카는 자바스크립트 생태계에서 널리 사용되는 테스트 도구 중 하나로, 유연하고 강력한 기능을 제공하여 개발자들이 자바스크립트 애플리케이션의 테스트를 쉽게 작성하고 관리할 수 있도록 도와줍니다.

설치 및 작동 확인

1. 설치 : yarn add cypress

2. 실행 : yarn run cypress open/ yarn test-> package.json > scripts > "test" : "cypress open"추가

3. 작동확인

*참조 : Cypress로 애플리케이션에 접속하기 전에 먼저 애플리케이션을 실행해야 한다.

*eslint-plugin-cypress: cypress 테스트 파일 내에서 eslint를 적용하기 위한 패키지

*cypress-react-selector: cypress에서 get과 같은 메서드를 이용하지 않고 react component를 바로 불러올 수 있는 패키지

cypress/e2e 폴더에 js파일을 생성합니다.

cypress/e2e 폴더에 js파일을 cypress gui을 통해 확인할 수 있습니다.

cypress eslint 설정을 위해 cypress폴더에 .eslintrc 파일을 생성합니다. (아래 코드를 추가합니다.)

{
"plugins": ["prettier"],
"extends": ["plugin:cypress/recommended"]
}
최상단 디렉토리에 cypress.config.js파일을 생성합니다.

• config.js를 통해 cypress 환경설정을 할 수 있다.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  projectId: 'i2zopb',
  "compilerOptions": {
    "noEmit": true,
    "isolatedModules": false,
    "types": ["cypress"]
  },
  "include": ["./**/*.ts", "./**/*.tsx"],
  e2e: {
    "baseUrl": "https://localhost:3000",
    "videoRecording": false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

yarn을 통해서 cypress 추가 모듈을 설치합니다.

yarn add @cypress/code-coverage

참고 : Code Coverage | Cypress Documentation

describe('Main Test', () => {
  it('Click into main', () => {
    cy.visit('/'); //cypress.json에 설정한 baseurl경로로 이동
  })
})

yarn test

Cypress 사용방법 숙지하기

구성 방법

eslint 에러 수정

명령어

describe

이 부분은 거의 모든 테스트코드 라이브러리들은 다 유사한 것 같다. describe 에서 내가 어떠한 컴포넌트 혹은 페이지를 검사할지 대주제를 정하고 it에서 개개인의 테스트들을 실제로 구현한다.

beforeEach

매번 it를 실행하기 전, 어떠한 역할을 수행할지 미리 정할 수 있다. 예를들어 모킹이 필요한 경우, 여기서 어떤 요청을 intercept해서 가져올지, it를 실행하기 전에, 어떤 페이지를 방문할지, viewport는 어떤 비율로 볼지 등 설정 할 수 있다.

intercept

어떠한 요청을 주거나 받을지 미리 설정할 수 있는 방법이다. (매번 API를 요청하는 것은 비효율)

it

테스트 할 동작의 단위입니다. '이름을 입력하면 경고창에 이름이 표시되어야 한다' 처럼 구체적인 사용자의 동작을 정의해주고 테스트 해주시면 됩니다.

cy.get('')

컴포넌트를 선택 할 수 있다.

.should()

명령어로 방금 get()에서 가져온 컴포넌트가 어떠한 동작들을 해야하는지 선언 할 수 있다.

should('be.visible') 이라면 선택된 컴포넌트가 보여야된다는 것이며, should('have.text','word') 라면, word라는 단어를 꼭 포함해야 된다는 뜻이다. 만약 찾는것이 실행되고 있는 비디오라면, 이런것도 가능하다.

cy.wait()

ms단위로 cypress 의 테스트를 멈춰 둘 수 있다

cy.and()

앞선 명령어를 연계해서 사용할 수 있게 도와준다.

expect()

테스트가 어떻게 동작해야할지를 나타내는 부분입니다. .to.be 또는 .not.to.be 등의 메서드를 붙여 활용할 수 있습니다.

wait()

이는 응답을 stubbing 하는 것과 상관없이, cypress 내에서 요청과 응답을 기다리기 위해서 선언적으로 쓰인다.

ex) cy.wait('@requestReviewData')로 쓰여 있는데, 이 의미는 requestReviewData의 요청에 대한 응답이 오기 전까지 기다리는 것

cypress-react-selector

cy.waitForReact(): 리액트 컴포넌트가 로드되기 전까지 기다리는 메서드이다.

테그 속성값을 이용해서 선택

cy.get('input[name="name"]').type("뽀로로"); // name속성 값이 name인 input 태그에 "뽀로로"라고 입력한다.

cy.server() / cy.route() 더 이상 사용하지 않음

⚠️ cy.server()및 cy.route()Cypress 6.0.0에서 더 이상 사용되지 않습니다 . 향후 릴리스에서는 cy.server()및 에 대한 지원 cy.route()이 제거됩니다. cy.intercept()대신 사용을 고려하십시오 . 다음으로 마이그레이션 에 대한 가이드를 참조하세요 .cy.route()cy.intercept()

[4] 사전 세팅

네이밍 규칙

it 명령어

Snake_case로 작성한다.

ex) signin_complete

ex) signin_email_error

파일이름

기존 개발된 폴더/파일/컴퍼넌트 이름을 바탕으로한다.

단, {}.cy.js

ex) Signin.cy.js

폴더구조 및 네이밍

e2e/components

e2e/pages

테스트 페이지

로그인

회원가입

비밀번호 찾기

대시보드

네비바

헤드바

스태프 리스트

회사정보, 개인정보

전체 워크프로세스 구성

[5] 테스트 케이스 작성

테스트 기준

모바일 화면

웹

테스트 기준 사이즈

ViewPort Web :

Width : 1290

Heigh : 720

ViewPort Mobile :

width : 1000

heigh : 660

[6] 테스트 케이스 실행

Cypress는 요금 plan에 따라서 Test results 수량을 제한합니다.

무료: 500

유료 : 10,000 → 사용 예정

달에 10,000이 넘을경우 추가요금 발생 ($6 per 1,000*)

로컬환경에서 테스트를 실행 ( Test Result Count를 사용하지 않습니다.)

yarn test

package.json에 설정된 명령어를 통해 실행

Cypress Gui 툴로 테스트를 진행

yarn cypress run 실행

CLI환경에서 테스트를 진행

Test results 사용

CI/CD 과정 추가 후 사용합니다.

Cypress 연동을 위해서 사용합니다.(Jira, git)

dashboard record 명령어

npx cypress run --record --key {key값}
Test results 최적화 진행

Cypress Test Code에 변경사항이 없는 경우 Test를 Skip하도록 설정합니다.

describe 단위에서 skip 메서드를 이용해 중복 test를 최소화 합니다.

describe.skip("check test", () => {}
Cypress 테스트를 완료한 경우 중보 Test를 피하기 위함입니다.

cypress.config.js에 등록

e2e 안에 입력

//실행하고 싶은 test file 경로 입력
specPattern: ['./cypress/e2e/page/*.cy.js'],

[7] 테스트 케이스 적용

로그인

비밀번호찾기

스태프 리스트

회원가입

대시보드

회사정보

개인정보

[8] 이슈

1) 배포 주소값에 따라서 cy.get 값이 변경됩니다.
해결 : 조건문을 줘서 각 환경의 cy.get 값을 설정합니다.

[7] 이슈 자동 등록

이슈자동 등록은 진행하지 않습니다.

테스트를 진행하면서 이슈가 발생 했을때 JIRA에 자동으로 등록하는 방법 확인하기

Jira Integration | Cypress Documentation

[9] CI/CD 과정 추가

GitHub Actions | Cypress Documentation

Dev branch에 Merge

[6] -2 Test results 최적화를 진행합니다.

Main branch에 Merge

전체 Test Result를 합니다.

npx cypress run --record --key {key값}

[10] 참조

Cypress 공식문서 : Configuration | Cypress Documentation

여러 페이지 test : Real World Testing with Cypress

정리된 블로그

https://class101.dev/ko/blog/2020/06/24/han/

E2E 테스트 구축기 (used AWS Step Functions)

E2E테스트 with Cypress

Cypress E2E 테스트를 리액트에 시작하기

사용방법 : [E2E Test][Cypress] Cypress로 E2E 테스트해보기

사용방법 : Cypress로 e2e 테스트 진행하기

자연스럽게 스크린샷과 영상을 찍어서 로컬에 저장해두는데, 깃이 무거워지기 전에 ignore도 미리 해두자

사용방법 : Cypress로 E2E 테스트 시작하기

How to handle Click Events in Cypress | BrowserStack

버튼 설명

Cypress click Command

cypress & Jira 연동

Jira Integration | Cypress Documentation

선택자 우선 순위 및 styled-component 참조

How to add data-* attributes to your component library and benefit from them in your E2E tests

Cypress Elements 선택하기 (data-cy 사용과 제거)

cypress-react-selector

Cypress 환경구축 (React, Typescript)

example-cypress-react-selector-formik/form_spec.js at master · gregfenton/example-cypress-react-selector-formik

GitHub - abhinaba-ghosh/cypress-react-selector: cypress plugin to locate react elements by component, props and state