DEV Community

Cover image for Attach Screenshots on Test Failure - WebdriverIO
Dilpreet Johal
Dilpreet Johal

Posted on • Updated on • Originally published at sdetunicorns.com

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(); 
    }
  },
Enter fullscreen mode Exit fullscreen mode

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

Alt Text


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


To learn more about WebdriverIO, check out my free tutorial series here -

https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.


I hope this post helped you out, let me know in the comments below!

Happy testing! 😄

...

Follow sdetunicorns on Twitter
Subscribe to my YouTube channel


Enjoyed this read? Discover more insightful articles on software testing and development on my blog. 🌐

Top comments (1)

Collapse
 
jkalandarov profile image
Jasurbek Kalandarov

Did the same. But wdio did not take screenshot. I think my afterTest hook is not working anymore. Tried console logging from there. Not logging.