Attach Screenshots on Test Failure — WebdriverIO

2 min readAug 1, 2020

Wouldn’t it be nice to know the exact state of the application you are testing whenever a test failed to help debug your tests?
Well, with WebdriverIO, you can easily take screenshots of the application on test failure and can attach it with your reporter.

Let’s take a look at how we can do that with Allure reporter -

Prerequisite

Need to have the Allure reporting setup already with your tests. You can watch this video to see how to do that.

Setup

You’ll need to edit the afterTest hook in the wdio.conf.js file

afterTest: function (
    test,
    context,
    { error, result, duration, passed, retries }
  ) {
    // take a screenshot anytime a test fails and throws an error
    if (error) {
      browser.takeScreenshot(); 
    }
  },

Now just run your tests normally and when a test will fail you’ll see an attachment in your Allure report 🙌 -