背景：

使用mocha生成报告时，没有截图，导致无法实时看到究竟是哪里出了错。所以想方设法想在报告里添加截图。

实施：

我这里使用的是mochawesome生成的报告。

一： [rootDir]/cypress.json文件中进行配置

report配置

"reporter": "mochawesome",

"reporterOptions": {

    "charts": true,

      "overwrite": false,

      "json": true,

      "embeddedScreenshots": true,

      "inlineAssets": true

},

1、overwrite表示生成的报告是否覆盖之前的，false为不覆盖，true为覆盖。设置为false后，生成的报告名mochawesome、mochawesome_001。

2、json表示生成json格式的报告内容

3、embeddedScreenshots，这个是关键，表示是否在报告中添加截图。

4、inlineAssets，这个也关键，表示是否在html中嵌入截图。

二： [rootDir]/support/index.js文件中进行配置

1、加载mochawesome/addContext方法

addContext

const addContext =require('mochawesome/addContext');

2、编写用例执行并且执行失败后的所需要的程序

Cypress.on('test:after:run', (test, runnable) => {

if (test.state ==='failed') {

// Build image path

        const screenshotFileName =`${runnable.parent.title} -- ${test.title}(failed).png`

        const linuxScreenshotsFolder =`${Cypress.config('screenshotsFolder')}`.split('/').slice(-2).join("/")

        const screenshotsFolder =`${Cypress.config('screenshotsFolder')}`.split('/').slice(-3).join("/")

if(navigator.userAgent.indexOf("Linux")>0){

        console.log("------------检测到当前操作系统为linux-jenkins,处理addContext.value------------")

        addContext({ test }, {

                title:'failScreenshots',

                value:`${Cypress.env("jobUrl")}` +"lastSuccessfulBuild/artifact/" + `${linuxScreenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}`

            })

}else{

    console.log("------------检测到当前操作系统为不为linux------------")

    addContext({ test }, {

        title: 'failScreenshots',

        value: `/${screenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}` })}

}

})

1、screenshotFileName为失败用例截图，runnable.parent.title为测试套件名称，test.title为用例名称。失败用例的名称是默认生成的，不用做任何处理

2、Cypress.config为cypress的系统变量，可通过打印数据得到所有的系统变量。screenshotsFolder可在 [root]/cypress.json中自由设置，我这里没有设置，使用的是默认地址

3、本地是在mac上运行的，所以截图地址就任意拼接了；但是我将整个工程集成到了jenkins，而且jenkins是多节点。所以我这里使用了${Cypress.env("jobUrl")}的方法来获取项目在jenkins中的工作路径，这个jobUrl需要在pipeline中使用env.CYPRESS_jobUrl = "${env.JOB_URL}"的方法来定义一个环境变量，Cypress在运行时，会读取系统中的环境变量并且会把CYPRESS_或者cypress_开头的环境变量加载到cypress.env中（加载进去后会自动将CYPRESS_或cypress_去掉。例如环境变量为 CYPRESS_jobUrl，加载到cypress.env后，就使用Cypress.env("jobUrl")读取变量值就行）。

（在pipeline中，我将失败用例全部进行了归档，所以才有了一个固定的路径，这个路径完全是通过各种打印各种测试拼接才得到的）

截图归档

4、addContext方法就是将截图加入报告中。

5、title为截图在报告中的名字、value为路径

截图在报告中

。。。。。。忽略中文为乱码的情况，这个是因为linux系统字体的原因，需要设置linux系统的字体才能解决这个问题。