Sunday, April 13, 2014

Waiting for components in Siesta

“waitFor” is one of the most important methods for testing UI elements, since there are many occasions in which there can be race conditions in UI testing (which are machine-induced and not user induced). For example, if you click on a button which opens a window with a combo-box in it, and you want to click on that combo-box - you must wait until the window is rendered to the DOM in order to click on its combo-box.

How can you make sure that the window is there? That’s what “waitFor” does for you – it waits until the elements you want are visible (or not visible) and only then runs the code after it.

There are a few options to set waiting times in siesta. The simple and basic option is to set the “waitFor” attribute for a certain amount of time:

StartTest(function(t) {
                t.chain(
{ waitFor : 2000 },
functionX ()
                );
};

This will force the test to wait 2 seconds before executing the next function in the chain.

Another option is to start the test only after a certain attribute is rendered to the screen. If you can query this attribute with ComponentQuery, you can also set the “waitFor” method to wait until it appears:

StartTest(function(t) {
                t.chain(
{ waitFor : 'componentQuery', args :  "button[itemId=Foo]" },
functionY()
                );
};

This will force the test to wait until it finds the “Foo” button and only then the test will execute “functionY”.

·         You can also wait for “componentVisible”, which will wait until the element will be rendered to the screen and not only until it can query for it.

Third option is the opposite - to start the test after some attribute is no longer appears on screen. For example, if there’s a progress bar on the page and you want some tests to run after the progress bar disappears, you can use a different form of the “waitFor” method:

StartTest(function(t) {
                t.chain(
{ waitFor : 'componentQueryNotFound', args :  "progressBar" },
functionY()
                );
};


This will make the tests wait until the progress bar (which has an xtype of “progressBar” in ComponentQuery) disappears and only then execute “functionY”.