Saturday, January 25, 2014

Callback Method

If you’re a frequent siesta user, you are probably familiar with the “callback” parameter – you can find it in almost all common methods like “click”, “type”, “drag” etc.

Here is the official documentation:

·         callback : Function (optional)
A function to call after click.

In other words, the callback is a method to be called after the current operation is complete.

To better understand that let’s stop for a moment and explain how these common methods behave. When you call the “type” method in your test code some ‘magic’ happens: the browser will start the operation of typing as you requested and running the code that should run as a result of this. At the same time, your test code will continue to run and the next line in your code will be executed. This is best described as an asynchronous method because it is running “in the background” while your next line of code is already being executed.

Now suppose you want a click to be performed after a type operation. That means that you want the test to “wait” and execute the click only after the typing operation is complete. In order to do that you need to provide a function as a callback to the type operation, so when the typing operation is complete it will call this function which in our examples will perform the click.

Let’s take a look at some examples:

if you want to run click after type you can provide the “next” function as a callback in the type method:

t.chain(
       function (next) {
             t.type(typeField,'text to type',next);
       },
       function (next) {
             t.click(button, next);
       }
);      
                    
You can also call the “next” function yourself after a method that does not have a callback option, like the diag method:

t.chain(
          function (next) {
                  t.diag('Im going to click a button!');
                  next();
          },
          function (next) {
                  t.click(button, next);
          }
);
                          
if you want to write a function of your own which uses the callback option – for example, a function that clicks on a certain button, you can write this in your preload file (if you don’t know what a preload file is or why do you need it – go back to the previous posts):

function clickOnFooButton (t, callback) {
var fooBtn = Ext.ComponentQuery.query(‘button[itemId=Foo]’);
    t.chain(
function (next) {
                  t.click(fooBtn[0],next)
            },
            function (next) {
                  callback();
            }
    );
};

And on your test file you can simply call the “clickOnFooButton” function the same way as you would click on a button:

StartTest(function(t) {
     t.chain(
            function (next) {
                  clickOnFooButton (t,  next);
            },
            function (next) {
                   t.type(typeArea,‘hello’); 
            }
     );
};


This will make the test to click on the button which has the itemId of “Foo” and only after that, will type ‘hello’ to the typeArea. 

1 comment:

  1. Instead of:

    function (next) {
    t.click(button, next);
    }

    Simply do

    {click : button }

    A bit less to type and read :)

    ReplyDelete