ZK Testing with Sahi"

From Documentation
Line 48: Line 48:
  
 
Then press the '''Configure''' hyperlink to make visible on the Dashboard all browsers installed on your computer.  Browsers’ path should match the browser location on your computer. When all browsers location match you can see a Sahi Dashboard like this. <br/>
 
Then press the '''Configure''' hyperlink to make visible on the Dashboard all browsers installed on your computer.  Browsers’ path should match the browser location on your computer. When all browsers location match you can see a Sahi Dashboard like this. <br/>
[[Image:Image3.png|center|800×429px‎]]
+
[[Image:Image3.png‎]]
 +
 
 +
==Install ZK sample project==
 +
To perform these tests it was created an essential ZK web application project. 
 +
The project structure is shown below:
 +
<span style="color:red">TODO set tree project</span>
 +
 
 +
And when you running this ZK web application the result is this:
 +
<br/><br/>
 +
[[Image:Image6.png‎]]
 +
 
 +
<br/>
 +
To do this follows these instructions:
 +
<ol>
 +
<li>Download [ExampleContacts1.0.war] <span style="color:red">TODO add download war</span> ZK web application sample project. </li>
 +
<li>Deploy this ZK web application in your web server or application server. </li>
 +
<li>Open a Browser instance from Sahi Dashboard. Go to the navigation bar, write
 +
[http://localhost:8080/ExampleContacts/ http://localhost:8080/ExampleContacts/] and press Enter. <br/>
 +
The above html page will appear otherwise do not forget to verify the right hostname and port in case you have a different server configuration. </li>
 +
</ol>
 +
<br/>
 +
==Create a Sahi scripts==
 +
So, now you have to create your first Sahi script. 
 +
To do this follows these instructions:
 +
<ol>
 +
<li>Download this simple script from here <span style="color:red">TODO add download script</span></li>
 +
<li>Copy this script in '''C:/workspace/sahi_pro/userdata/scripts''' directory</li>
 +
</ol>
 +
This sample script performs different operations:
 +
*Assertions check
 +
*Navigations,
 +
*Fill input fields
 +
*and execute some actions
 +
Enough to understand how Sahi works.
 +
 
 +
See '''demo.sah''' script
 +
<source  lang="java">
 +
 
 +
// Scripts testing ExmapleContacts web application
 +
//--------------------------------------------------------
 +
 
 +
_assertExists(_cell("Add"));      // check if exist 'Add' button
 +
_assertExists(_cell("Edit"));    // check if exist 'Edit' button
 +
_assertExists(_cell("Remove"));  // check if exist 'Remote' button
 +
_assertExists(_cell("Refresh"));  // check if exist 'Refresh' button
 +
 
 +
_setValue(_textbox(0,  _near(_span("Search:"))), ""); // Clear input filter
 +
 
 +
_click(_cell("Refresh"));  // Press 'Refresh' button
 +
 
 +
// Verify if exist "Camille Bauer" contact
 +
if (_exists(_div("Camille Bauer"))) {
 +
  _click(_click(_div("Camille Bauer"))); // select "Camille Bauer" row
 +
  _click(_cell("Edit")); // edit contact
 +
  _wait(2000);  // wait few seconds just to see the dialog box
 +
  _click(_cell("Cancel")); // press Cancel and exit from dialog box
 +
}
 +
 
 +
// Verify if exist "Benedict Ewing" contact
 +
if (_exists(_div("Benedict Ewing"))) {
 +
  _click(_div("Benedict Ewing"));      // select "Benedict Ewing" row
 +
  _click(_cell("Remove"));            // remove "Benedict Ewing" contact
 +
  _wait(2000);                        // wait few seconds just to see the dialog box
 +
  _click(_button("OK"));     // press OK to confirm
 +
}
 +
 
 +
_click(_image("add_contact.png")) // Press 'Add' button to open  'Add Contact' form
 +
 
 +
// fill input fields
 +
_setValue(_textbox(0,  _near(_span("Name (*)"))), "Benedict Ewing");
 +
_setValue(_textbox(0,  _near(_span("Address"))), "3393 Gravida. St.");
 +
_setValue(_textbox(0,  _near(_span("Country"))), "United Kingdom");
 +
_setValue(_textbox(0,  _near(_span("Phone"))), "+44 605 4296-9504");
 +
_setValue(_textbox(0,  _near(_span("Email"))), "ornare.sagittis@aliquetlobortis.net");
 +
 
 +
// Move cursor between input field (fix ZK constraints and IE problem)
 +
if (_isIE()) {
 +
  _focus(_textbox(0,  _near(_span("Name"))));
 +
  _focus(_textbox(0, _near(_span("Address"))));
 +
}
 +
_click(_cell("OK")); // press OK to confirm '"Benedict Ewing' as new contact
 +
 
 +
_setValue(_textbox(0,  _near(_span("Search:"))), "Benedict");  // Fill input filter with new contact's name
 +
_keyUp(_textbox(0,  _near(_span("Search:"))), [13,0]);        // Press enter to confirm
 +
 
 +
</source>
 +
 
 +
==Running test from Sahi controller==
 +
 
 +
Now we are ready to start the browser and to run the test.
 +
<ol>
 +
<li>From Sahi Dashboard launch IE browser or Firefox browser or Chrome browser</li>
 +
<li>Press the ALT key and Double Click on page to bring up the Sahi Controller</li>
 +
<li>Click on '''Playback''' tab in the Sahi Controller</li>
 +
<li>Fill out '''demo.sah''' in the '''File''' field</li>
 +
<li>Fill out '''http://localhost:8080/ExampleContacts/''' in the “Start URL” field</li>
 +
<li>Click '''Set''' button and wait until the page '''http://localhost:8080/ExampleContacts/''' is loaded or reloaded</li>
 +
<li>Click '''Play''' button to run the test</li>
 +
<li>Wait until all steps are performed. SUCCESS or FAILURE message will be displayed at the end of the steps.  <br/>
 +
Click on '''Log''' link at the bottom of Sahi Controller to see all test details in a HTML report page.</li>
 +
</ol>
 +
 
 +
Example<br/>
 +
[[Image:Image7.png‎]]
 +
<span style="color:red">TODO add image</span>
 +
 
 +
 
 +
==Running tests in sequence from batch file==
 +
 
 +
aaa
 +
 
 +
==Running tests in parallel from batch filer==
 +
 
 +
bbb
 +
 
 +
==Troubleshooting ID Generator==
 +
As I write in the '''Introduction''' chapter, Sahi cannot require creating a Custom ID Generator.  In your script you have to identify your element with '''_near''' and '''_in''' functions.  <br/>
 +
[[Image:Image10.png‎]]
 +
 
 +
This image shows the '''Edit Contact''' dialog box.  Suppose you have to fill the '''Country''' field with '''United Kingdom'''. To identify the input field and fill it you have different solutions. <br/><br/>
 +
'''Solution 1''' (<span style="color:red">WRONG</span>): Write
 +
<source  lang="java">
 +
_setValue(_textbox(X), "United Kingdom");
 +
</source>
 +
Where X is the ZK component's UUID. As we know, ZK by default generate random component's ID for preventing Cross-Site Request Forgery. Reason why this solution it’s not feasible.<br/><br/>
 +
'''Solution 2''' (<span style="color:green">RIGHT</span>): Write
 +
<source  lang="java">
 +
_setValue(_textbox(0,  _near(_span("Country"))), "United Kingdom");
 +
</source>
 +
Where the '''_near''' function identify the '''Country''' input field by the nearest DOM '''Country''' label.
 +
With this solution all problems related to the ZK ID are solved.
 +
 
 +
Using '''_near''' or '''_in''' functions is a simple and powerful solution when DOM elements are not uniquely identifiable by themselves.
 +
 
 +
 
 +
 
 +
=Summary=
 +
The Small Talk is created as a simple demonstration of Sahi and ZK. However, if you want to use Sahi in a more advanced way with more complex functions, you may consider to read very well this powerful documentation [http://sahi.co.in/w/file_download/5/SahiPro_V4_2_Documentation.pdf http://sahi.co.in/w/file_download/5/SahiPro_V4_2_Documentation.pdf]. <br/>Do not forget to read about the advanced way of automation tests via its Excel Framework and Ant scripts.
  
 
[[Category:Small Talk]]
 
[[Category:Small Talk]]

Revision as of 16:54, 4 October 2013

ZK_Testing_with_Sahi


ZK Testing with Sahi

Author
Enrico Tedeschini
Date
October 04, 2013
Version
ZK 6.5 (or latest)

Draft Mark

Introduction

This article describes how it’s easy to test your ZK web application with Sahi. Sahi offers a completely different solution from ZATS. ZATS is a powerful solution to test a pure web application functionality and incredible product for Automate Unit Tests without server and browser. If you have to test your ZK web application in a real environment with different browsers, different servers and different network traffic/latency you have to use a tool like Sahi. I tried different tools like Selenium, JMeter and others but all of them require a change of code. They require to create a Custom ID Generator as described in this article Perform stress test on ZK using JMeter-take Shopping Cart as an example.

All tests described here are performed with a Sahi Pro Version. But all of them work as well with Sahi Open Source Version. From my point of view Sahi is a powerful tool for regression, stress, reliable and performing tests for any ZK web applications. For example Sahi can help you in the troubleshooting process. When you see a problem you only have to, through Sahi Dashboard, recording all steps and playback them later. All of this without writing any code or having any particular skill. Sahi works on Windows and Linux platform as well. In this article is described how to test a ZK web application on Windows platform.

Environment

Microsoft Windows 7 platform with

  • Firefox Version 22.x
  • Chrome Version 29.x
  • Internet Explorer Version 8.x
  • Safari Version 5.1.x
  • JRE 6 or later

Steps

Download and Install Sahi

  1. Download Sahi Pro Trial Version. Go to http://sahi.co.in/sahi-pro/, press “Free Trial” button and fill the form to download a fully functional version of Sahi Pro V5.0.9, valid for 1 month. The license key and a download link will be emailed to you.

  2. Install Sahi Pro wherever you want. In this example Sahi Pro was installed on C:/workspace/sahi_pro directory. It is recommended to install Sahi in a folder without spaces in the path. You don’t need to change any other setting. Press always Next button until the end where you have to press, Done to complete the installation.
    Image1.png

  3. Copy the license.data file received by email on C:/workspace/sahi_pro/userdata/config directory


Configure Sahi

Start Sahi Dashboard by double click on the desktop shortcut.
Image2.png

Then press the Configure hyperlink to make visible on the Dashboard all browsers installed on your computer. Browsers’ path should match the browser location on your computer. When all browsers location match you can see a Sahi Dashboard like this.
Image3.png

Install ZK sample project

To perform these tests it was created an essential ZK web application project. The project structure is shown below: TODO set tree project

And when you running this ZK web application the result is this:

Image6.png


To do this follows these instructions:

  1. Download [ExampleContacts1.0.war] TODO add download war ZK web application sample project.
  2. Deploy this ZK web application in your web server or application server.
  3. Open a Browser instance from Sahi Dashboard. Go to the navigation bar, write http://localhost:8080/ExampleContacts/ and press Enter.
    The above html page will appear otherwise do not forget to verify the right hostname and port in case you have a different server configuration.


Create a Sahi scripts

So, now you have to create your first Sahi script. To do this follows these instructions:

  1. Download this simple script from here TODO add download script
  2. Copy this script in C:/workspace/sahi_pro/userdata/scripts directory

This sample script performs different operations:

  • Assertions check
  • Navigations,
  • Fill input fields
  • and execute some actions

Enough to understand how Sahi works.

See demo.sah script

// Scripts testing ExmapleContacts web application
//--------------------------------------------------------

_assertExists(_cell("Add"));      // check if exist 'Add' button
_assertExists(_cell("Edit"));     // check if exist 'Edit' button
_assertExists(_cell("Remove"));   // check if exist 'Remote' button
_assertExists(_cell("Refresh"));  // check if exist 'Refresh' button

_setValue(_textbox(0,  _near(_span("Search:"))), ""); // Clear input filter 

_click(_cell("Refresh"));  // Press 'Refresh' button 

// Verify if exist "Camille Bauer" contact
if (_exists(_div("Camille Bauer"))) {
  _click(_click(_div("Camille Bauer"))); // select "Camille Bauer" row
  _click(_cell("Edit")); 				 // edit contact 
  _wait(2000);  						 // wait few seconds just to see the dialog box
  _click(_cell("Cancel")); 				 // press Cancel and exit from dialog box
}

// Verify if exist "Benedict Ewing" contact
if (_exists(_div("Benedict Ewing"))) {
   _click(_div("Benedict Ewing"));      // select "Benedict Ewing" row
   _click(_cell("Remove"));             // remove "Benedict Ewing" contact
   _wait(2000);                         // wait few seconds just to see the dialog box
   _click(_button("OK"));			    // press OK to confirm
}

_click(_image("add_contact.png")) // Press 'Add' button to open  'Add Contact' form

// fill input fields 
_setValue(_textbox(0,  _near(_span("Name (*)"))), "Benedict Ewing");
_setValue(_textbox(0,  _near(_span("Address"))), "3393 Gravida. St.");
_setValue(_textbox(0,  _near(_span("Country"))), "United Kingdom");
_setValue(_textbox(0,  _near(_span("Phone"))), "+44 605 4296-9504");
_setValue(_textbox(0,  _near(_span("Email"))), "ornare.sagittis@aliquetlobortis.net");

// Move cursor between input field (fix ZK constraints and IE problem)
if (_isIE()) {
  _focus(_textbox(0,  _near(_span("Name"))));
  _focus(_textbox(0, _near(_span("Address"))));
}
_click(_cell("OK")); // press OK to confirm '"Benedict Ewing' as new contact

_setValue(_textbox(0,  _near(_span("Search:"))), "Benedict");  // Fill input filter with new contact's name
_keyUp(_textbox(0,  _near(_span("Search:"))), [13,0]);         // Press enter to confirm

Running test from Sahi controller

Now we are ready to start the browser and to run the test.

  1. From Sahi Dashboard launch IE browser or Firefox browser or Chrome browser
  2. Press the ALT key and Double Click on page to bring up the Sahi Controller
  3. Click on Playback tab in the Sahi Controller
  4. Fill out demo.sah in the File field
  5. Fill out http://localhost:8080/ExampleContacts/ in the “Start URL” field
  6. Click Set button and wait until the page http://localhost:8080/ExampleContacts/ is loaded or reloaded
  7. Click Play button to run the test
  8. Wait until all steps are performed. SUCCESS or FAILURE message will be displayed at the end of the steps.
    Click on Log link at the bottom of Sahi Controller to see all test details in a HTML report page.

Example
Image7.png TODO add image


Running tests in sequence from batch file

aaa

Running tests in parallel from batch filer

bbb

Troubleshooting ID Generator

As I write in the Introduction chapter, Sahi cannot require creating a Custom ID Generator. In your script you have to identify your element with _near and _in functions.
Image10.png

This image shows the Edit Contact dialog box. Suppose you have to fill the Country field with United Kingdom. To identify the input field and fill it you have different solutions.

Solution 1 (WRONG): Write

_setValue(_textbox(X), "United Kingdom");

Where X is the ZK component's UUID. As we know, ZK by default generate random component's ID for preventing Cross-Site Request Forgery. Reason why this solution it’s not feasible.

Solution 2 (RIGHT): Write

_setValue(_textbox(0,  _near(_span("Country"))), "United Kingdom");

Where the _near function identify the Country input field by the nearest DOM Country label. With this solution all problems related to the ZK ID are solved.

Using _near or _in functions is a simple and powerful solution when DOM elements are not uniquely identifiable by themselves.


Summary

The Small Talk is created as a simple demonstration of Sahi and ZK. However, if you want to use Sahi in a more advanced way with more complex functions, you may consider to read very well this powerful documentation http://sahi.co.in/w/file_download/5/SahiPro_V4_2_Documentation.pdf.
Do not forget to read about the advanced way of automation tests via its Excel Framework and Ant scripts.