# How to add screenshot on failures for allure reports for WebDriverIO using Typescript

\*\*How to add screenshot in allure reports on test failures \*\* Stack :

* WebDriverIO
    
* CucumberJS
    
* TypeScript
    

This works with parallel test runs too.

[WebdriverIO Allure Docs here](https://webdriver.io/docs/allure-reporter/#add-screenshots)

```plaintext
const allure = require('allure-commandline');
require('dotenv').config();

export const hooks = {
  afterStep: function (step, scenario, { error, duration, passed }, context) {
    if (error) {
      browser.saveScreenshot('results/allure-results/afterStepScreenshot.png');
    }
  },
  onComplete: async function () {
    const reportError = new Error('Could not generate Allure report');
    const generation = allure([
      'generate',
      'results/allure-results',
      '--clean',
      '--output',
      'results/allure-reports',
    ]);
    return new Promise<void>((resolve, reject) => {
      const generationTimeout = setTimeout(() => reject(reportError), 10000);

      generation.on('exit', function (exitCode) {
        clearTimeout(generationTimeout);

        if (exitCode !== 0) {
          return reject(reportError);
        }

        console.log('Allure report successfully generated');
        resolve();
      });
    });
  },
};
```