Attach Screenshots on Test Failure — WebdriverIO

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 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 ? –

Check out this video to see a detailed explanation on how to attach screenshots on test failure:

To learn more about WebdriverIO, you can check out my free tutorial series here –

WebdriverIO – Tutorial Series for Beginners