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

terça-feira, 18 de agosto de 2015

Bulletproof frontend tests

In the last article I have talked about how to start make a front end test with CasperJS, you can see the post here.

Now I will make some improvements in this test to make it bulletproof.

Let’s work.

The first step is wait for element be present before read any property or value, if the element is not presented a problem occurred in the page load and will break the test.

Analysing the code of the first test case it can be refactored to detect the element present before assert their values. I will create a new step in the test runner to perform this verification using the method assertExists. This method has the selector as parameter.



This code execution result will be:



Another approach is wait for some selector present in the page before start the assertions. To perform the same test case using this strategy I will use the casper method waitForSelector. The method accept four parameters: the element selector, then function, onTimeout function and timeout counter value.

All my assertions will be inside a waitForSelector then function block to avoid access to elements with no presence confirmed. In the example I choose one selector used in the assertions to wait for his presence.



This code execution result will be:



If the test fail the result will be like:



Executing all tests in the folder


I recommend you to isolate the assertions per functionality. In the example test case we have a minimalist scenario but when is increased your application more complex will be your test. Isolate the assertions from element present from the element values assertions is a good tip.

You can see this code working on my github https://github.com/ferfabricio/casperjs-test-example


segunda-feira, 17 de agosto de 2015

Testing your frontend with CasperJs

Any software delivery has a purpose to correct any bug or add a new functionality or behavior, if your purpose is delivery a bug to create new development demands is better you search a new job. A crucial point in a delivery is the validation step, there are many ways to validate if the new software deployed will not crash the system, the most used is the manual exploration.

Thinking your deliveries are manually tested you can use this steps:

  1. Run the delivery
  2. Try any flow with your user can imagine
  3. Turn off your phone and go home

I don’t believe in that, but if you can reproduce this steps without problem please let me know.

To avoid manual work in validation process you can automate some process.

I will use the CasperJS library to give some examples from how to automate test routines, I'm also assuming you have Node.js and CasperJS installed and working properly in your machine if you don’t have please look in these links how to install and configure: NodeJS, CasperJs.

Let’s walk in baby steps.

Formulating the first test case

In the first test case I need open my website and verify if the title and the primary header is correct, this test may have some criterial:

  1. Get http response code 200
  2. Title is equal to: Fernando Fabricio
  3. H1 tag is equal to: Fernando Fabricio

First step is create your test case:


CasperJS is not used for tests only, inside the casper object we have a test parameter with the instance of test executor.

You can see in action on the line 1 when we use the casper.test.begin method.

The method begin have 4 signatures, you can choose one:

  • begin(String description, Number planned, Function suite)
  • begin(String description, Function suite)
  • begin(String description, Number planned, Object config)
  • begin(String description, Object config)

In the example I use the first signature, the parameters are self described.

To run the casper tests you have to call the run() method, this method accept two parameters, the first is the onComplete function and the second is the timeout in seconds, this is the second step.


I call in the onComplete function the test.done() callback to end our test suite.

The third step is configure and start the navigation with the method start. The first parameter of this method is the URL and the second is the then() function, this function will have our assertions.


The fourth step is the assertions, the test case have three asserts to do, the http code 200, the content of title tag and the content of h1 tag.


To run the tests in the directory of the test file run this command: casperjs test yourtestfile.js

The result should be something like:


You can found this code working in my github: https://github.com/ferfabricio/casperjs-test-example, for the code from this post look at v1 tag.

In the next post this test will be refactored to improve some protections to timeout and element not present.