ZK Testing with Selenium IDE

From Documentation

WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!


DocumentationSmall Talks2013JulyZK Testing with Selenium IDE
ZK Testing with Selenium IDE

Author
Robert Wenzel, Engineer, Potix Corporation
Date
July 2013
Version
ZK 6.5 (or later)

Introduction

About this article

nice application, how to test ... refer to zats... some things need to be tested in a real browser, so selenium comes into play... how to create tests

programmatically... link to older Small Talk?? or use Selenium-IDE to record/tweak/maintain!! and replay/debug -- this article :D

Environment

  • Firefox (used with 21.0)
  • Selenium IDE 2.0.0
  • JDK 6/7
  • ZK 6.5.3 6/7
  • Maven 3.0

Steps

Initialize your testing environment

- download Selenium IDE 2.0.0 link -- docu http://wiki.openqa.org/display/SIDE/Home - Maven 3.0 -- download link -- setup maven

- download link (test project) - maven: mvn jetty:run - localhost:8080 (- war file )


Initial Situation

launch Selenium IDE open example app record login-page and replay

'(

nothing works...


look at the recorded commands

File:Changing ids.PNG ids are changing all the time,

IDGenerator

as mentioned in other smalltalks I use a custom IdGenerator to create predictable, readable (with a business meaning) and easily selectable (by selenium) component ids.

public class TestingIdGenerator implements IdGenerator {

	public String nextComponentUuid(Desktop desktop, Component comp,
			ComponentInfo compInfo) {
        int i = Integer.parseInt(desktop.getAttribute("Id_Num").toString());
        i++;// Start from 1
        
        StringBuilder uuid = new StringBuilder("");
        
        desktop.setAttribute("Id_Num", String.valueOf(i));
        if(compInfo != null) {
        	String id = getId(compInfo);
        	if(id != null) {
        		uuid.append(id).append("_");
        	}
        	String tag = compInfo.getTag();
        	if(tag != null) {
        		uuid.append(tag).append("_");
        	}
        }
        return uuid.length() == 0 ? "zkcomp_" + i : uuid.append(i).toString();
    }

In order not to mix up production with test configuration we can include an additional config file at startup to enable the TestingIdGenerator enabled via java VMarg ... -Dorg.zkoss.zk.config.path=/WEB-INF/zk-test.xml

Windows set MAVEN_OPTS=-Dorg.zkoss.zk.config.path=/WEB-INF/zk-test.xml Linux export MAVEN_OPTS=-Dorg.zkoss.zk.config.path=/WEB-INF/zk-test.xml

mvn jetty:run

TODO: improve using maven profiles...


now we get nicer and deterministic IDs when recording the test

record login again

File:Nicer ids.PNG

replay

still fails to replay why...

ZK heavily uses JavaScript and Selenium does not record all events by default

in our case here the "blur" events of the input fields have not been recorded, but ZK relies on them to determine possible dirty fields. So we need to manually add selenium commands "fireEvent target blur" unfortunately Selenium does not offer a nice equivalent like "focus"

File:Nicer ids with blur events.PNG

replay the script

D now works, and we see the overview page ...

verify the page url, and some text on the page, to make sure the login redirects to the right page

Selenium Extensions

if you find it annoying to add an additional line just to update an input field there is a possible solution: custom Selenium extensions

This snipped shows a simple extension that combines the type with a blur event, to make ZK aware of the input change.

Selenium.prototype.doTypeAndBlur = function(locator, text) {
    // All locator-strategies are automatically handled by "findElement"
    var element = this.page().findElement(locator);

    // Replace the element text with the new text
    this.page().replaceText(element, text);
	// Fire the "blur event"
	triggerEvent(element, "blur", false);
};

user-extensions.js DOWNLOADable (file contains another extension ... more about that later in "making tests more robust and maintainable to UI updates")

add to Selenium IDE Options/Options... [General Tab] Selenium Core extensions


File:Nicer ids with implicit blur events.PNG



lets record a test for edit and save an existing "feedback item" in the list, and verify the results.

make tests more robust and maintainable to UI updates

automatically run tests Selenium-RC

different browsers ??