ใน Cypress นั้นจะ build in Mocha มาในตัวอยู่แล้ว ดังนั้น ถ้าหากเราต้องการที่จะออก Report เราสามารถเข้าไปดูได้ใน Mocha Report ได้เลย

วิธีการตั้งค่า

เราจะตั้งค่า report ในไฟล์ cypress.config.ts โดยเพิ่มโค๊ดลงไปแบบนี้

npm i -D mochawesome
หรือ
yarn add -D mochawesome

install mochawesome

import { defineConfig } from "cypress";
import path from "path";
import { NormalModuleReplacementPlugin } from "webpack";

export default defineConfig({
  reporter: 'mochawesome',

  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
  },
});

cypress.config.ts

หากต้องการ custom report ให้เพิ่ม options เข้าไป 

import { defineConfig } from "cypress";
import path from "path";
import { NormalModuleReplacementPlugin } from "webpack";

export default defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: "reports",
    reportFilename: "[status]-[name]",
    json: false,
    html: true,
    quiet: true,
  },
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
  },
});

cypress.config.ts

หากเราต้องการใช้งาน report engine ตัวอื่น ก็สามารถ เปลี่ยน reporter: '...' และ reporterOptions ได้เลยตามที่ต้องการ

และเราสามารถ merge ไฟล์ report ได้ ด้วยการใช้ mochawesome-merge สามารถเข้าไปดูเพิ่มเติมได้ที่ https://www.npmjs.com/package/mochawesome-merge

mocha-junit-reporter

หากต้องการ reports ที่อยู่ในรูปแบบ junit ให้ใช้ mocha-junit-reporter 

npm i -D mocha-junit-reporter

หรือ

yarn add -D mocha-junit-reporter

Install package

ปรับแก้ Config ใน cypress.config.ts 

import { defineConfig } from 'cypress'

export default defineConfig({
  reporter: 'mocha-junit-reporter',
  reporterOptions: {
    testsuitesTitle: true,
    suiteTitleSeparatedBy: '.',
    mochaFile: './reports/report-[hash].xml',
    useFullSuiteTitle: true
  },
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack'
    }
  }
})

cypress.config.ts

เท่านี้เราก็สามารถออก reports แบบ junit ได้แล้ว

Refences: