Testing a Wicket application with Selenium IDE

In development mode, Wicket generates id’s with the wicket namespace prefix. These id’s are dynamic and change everytime a page is rendered. This works fine until you try to record test scripts with Selenium IDE.

What Selenium basically does is use XPath queries against the wicket:id‘s, recording the value of those id’s. But next time around, when you try to playback the test script, it will fail beacuse the values of all of the wicket:id’s have changed.

One possible workaround would be to just use normal HTML id attributes. But this is very laborious and poses limitations on your HTML, CSS, and Javascript code, and also polutes the production code with a lot of unnecessary id attributes.

A more useful solution would be to make use of Wicket’s wicketpath attribute.

Enabling the `wicketpath` attribute

Wicket provides a way to add a unique identifier, the “wicketpath” attribute, to each rendered component. Wicket will do so only in development mode so your production code is still free of non-standard elements and attributes.

To enable the output of wicketpaths you have to add getDebugSettings().setOutputComponentPath(true); to your application class:

@Override
protected void init() {
   super.init();
   getDebugSettings().setOutputComponentPath(true);
}

@Override

protected void init() {

super.init();

getDebugSettings().setOutputComponentPath(true);

}

Instructing Selenium IDE to use the `wicketpath` attribute

Now we’ve got Wicket to generate the wicketpath attribute on all rendered components. But Selenium still isn’t aware of that attribute. This problem can be resolved by following a tip first posted by Frank van Lankvelt at https://issues.apache.org/jira/browse/WICKET-1830.

Create a folder called “wicketPathLocatorBuilder“.
Add a file to this folder and name it “user-extension.js.wicketPathLocatorBuilder“.
Edit the file and paste the following snippet in:

LocatorBuilders.add('wicketpath', function(e) {
        this.log.debug("wicketpath: e=" + e);
        if (e.attributes &amp;&amp; e.hasAttribute("wicketpath")) {
            this.log.info("found attribute " + e.getAttribute("wicketpath"));
            return "//" + this.xpathHtmlElement(e.nodeName.toLowerCase()) + "[@wicketpath=" + this.attributeValue(e.getAttribute("wicketpath")) + "]";
        }
        return null;
    });

LocatorBuilders.order.unshift(LocatorBuilders.order.pop());

LocatorBuilders.add('wicketpath', function(e) {

this.log.debug("wicketpath: e=" + e);

if (e.attributes && e.hasAttribute("wicketpath")) {

this.log.info("found attribute " + e.getAttribute("wicketpath"));

return "//" + this.xpathHtmlElement(e.nodeName.toLowerCase()) + "[@wicketpath=" + this.attributeValue(e.getAttribute("wicketpath")) + "]";

}

return null;

});

LocatorBuilders.order.unshift(LocatorBuilders.order.pop());

Open Selenium IDE and go to menu Options -> Options.
Paste the path to the folder “wicketPathLocatorBuilder“, that you’ve created earlier, into the Selenium Core extensions input field.
Restart firefox.

So now, when you record tests with Selenium, the wicketpath attribute is used to generate an element locator. Something like in the following snippet:

<tr>
<td>type</td>
<td>//input[@wicketpath='loginForm_username']</td>
<td>myUsername</td>
</tr>
<tr>
<td>type</td>
<td>//input[@wicketpath='loginForm_password']</td>
<td>myPassword</td>
</tr>

<tr>

<td>//input[@wicketpath='loginForm_username']</td>

<td>myUsername</td>

</tr>

<tr>

<td>//input[@wicketpath='loginForm_password']</td>

<td>myPassword</td>

</tr>

Enabling the wicketpath attribute

Instructing Selenium IDE to use the wicketpath attribute

One Reply to “Testing a Wicket application with Selenium IDE”

Enabling the `wicketpath` attribute

Instructing Selenium IDE to use the `wicketpath` attribute