Added support for ‘After’ steps with an embedded screenshot

Author: Marc Rooding

index.js

@@ -22,7 +22,8 @@ function gulpProtractorCucumberHtmlReport(opts) {
     headerTemplate: path.join(currentDir, './templates/header_template.html'),
     reportTemplate: path.join(currentDir, './templates/report_template.html'),
     scenarioTemplate: path.join(currentDir, './templates/scenario_template.html'),
-    stepTemplate: path.join(currentDir, './templates/step_template.html')
+    stepTemplate: path.join(currentDir, './templates/step_template.html'),
+    screenshotTemplate: path.join(currentDir, './templates/screenshot_template.html')
   };
 
   return through.obj(function (file, enc, cb) {

lib/html_formatter.js

@@ -30,6 +30,17 @@ module.exports = (function () {
     });
   }
 
+  /**
+   * Checks if the step is an After step containing a screenshot
+   * @param step - object which contains step data
+   * @returns boolean
+   */
+  function isAfterStepWithScreenshot(step) {
+    return step.keyword.trim() === 'After'
+      && step.embeddings
+      && step.embeddings[0]
+      && step.embeddings[0].mime_type === 'image/png';
+  }
 
   /**
    * Return html code of step element based on step template
@@ -43,10 +54,26 @@ module.exports = (function () {
     return compiled({
       status: step.result ? step.result.status : '',
       errorDetails: step.result ? toHtmlEntities(step.result.error_message) : '',
+      screenshot: step.embeddings && step.embeddings[0] ? step.embeddings[0].data : '',
       name: step.keyword + step.name
     });
   }
 
+
+  /**
+   * Return html code of step element based on step template
+   * @param step - object which contains step data
+   * @returns string
+   */
+  function getAfterScreenshotStep(step) {
+    var template = fs.readFileSync(templates.screenshotTemplate),
+    compiled = lodashTemplate(template.toString());
+
+    return compiled({
+      screenshot: step.embeddings && step.embeddings[0] ? step.embeddings[0].data : ''
+    });
+  }
+
   /**
    * Return html code of scenario element based on scenario template
    * @param scenario - object which contains step data
@@ -148,14 +175,19 @@ module.exports = (function () {
             isPassed = true;
             for (var k = 0; k < testResults[i].elements[j].steps.length; k++) {
               step = testResults[i].elements[j].steps[k];
-              stepsHtml += getStep(step);
-              stepsNumber++;
-              stepsNumberInFeature++;
-              if (step.result.status !== statuses.PASSED) {
-                isPassed = false;
-              } else if (step.result.status === statuses.PASSED) {
-                passedSteps++;
-                passedStepsInFeature++;
+
+              if(isAfterStepWithScreenshot(step)) {
+                stepsHtml += getAfterScreenshotStep(step);
+              } else {
+                stepsHtml += getStep(step);
+                stepsNumber++;
+                stepsNumberInFeature++;
+                if (step.result.status !== statuses.PASSED) {
+                  isPassed = false;
+                } else if (step.result.status === statuses.PASSED) {
+                  passedSteps++;
+                  passedStepsInFeature++;
+                }
               }
             }
 

templates/screenshot_template.html

@@ -0,0 +1,5 @@
+<div class="step failed">
+    <% if (screenshot) { %>
+        <img src="data:image/png;base64,<%= screenshot %>" width="1050" />
+    <% } %>
+</div>