Extension Step clickElement
Description
Clicks an HTML element identified by its id or xpath. If the click triggers the load of a new page, then this page becomes the current one.
Parameters
- description
- Required? no
- The description of this test step.
- htmlId
- Required? yes/no
- The id of the html element to click on. One of htmlId or xPath must be set.
- password
- Required? no
- A password that can be provided for pages that require basic authentication. Required if username is specified.
- save
- Required? no
- A shorthand: save='prefixName' is the same as savePrefix='prefixName' saveResponse='true'.
- savePrefix
- Required? no, default is the 'savePrefix' parameter as specified in <config>.
- A name prefix can be specified for making a permanent copy of received responses. A unique number and the file extension (depending on the MIME-Type) will be appended. The resultpath attribute of the <config> element is used for determining the location of the saved result.
- saveResponse
- Required? no
- Whether to make a permanent copy of received responses. Overrides the default value set in the <config> element.
- username
- Required? no
- A username that can be provided for pages that require basic authentication. Typically only needed on the first step of any webtest accessing a secure site. Required if password is specified.
- xpath
- Required? yes/no
- The XPath identifying the html element to click on. One of htmlId or xPath must be set.
Details
Consider the following HTML page:
clickElement HTML
<html>
<head>
<script type="text/JavaScript">
<--
function flipColor(obj) {
var color=(obj.style.backgroundColor==obj.id) ? "yellow" : obj.id;
obj.style.backgroundColor=color;
}
// -->
</script>
</head>
<body>
<table cellspacing="1" border="1">
<tr style="backgroundColor:red;background:red" id="red" onclick="flipColor(this)">
<td width="150" height="30"></td><td width="150"></td><td width="150"></td>
</tr>
<tr style="backgroundColor:green;background:green" id="green" onclick="flipColor(this)">
<td width="150" height="30"></td><td width="150"></td><td width="150"></td>
</tr>
<tr style="backgroundColor:blue;background:blue" id="blue" onclick="flipColor(this)">
<td width="150" height="30"></td><td width="150"></td><td width="150"></td>
</tr>
</table>
</body>
</html>
<head>
<script type="text/JavaScript">
<--
function flipColor(obj) {
var color=(obj.style.backgroundColor==obj.id) ? "yellow" : obj.id;
obj.style.backgroundColor=color;
}
// -->
</script>
</head>
<body>
<table cellspacing="1" border="1">
<tr style="backgroundColor:red;background:red" id="red" onclick="flipColor(this)">
<td width="150" height="30"></td><td width="150"></td><td width="150"></td>
</tr>
<tr style="backgroundColor:green;background:green" id="green" onclick="flipColor(this)">
<td width="150" height="30"></td><td width="150"></td><td width="150"></td>
</tr>
<tr style="backgroundColor:blue;background:blue" id="blue" onclick="flipColor(this)">
<td width="150" height="30"></td><td width="150"></td><td width="150"></td>
</tr>
</table>
</body>
</html>
The page contains no links or buttons but we want to be able to activate and check the onclick JavaScript. We can do this using the <clickElement> step as follows:
clickElement Example
<webtest name="clickElement: Click Table Cell">
<config ... />
<steps>
<invoke description="start" url="colorChange.html"/>
<-- first row tests -->
<storeElementAttribute htmlId="red" attributeName="style" propertyName="colorBefore1"/>
<verifyProperty name="colorBefore1" text=".*backgroundColor:[ ]*red.*" regex="true"/>
<clickElement description="toggle color of first row" htmlId="red"/>
<storeElementAttribute htmlId="red" attributeName="style" propertyName="colorAfter1"/>
<verifyProperty name="colorAfter1" text=".*backgroundColor:[ ]*yellow.*" regex="true"/>
<clickElement description="toggle color of first row back" htmlId="red"/>
<storeElementAttribute htmlId="red" attributeName="style" propertyName="colorFinal1"/>
<verifyProperty name="colorFinal1" text=".*backgroundColor:[ ]*red.*" regex="true"/>
<-- second row tests -->
<storeElementAttribute xpath="//tr[2]" attributeName="style" propertyName="colorBefore2"/>
<verifyProperty name="colorBefore2" text=".*backgroundColor:[ ]*green.*" regex="true"/>
<clickElement description="toggle color of second row" xpath="//tr[2]"/>
<storeElementAttribute xpath="//tr[2]" attributeName="style" propertyName="colorAfter2"/>
<verifyProperty name="colorAfter2" text=".*backgroundColor:[ ]*yellow.*" regex="true"/>
</steps>
</webtest>
<config ... />
<steps>
<invoke description="start" url="colorChange.html"/>
<-- first row tests -->
<storeElementAttribute htmlId="red" attributeName="style" propertyName="colorBefore1"/>
<verifyProperty name="colorBefore1" text=".*backgroundColor:[ ]*red.*" regex="true"/>
<clickElement description="toggle color of first row" htmlId="red"/>
<storeElementAttribute htmlId="red" attributeName="style" propertyName="colorAfter1"/>
<verifyProperty name="colorAfter1" text=".*backgroundColor:[ ]*yellow.*" regex="true"/>
<clickElement description="toggle color of first row back" htmlId="red"/>
<storeElementAttribute htmlId="red" attributeName="style" propertyName="colorFinal1"/>
<verifyProperty name="colorFinal1" text=".*backgroundColor:[ ]*red.*" regex="true"/>
<-- second row tests -->
<storeElementAttribute xpath="//tr[2]" attributeName="style" propertyName="colorBefore2"/>
<verifyProperty name="colorBefore2" text=".*backgroundColor:[ ]*green.*" regex="true"/>
<clickElement description="toggle color of second row" xpath="//tr[2]"/>
<storeElementAttribute xpath="//tr[2]" attributeName="style" propertyName="colorAfter2"/>
<verifyProperty name="colorAfter2" text=".*backgroundColor:[ ]*yellow.*" regex="true"/>
</steps>
</webtest>
See also: the storeElementAttribute step.