Cypress 및 모든 제품군에 대한 단일 보고서 가져오기

내 글에서는 Cypress 테스트에 대한 mochawesome 보고서를 설정하는 방법을 설명했습니다. 그러나 나는 또한 그것의 끝에 문제를 언급했습니다. 모든 테스트 슈트에 대해 별도의 파일을 생성합니다. 이 게시물에서는 해당 문제를 해결하는 방법과 모든 테스트 결과를 포함하는 보고서 하나만 작성하는 방법을 설명합니다.

설치

이를 위해서는 새로운 npm 종속성이 필요합니다. 다음 CLI 명령을 실행하여 다운로드할 수 있는 mochawesome-merge 패키지입니다.

npm install mochawesome-merge --save-dev

이 명령은 여러 JSON 출력을 가져와 모두 포함하는 출력을 생성합니다. HTML 보고서를 원할 수도 있지만 먼저 JSON을 생성하여 HTML을 생성해야 합니다.

테스트 실행

먼저 테스트를 실행해 보겠습니다. mochawesome은 각 테스트 스위트에 대해 별도의 보고서를 생성하기 때문에 cypress에 대한 보고서 옵션에서 덮어쓰기를 비활성화해야 합니다. 또한 JSON 형식을 병합해야 하므로 JSON 형식만 활성화해야 합니다.

// cypress.json
{
 "reporter": "mochawesome",
 "reporterOptions": {
   "charts": true,
   "overwrite": false,
   "html": false,
   "json": true,
   "reportDir": "cypress/report/mochawesome-report"
  }
 }

위의 구성으로 모든 작업을 수행할 수 있습니다. 또한 reportDir 속성 때문에 보고서를 cypress/report/mochawesome-report 폴더에 저장합니다. 실행 후 mochawesome.json, mochawesome_001.json 및 기타 유사한 파일을 모든 테스트 스위트에 대해 하나씩 가져옵니다.

보고서 병합

이제 모든 제품군에 대한 보고서를 생성했으므로 단일 보고서로 병합할 수 있습니다. CLI에서 다음 명령을 실행하여 이를 수행할 수 있습니다.

mochawesome-merge cypress/report/mochawesome-report/*.json > cypress/report/output.json

mochawesome-merge 명령은 npm 패키지에 있으므로 npm 스크립트에 추가하거나 전역적으로 설치해야 합니다. 첫 번째 옵션을 권장합니다. 명령의 첫 번째 매개변수로 생성된 모든 보고서의 위치(이 경우 cypress/report/mochawesome-report/*.json)를 제공합니다. 두 번째는 저장할 위치입니다. 이 경우 cypress/report 폴더의 output.json 파일입니다. 입력 파일과 출력 파일은 같은 위치에 있으면 안 됩니다. 그렇지 않으면 생성 단계가 실패합니다.

HTML 생성

모든 결과가 포함된 JSON 보고서가 있으면 이를 HTML로 변환할 수 있습니다. 이 단계는 다른 CLI 명령을 실행하여 수행할 수 있습니다.

marge cypress/report/output.json --reportDir ./ --inline

Marge는 오타가 아닙니다. Mockawesome 보고서 생성기에서 오는 실제 명령입니다. 첫 번째 매개변수는 결과 JSON 파일입니다. 두 번째는 결과 파일을 기준으로 출력할 위치입니다. 마지막으로 추가한 매개변수는 인라인입니다. HTML 파일에 인라인으로 모든 자산, CSS 및 JS를 추가하는 것을 의미합니다. 그 이유는 자산에 대한 URL 값을 제어하는 ​​데 어려움을 겪었기 때문입니다. 인라인으로 추가하는 것이 훨씬 간단했습니다.

오래된 파일 처리 및 덮어쓰기

이 설정이 작동하려면 덮어쓰기 플래그를 false로 설정해야 합니다. 그러나 이것의 부작용은 다음에 실행할 때 이전 보고서 파일을 유지하고 그 옆에 새 보고서 파일을 생성한다는 것을 의미합니다. 그것은 우리가 원하는 것이 아닙니다. 각 실행 전에 이전 항목을 삭제하려고 합니다. 다른 옵션을 시도했지만 내가 찾은 가장 좋은 것은 사용자 정의 NodeJS 스크립트를 만들고 테스트 실행 전에 실행하는 것입니다. 다음 코드를 사용할 수 있습니다.

// deleteReports.js
 const fs = require("fs");
 fs.rmdirSync("./cypress/reports", {recursive: true});

npm 스크립트로 실행

일반적으로 package.json 스크립트 작업을 통해 이러한 모든 단계를 실행하려고 합니다. 각 단계에 대해 하나의 작업을 가질 수 있으며 순서대로 실행하는 별도의 작업을 수행할 수 있습니다. 이와 같이 작업 이름을 원하는 방식으로 지정하고 매번 모든 인수를 반복하지 않아도 됩니다.

마무리

모카멋진 제보를 추가할 때 주의할 점이 몇 가지 있습니다. 이와 같이 각 제품군에 대해 별도의 보고서를 생성하고 설정된 경우 이전 보고서를 덮어씁니다. 하지만 이 가이드를 통해 프로세스를 적절하게 설정하는 방법에 대한 충분한 정보를 얻으셨기를 바랍니다.
my Github Cypress setup repository 에서 이 설정에 대한 코드를 찾을 수 있습니다.


자세한 내용은 , , GitHub 또는 에서 나를 팔로우할 수 있습니다.