title: Attach screenshot to cucumber-html-reporter using cucumber-tsflow and protractor
body: <p>After every failed scenario, I would like to attach a screenshot to html report (generated by <a href="https://www.npmjs.com/package/cucumber-html-reporter" rel="nofollow noreferrer">cucumber-html-reporter</a>, using <a href="https://www.npmjs.com/package/cucumber-tsflow" rel="nofollow noreferrer">cucumber-tsflow</a> and <a href="https://www.protractortest.org/#/" rel="nofollow noreferrer">protractor</a>. Is that possible?</p>
  
  <p>As far as I understand, I don't have access to the <code>world</code> instance anymore when writing the steps using <a href="https://www.npmjs.com/package/cucumber-tsflow" rel="nofollow noreferrer">cucumber-tsflow</a>. Otherwise something like <code>this.attach(screenshot, 'image/png');</code> would have done the trick.</p>
  
  <p>After googling for a while, I saw some people attaching the screenshot to the scenario like <code>scenario.attach(screenshot);</code>. However, the scenario I get in <code>@after()</code>(hook) is an instance of <code>HookScenarioResult</code>. That interface does not have any method to attach a file to.</p>
  
  <p>I placed a simplified snippet code of the step.ts and conf.ts below. I tried to attach the screenshot in the <code>afterAllScenarios()</code> method with no succes. Hopefully someone can help me out with my problem.</p>
  
  <p><strong>samplestep-definition.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { binding, given, then, when, before, after } from 'cucumber-tsflow';
  import { browser } from 'protractor';
  import { expect } from 'chai';
  import { HookScenarioResult, Status } from 'cucumber';
  
  import HomePage from './page-objects/home-page';
  
  @binding()
  export class HomePageSteps {
      private homePage = new HomePage();
  
      @before()
      public beforeAllScenarios(): void {
          browser.manage().window().maximize();
      }
  
      @given(/the user is at the home page/)
      public async givenUserAtHomePage(): Promise&lt;void&gt; {
          await this.homePage.get();
          const actual = await browser.getCurrentUrl();
          const expected = 'https://qaclickacademy.github.io/protocommerce/';
          expect(actual).to.equal(expected);
      }
  
      @when(/the user enters (.*) in the name field/)
      public async userEntersNameField(input: string): Promise&lt;void&gt; {
          await this.homePage.typeNameAndTab(input);
      }
  
      @then(/the user should see error message (.*)/)
      public async useShouldSeeErrorMessage(message: string) {
          const errorMessage = await this.homePage.getErrorMessage();
          expect(errorMessage).to.equal(message);
      }
  
      @after()
      public async afterAllScenarios(scenario: HookScenarioResult): Promise&lt;void&gt; {
          if (scenario.result.status === Status.PASSED) {
              const screenshot = await browser.takeScreenshot();
              // No access to World instance so the code below won't work
              this.attach(screenshot, "image/png");
  
              // HookScenario has no attach method, so the code below won't work
              scenario.attach(screenshot);
          }
      }
  }
  </code></pre>
  
  <p><strong>cucumber-config.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Config } from 'protractor';
  import * as reporter from 'cucumber-html-reporter';
  
  // An example configuration file
  export let config: Config = {
    directConnect: true,
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    capabilities: {
      browserName: 'chrome'
    },
    specs: ['../features/sample.feature'],
  
    cucumberOpts: {
      format: 'json:./report/cucumber_report.json',
      tags: [
        '@smoketesting'
      ]
    },
  
    onComplete: () =&gt; {
      console.log('on complete called');
      var options = {
        theme: 'bootstrap',
        jsonFile: './report/cucumber_report.json',
        output: './report/cucumber_report.html',
        reportSuiteAsScenarios: true,
        scenarioTimestamp: true,
        launchReport: true,
        metadata: {
          "App Version": "0.3.2"
        }
      };
  
      reporter.generate(options);
    }
  };
  </code></pre>