단계별 가이드에 따라 Cypress에서 XML 및 HTML 보고서를 생성하는 방법

자동화 테스트로 작업할 때 일반적인 요구 사항은 XML 및 HMTL 보고서를 모두 생성해야 한다는 것입니다. Cypress에 관해서는 Mocha 멋진 기자에게 의존합니다. 이 기사에서는 Cypress 엔드투엔드 자동화 프레임워크에서 HTML 및 Junit XML 리포터를 생성하는 간단한 방법을 설명합니다.

인터넷을 뒤져보면 많은 기사가 있지만 초보자에게는 매우 복잡합니다. 약간의 복잡성이 있기 때문입니다.

이 자습서는 인터넷에서 일반적으로 검색되는 질문에 대한 답변도 제공합니다.

Cypress에서 XML 및 HTML 파일을 생성하는 방법은 무엇입니까?
cypress로 HTML 및 XML 파일을 구성하는 방법은 무엇입니까?
HTML 및 XML 파일을 Cypress와 통합하는 방법은 무엇입니까?
Cypress에서 mocha Junit 리포터를 사용하여 Junit XML 파일을 생성하고 병합하는 방법은 무엇입니까?
보고서를 Cypress 종단 간 자동화 프레임워크로 구성하는 방법은 무엇입니까?

이 문서에서는 Junit XML 파일을 단일 파일로 병합하는 방법에 대해서도 설명합니다.

시작하자.

스크린샷으로 XML 및 HTML 보고서 생성 및 Cypress에서 모든 XML 파일 병합

가정:

여기에서는 이미 작동 중인 cypress 프레임워크가 있고 Junit 및 HTML 보고서를 모두 cypress에 통합하려고 한다고 가정합니다.

1단계: 필수 npm 패키지 다운로드

몇 가지 npm 패키지를 다운로드해야 합니다. 아래 패키지를 다운로드하세요.

npm install cypress-mochawesome-reporter junit-report-merger mocha-junit-reporter cypress-multi-reporters mocha

cypress-multi-reporters : 이 패키지는 이 경우 Junit 리포터 및 HTML 리포터에서 여러 보고서를 구성하는 데 사용됩니다.
mocha-junit-reporter : Mocha Junit Reporter는 각 사양에 대해 Junit XML 파일을 생성합니다.
junit-report-merger: mocha Junit 리포터가 각 사양의 JUnit XML 파일을 생성하므로 마지막에 모두 병합하여 단일 XML 파일을 생성해야 합니다.
cypress-mochawesome-reporter : 이 패키지는 HTML 보고서를 생성하는 데 도움이 됩니다.

2단계: cypress.json 파일에서 보고자 구성

프로젝트 루트 폴더로 이동 > 열기cypress.json
아래 코드를 복사하여 붙여넣습니다.

"reporter": "cypress-multi-reporters",  
  "reporterOptions": {  
    "reporterEnabled": "cypress-mochawesome-reporter, mocha-junit-reporter",  
    "cypressMochawesomeReporterReporterOptions": {  
      "reportDir": "cypress/reports",  
      "charts": true,  
      "reportPageTitle": "My Test Suite",  
      "embeddedScreenshots": true,  
      "inlineAssets": true  
    },  
    "mochaJunitReporterReporterOptions": {  
      "mochaFile": "cypress/reports/junit/results-[hash].xml"  
    }  
  },  
  "video": false

스크린샷

3단계: plugin/index.js 파일 구성

프로젝트 루트 폴더에서 > cypress 폴더 열기 > plugin 폴더 열기 > index.js 파일 열기
아래 코드를 복사하여 붙여넣습니다.

//index.js inside plugin folder

const { beforeRunHook, afterRunHook } = require('cypress-mochawesome-reporter/lib');  
const exec = require('child_process').execSync;  
module.exports = (on) => {  
  on('before:run', async (details) => {  
    console.log('override before:run');  
    await beforeRunHook(details);  
    //If you are using other than Windows remove below two lines  
    await exec("IF EXIST cypress\\screenshots rmdir /Q /S cypress\\screenshots")  
    await exec("IF EXIST cypress\\reports rmdir /Q /S cypress\\reports")  
  });

on('after:run', async () => {  
    console.log('override after:run');  
    //if you are using other than Windows remove below line starts with await exec  
    await exec("npx jrm ./cypress/reports/junitreport.xml ./cypress/reports/junit/*.xml");  
    await afterRunHook();  
  });  
};

스크린샷:

4단계: support/index.js에 항목 추가

프로젝트 루트 폴더에서 > cypress 폴더로 이동 > support 폴더 열기 > index.js 파일 열기

아래 코드 스니펫을 index.js에 추가

//index.js inside support folder

import 'cypress-mochawesome-reporter/register';

5단계: 테스트 실행

npx cypress run 명령 중 하나를 사용하여 테스트를 실행하십시오.

또는 이미 package.json 스크립트 명령이 있는 경우 이를 사용하여 사양을 실행하십시오.

6단계: HTML 파일 보기

생성된 전체 HTML 파일은 아래 위치에 있습니다.
프로젝트 루트 폴더 > cypress > 보고서 > index.html



크롬이나 다른 브라우저에서 열면 볼 수 있습니다. 아래와 같습니다.

7단계: Junit XML 파일 보기

전체 자습서를 따르면 JUnit XML 파일은 단일 파일로 병합되며 병합된 Junit 파일은 이름이 junitreport.xml인 아래 위치에 있습니다.

프로젝트 루트 폴더 > cypress > 보고서 > junitreport.xml



Jenkins, Azure DevOps 또는 기타 도구를 CI/CD와 통합할 때 이 XML 파일을 사용할 수 있습니다.
당신이 이것을 즐겼기를 바랍니다…

커피를 사는 더 많은 기사를 쓰도록 지원



도움, 지원, 안내가 필요하면 저에게 연락하십시오.
|