如何使用量角器在Cucumberjs中嵌入屏幕截圖？

Question

我試着用下面的code取screenshot並保存在本地。但是，我想將屏幕截圖嵌入到cucumber HTML report（這是由Jenkins使用json文件生成的）。

我應該在這裏添加代碼embedding這應該反映在我的json報告文件中以獲取該鏈接HTML報告？請建議。

我的代碼：

module.exports = function stepResultHooks() { 
var fs = require('fs'), dir = 'features/screenShots/'; 

this.StepResult(function (event, callBack) { 
    var stepResult = event.getPayloadItem('stepResult'), step = stepResult.getStep(); 

    if (stepResult.isFailed()) { 
     browser.takeScreenshot().then(function (png) { 
      browser.getCapabilities().then(function (capabilities) { 
       var browserName = capabilities.caps_.browserName; 
       var browserVersion = capabilities.caps_.version; 
       var stream, fname; 

       fname = 'Screenshot' + '_' + 'Failed Step' + '_' + step.getName() + '_' + browserName.toUpperCase()+'_'+browserVersion+'_' + new Date() + '.png'; 
       fname = fname.replace(/"|'|\//g, '').replace(/\s|:|>/g, '_'); 

       stream = fs.createWriteStream(dir + fname); 
       stream.write(new Buffer(png, 'base64')); 
       stream.end(); 
      }); 
     }).then(callBack); 
    } else callBack(); 
}); 

Answer 1

根據該文檔在https://github.com/cucumber/cucumber-js#attachments

您可以使用腳本對象將文本，圖像和文件到黃瓜報告：

有沒有辦法在stepResult鉤子期間附加屏幕截圖，只能在After鉤子中。

this.After(function(scenario, next) { 
    browser.takeScreenshot().then(function(png) { 
    var decodedImage = new Buffer(png, 'base64').toString('binary'); 
    scenario.attach(decodedImage, 'image/png', next); 
    }, function(err) { 
    next(err); 
    }); 
}); 

Answer 2

您只能附加在場景中的鉤後，但你可以採取的每一個步驟（在StepResult）的截圖，如果這就是你以後和存儲/陣列中的推動的結果。然後，您可以在每個方案末端將陣列內容作爲附件推送，並清除陣列以供下一個步驟使用。

根據每個步驟/頁面的內容，您還可以獲得動態截圖/瀏覽器高度。見下文。

在你有你的鉤子文件執行以下操作：

'use strict'; 

var eachStepScreensArr = []; 

module.exports = function() { 

    this.Before(() => { 

     //Reset Array with Step screenshots 
     eachStepScreensArr = []; 

    }); 

    this.After((scenario) => { 

     return browser.driver.manage().window().setSize(1280, 1000).then(function() { //reset size after each scenario 
      return browser.driver.manage().window().setPosition(0, 0).then(function() { //reset position after each scenario 
       //Attach any step screenshots to the scenario metadata 
       for (var key in eachStepScreensArr) { 
        scenario.attach(eachStepScreensArr[key], 'image/png'); 
       } 
      }); 
     }); 

     return Promise.resolve(); 
    }); 

    this.StepResult((stepResult) => { 
     var step = stepResult.getStep(); 

     if (step.getName() && stepResult.getStatus() !== 'skipped') { 

      return browser.executeScript('return {' + 
       'height: document.body.scrollHeight,' + 
       'width: document.body.scrollWidth' + 
       '}' 
      ).then(function(result) { 
       return browser.driver.manage().window().setSize(/*result.width*/1280, result.height + 50).then(function() { 
        return browser.takeScreenshot().then(function(png) { 
         eachStepScreensArr.push(new Buffer(png.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64')); 
        }); 
       }); 
      }); 

     } 

     return Promise.resolve(); 
    }); 
}; 

如果您使用的是黃瓜HTML記者，請確保它支持多種方式的嵌入（如「黃瓜HTML報告」），大多數其他人只顯示第一個。

如果你只採取的失敗的步驟的截圖，改線

stepResult.getStatus() !== 'skipped' 

到

stepResult.getStatus() == 'failed'