Visual Regression Testing with Nightwatch.js & Applitools

Nightwatch.js is an automated testing framework for web applications and websites, written in Node.js. It is a complete browser testing solution which aims to simplify the process of setting up Continuous Integration and writing automated tests (source: http://nightwatchjs.org)

In case you are not familiar with Nightwatch.js, you can follow this simple guide on how to get started quickly: http://nightwatchjs.org/gettingstarted

You can find our Nightwatch tutorial here.

Test Results

In Applitools dashboard we can quickly spot the mismatch between our baseline and checkpoint. When we zoom in we can actually see that the word “vice” in the checkpoint is cropped compared to the baseline where the text appeared as it should be.

Conclusion

If you’re not using Visual Testing yet I encourage you to start today, functional testing is critical for your app however it does not replace a human looking at your page to check for scenarios you did not think of when running your scripts. And when considering adding visual testing to your test framework make sure you choose the right tool that can help you identify the issues quickly and reliably, don’t settle for simple bitmap comparison as it will not work in the test case above.