Как вставить снимок экрана в Cucumberjs с помощью Protractor?

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 hook.

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'