How to attach screenshot to protractor's HTML report?

Question

In my protractor project, i am trying to take an screenshot, and attach it to my html report. The process of taking screenshot is happening in an After hook, as below:

import {  Status,After, HookScenarioResult} from 'cucumber';
import {browser} from 'protractor';
import { async } from 'q';

After(async  (scenario:HookScenarioResult)=> {

    if(scenario.result.status===Status.FAILED){
        const screenshot = await browser.takeScreenshot();
        this.attach(screenshot,"image/png");
    }
});

But in the line this.attach(screenshot,"image/png");, it complains with:

TypeError: this.attach is not a function

What is the problem?

My config is:

   "cucumber": "^5.1.0",
    "cucumber-html-reporter": "^4.0.4",
    "protractor": "^5.4.2",
    "protractor-cucumber-framework": "^6.1.1",

Answer 1

The problem was solved, by changing the fat function to normal one. I still, do not understand why it affects my code, but is working well now, and i have screenshot on my html report.

After(async function(scenario) {
    if (scenario.result.status === Status.FAILED) {
        // screenShot is a base-64 encoded PNG
            const screenShot = await browser.takeScreenshot();
            this.attach(screenShot, "image/png");
    }
});