Cypress 테스트 결과 리포트 만들기, cypress-mochawesome-reporter 사용법

프론트엔드 프로젝트의 기능 테스트 결과를 한눈에 파악할 수 있는 시각적 리포트가 필요해졌다.
간단한 내용만 필요해서, npm i cypress-mochawesome-reporter 라이브러리를 사용해봤다.

---

1. 설치 및 설정 방법

1-1. 설치방법

npm i cypress-mochawesome-reporter

1-2. cypress.config.cjs 설정

• cypress.config.cjs 설정은 아래와 같이 진행해주면 된다.

module.exports = defineConfig({
  reporter: "cypress-mochawesome-reporter", // Cypress 테스트 결과를 보고하는 리포터 지정
  reporterOptions: {
    reportPageTitle: "기능 테스트 결과", // 보고서 페이지 제목
    embeddedScreenshots: true, // 스크린샷을 보고서에 내장
    inlineAssets: true, // 자산 파일(CSS, JS)을 보고서에 인라인으로 포함
    saveAllAttempts: false, // 모든 시도 결과를 저장할지 여부
    reportDir: "cypress/reports", // 보고서가 저장될 디렉토리
    overwrite: false, // 기존 보고서를 덮어쓸지 여부
    html: true, // HTML 보고서 생성 여부
    json: true, // JSON 보고서 생성 여부
  },
  video: false, // 테스트 실행 중 비디오 녹화 여부
  screenshotOnRunFailure: true, // 테스트 실패 시 스크린샷 찍기 여부
  screenshotsFolder: "cypress/screenshots", // 스크린샷이 저장될 폴더 경로
  e2e: {
    setupNodeEvents(on, config) { // Cypress 노드 이벤트 설정 함수
      require("cypress-mochawesome-reporter/plugin")(on); // mochawesome 리포터 플러그인 등록
    }
  },
  component: {
    devServer: { // 컴포넌트 테스트를 위한 개발 서버 설정
      framework: "react", // 사용할 프레임워크
      bundler: "vite", // 사용할 번들러
    },
  },
});

1-3. Package.json 설정

• "cypress:run": "cypress run" 추가

  "scripts": {
    "start": "vite --host 0.0.0.0 --port 3000",
    "build": "vite build",
    "preview": "vite preview --port 8080",
    "cypress": "npx cypress open",
    "cypress:run": "cypress run"
  },

2. 리포트 보기

이제 실행시켜서 리포트를 받으면 된다!

2-1. 테스트 시작

npm run cypress:run

2-2. 테스트 결과 및 리포트

그럼 이제 vscode 터미널에 결과가 나오고,
내가 지정한 reports/ 폴더 내에 indesx.html 로 리포트가 저장되어있는걸 볼 수 있다!

• vscode 결과
  
• index.html 결과
  

🚩 npm - cypress-mochawesome-reporter