quinta-feira, 20 de agosto de 2015

Taking a screenshot

I have presented to you in the last two posts how test your frontend with CasperJS and prevent it breaks. If you have not read, spend some time and do it.

In this article I will show you how to take a screenshot from your code with CasperJS.

Why I need a screenshot from my tests?

The answer for this question is simple, you are spending a lot of time writing bulletproof tests to run in any environment of your application. All tests are working properly until someone help you in development and don’t keep the same concern with you have about the tests, even a small change without update the tests can start a disaster to keep all working.

I recommend use screenshots in success page of your transaction or process and when an error is triggered this will help you to see if any html structure has changed or another error happen.

Let’s code.

This is the call from casper to take a screenshot:

The signature of the method is: String targetFilepath, [Object clipRect, Object imgOptions]. The first parameter is the result file name, the second is coordinates for the screenshot rectangle and the third image options like quality and format.

This is the screenshot working with the example test case:

That is, you can find this code on my github https://github.com/ferfabricio/casperjs-test-example