Difference between revisions of "Selenium"

Latest revision as of 19:24, 27 October 2015

 IN PROGRESS

Selenium and Zk Component

Selenium test script works by simulation of user action. To do so, it need to access each html component using either html id or xpath expression. For zk, we have extended that to support the use of zk jQuery selector as well.

The random uuid issue

The selenium test script that uses html id is problematic for zk since the html id for each zk component ( uuid in zk term ) is randomly generated and can change from one run to another. To address this issue, you have to use a custom id generator or write your test script without dependency on uuid. We have build a custom id generator to support writing of test script that uses zk selector. For the id generator and zk seletor based test script to work, we have to assigned an id ( zk component id, not html id ) to each zk component. There is one caveat with such approach though, Zk required the id of each component to be unique within an IdSpace ( IdSpace is defined by the nearest parent component that implement the IdSpace interface ). This is usually not an issue but could be problematic if you want to assigned a well known id to a shared component. To avoid the risk of causing "non-unique id within id space" exception at runtime, we added a second option. Instead of an id, you can assigned a special widget attribute, "instanceName" (AdempiereWebUI.WIDGET_INSTANCE_NAME) to a Zk component. The id generator and your Zk selector based test script can then make use of this when component id is not available.

iDempiere ID generator

To use the iDempiere Id generator, run iDempiere from Eclipse using the server.product.functionaltest launch profile. The iDempiere Id generator uses the IdSpace hierarchy to generate the _zk_locator attribute of a component. For e.g:

The _zk_locator attribute of the ok button at the login window is $loginPanel $Ok which is the id of the login window ( loginPanel ) + the id of the ok button ( Ok ).

Using zk selector

In your test script, you can access zk component using zk jQuery selector, i.e the value from the _zk_locator attribute. It is easy to find out manually the zk selector needed using the FireBug of Chrome's inspect element tool. Typically, you need to look for the html element with the css class that correspond to the zk component name that you want to access. For e.g, zk decimalbox will have the css class z-decimalbox, hbox will have z-hbox, etc.

For window, report and process, the assignment of id and widget attribute is addressed at the framework level. For custom form, you would have do the id assignment for each component to make it test ready.

Create Test Script

Using Selenium IDE and Export to JUnit 4
Write JUnit Test Case using Web Driver API
Write Junit Test Case using ZTL API
Write Fitnesse test case using fitlibrary.zk.ZkFixture

@@ Line 8: / Line 8: @@
 === The random uuid issue ===
-The selenium test script that uses html id is problematic for zk since the html id for each zk component ( uuid in zk term ) is randomly generated and can change from one run to another. To address this issue, you have to use a custom id generator or write your test script without dependency on uuid. We have build a custom id generator to support test script that uses uuid and also to aid writing test script that uses zk selector. For the id generator and zk seletor based test script to work, we have to assigned an id ( zk component id, not html id ) to each zk component. There is one caveat with such approach though, Zk required the id of each component to be unique within an idspace ( idspace is defined by the nearest parent component that implement the idspace interface ). This is usually not an issue but could be problematic if you want to assigned a well known id to a shared component. To avoid the risk of causing "non-unique id within id space" exception at runtime, we added a second option. Instead of an id, you can assigned a special widget attribute, "instanceName" (AdempiereWebUI.WIDGET_INSTANCE_NAME) to the component name. The id generator and your zk selected based test script can then make use of this when component id is not available.
+The selenium test script that uses html id is problematic for zk since the html id for each zk component ( uuid in zk term ) is randomly generated and can change from one run to another. To address this issue, you have to use a custom id generator or write your test script without dependency on uuid. We have build a custom id generator to support writing of test script that uses zk selector. For the id generator and zk seletor based test script to work, we have to assigned an id ( zk component id, not html id ) to each zk component. There is one caveat with such approach though, Zk required the id of each component to be unique within an IdSpace ( IdSpace is defined by the nearest parent component that implement the IdSpace interface ). This is usually not an issue but could be problematic if you want to assigned a well known id to a shared component. To avoid the risk of causing "non-unique id within id space" exception at runtime, we added a second option. Instead of an id, you can assigned a special widget attribute, "instanceName" (AdempiereWebUI.WIDGET_INSTANCE_NAME) to a Zk component. The id generator and your Zk selector based test script can then make use of this when component id is not available.
 === iDempiere ID generator ===
-To use the iDempiere id generator, run iDempiere from Eclipse using the server.product.functionaltest launch profile. The iDempiere id generator uses the idspace hierarchy to generate the uuid of a component. For e.g:
+To use the iDempiere Id generator, run iDempiere from Eclipse using the server.product.functionaltest launch profile. The iDempiere Id generator uses the IdSpace hierarchy to generate the _zk_locator attribute of a component. For e.g:
-* The uuid ( html id ) of the ok button at the login window is loginPanel_Ok which is the id of the login window ( loginPanel ) + the id of the ok button ( Ok ).
+* The _zk_locator attribute of the ok button at the login window is $loginPanel $Ok which is the id of the login window ( loginPanel ) + the id of the ok button ( Ok ).
-* The id generator will add a _zk_locator attribute to the widget's corresponding html element. Most of the time, you can use that directly to access the html element or the zk widget.
-The use of idspace hierarchy help to produce unique uuid and at the same time allow easy translation of the generated uuid to zk selector notation.
+=== Using zk selector ===
+In your test script, you can access zk component using zk jQuery selector, i.e the value from the _zk_locator attribute. It is easy to find out manually the zk selector needed using the FireBug of Chrome's inspect element tool. Typically, you need to look for the html element with the css class that correspond to the zk component name that you want to access. For e.g, zk decimalbox will have the css class z-decimalbox, hbox will have z-hbox, etc.
-=== Using uuid and zk selector ===
-In your test script, you can access zk component using either uuid of zk jQuery selector. For uuid notation, you prefix the uuid value with #, i.e #loginPanel_Ok and #window0processButtonPopup_DocAction. For zk selector, you have to first break the uuid by the idspace hierarchy. You then use $ prefix for component id, and @ prefix for widget classname+instanceName. Using the examples above, the uuid "loginPanel_Ok" translate to "$loginPanel $Ok" and "window0processButtonPopup_DocAction" translate to "@window[instanceName=\"processButtonPopup\"] $DocAction" ( we know it is not a component id from the presence of the 0 separator ). Why the 2 notation ? The difference here is the # notation only work when you are using the iDempiere id generator. For deployed instance, iDempiere id generator is turned off due to performance reason. Therefore, it is recommended to use the selector approach for your test script. Selenium IDE will record test script with the uuid notation but as have been shown above, we have make it easy to convert uuid to the zk selector notation. It is also easy to find out manually the zk selector needed using the FireBug of Chrome's inspect element tool. Typically, you need to look for the html element with the css class that correspond to the zk component name that you want to access. For e.g, zk decimalbox will have the css class z-decimalbox, hbox will have z-hbox, etc.
 For window, report and process, the assignment of id and widget attribute is addressed at the framework level. For custom form, you would have do the id assignment for each component to make it test ready.
@@ Line 30: / Line 27: @@
 [[Category:UI Testing]]
+[[Category:Developer documentation]]
+[[Category:Development]]