背景：
使用mocha生成報告時淋纲，沒有截圖，導致無法實時看到究竟是哪里出了錯院究。所以想方設法想在報告里添加截圖洽瞬。
實施：
我這里使用的是mochawesome生成的報告。
一： [rootDir]/cypress.json文件中進行配置
"reporter": "mochawesome",
"reporterOptions": {
????"charts": true,
? ????"overwrite": false,
? ????"json": true,
? ????"embeddedScreenshots": true,
? ????"inlineAssets": true
},
1业汰、overwrite表示生成的報告是否覆蓋之前的伙窃，false為不覆蓋，true為覆蓋样漆。設置為false后为障，生成的報告名mochawesome、mochawesome_001氛濒。
2产场、json表示生成json格式的報告內(nèi)容
3鹅髓、embeddedScreenshots舞竿，這個是關(guān)鍵，表示是否在報告中添加截圖窿冯。
4骗奖、inlineAssets，這個也關(guān)鍵，表示是否在html中嵌入截圖执桌。
二： [rootDir]/support/index.js文件中進行配置
1鄙皇、加載mochawesome/addContext方法
const addContext =require('mochawesome/addContext');
2、編寫用例執(zhí)行并且執(zhí)行失敗后的所需要的程序
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("------------檢測到當前操作系統(tǒng)為linux-jenkins,處理addContext.value------------")
????????addContext({ test }, {
????????????????title:'failScreenshots',
? ? ? ? ? ? ? ? value:`${Cypress.env("jobUrl")}` +"lastSuccessfulBuild/artifact/" + `${linuxScreenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}`
? ? ? ? ? ? })
}else{
????console.log("------------檢測到當前操作系統(tǒng)為不為linux------------")
????addContext({ test }, {
????????title: 'failScreenshots',
????????value: `/${screenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}` })}
}
})
1仰挣、screenshotFileName為失敗用例截圖伴逸，runnable.parent.title為測試套件名稱，test.title為用例名稱膘壶。失敗用例的名稱是默認生成的错蝴，不用做任何處理
2、Cypress.config為cypress的系統(tǒng)變量颓芭，可通過打印數(shù)據(jù)得到所有的系統(tǒng)變量顷锰。screenshotsFolder可在 [root]/cypress.json中自由設置，我這里沒有設置亡问，使用的是默認地址
3官紫、本地是在mac上運行的，所以截圖地址就任意拼接了州藕；但是我將整個工程集成到了jenkins束世，而且jenkins是多節(jié)點。所以我這里使用了${Cypress.env("jobUrl")}的方法來獲取項目在jenkins中的工作路徑床玻，這個jobUrl需要在pipeline中使用env.CYPRESS_jobUrl = "${env.JOB_URL}"的方法來定義一個環(huán)境變量良狈，Cypress在運行時，會讀取系統(tǒng)中的環(huán)境變量并且會把CYPRESS_或者cypress_開頭的環(huán)境變量加載到cypress.env中（加載進去后會自動將CYPRESS_或cypress_去掉笨枯。例如環(huán)境變量為 CYPRESS_jobUrl薪丁，加載到cypress.env后，就使用Cypress.env("jobUrl")讀取變量值就行）馅精。
（在pipeline中严嗜，我將失敗用例全部進行了歸檔，所以才有了一個固定的路徑洲敢，這個路徑完全是通過各種打印各種測試拼接才得到的）
4漫玄、addContext方法就是將截圖加入報告中。
5压彭、title為截圖在報告中的名字睦优、value為路徑
。壮不。汗盘。。询一。隐孽。忽略中文為亂碼的情況癌椿，這個是因為linux系統(tǒng)字體的原因，需要設置linux系統(tǒng)的字體才能解決這個問題菱阵。
