Jameleon - Jiffie Plug-in
This section explains how to test a page that is 100% JavaScript driven using the Jiffie plug-in provided tags.
The page used in our example is here.
This form has every field that can exist in a form except the file field which can not be automated using IE. The important thing to note is that there are a total of four buttons on the page. Each button has a different result. The idea is that the form data posted is printed on the results page. This makes a perfect example since it is JavaScript driven and it includes both form posting and validation.
The following is a sample script that simply checks a checkbox and validates that the checkbox was checked.
<?xml version="1.0"?>
<j:testcase xmlns:j="jelly:jameleon" >
<j:test-case-summary>
This testcase sets the first name field in the sampleForm.html page and
then validate the value in the form field.
</j:test-case-summary>
<j:test-case-author>Marti Whitehead</j:test-case-author>
<j:functional-point-tested>checkbox tags</j:functional-point-tested>
<j:application-tested>Sample</j:application-tested>
<j:ie-session baseUrl="http://jameleon.sourceforge.net/jiffie-plugin/forms/sampleForm.html" beginSession="true" >
<j:ie-validate-title functionId="Check the title of the sample form page"
title="Sample Form Page"/>
<j:ie-validate-checkbox functionId="Validate the 'High School' is not checked"
name="ed1"
form="sample"
checked="false"/>
<j:ie-validate-checkbox functionId="Validate the 'College' is not checked"
name="ed2"
form="sample"
checked="false"/>
<j:ie-validate-checkbox functionId="Validate the 'Master' is not checked"
name="ed3"
form="sample"
checked="false"/>
<j:ie-set-checkbox functionId="Check 'High School'"
name="ed1"
form="sample"
checked="true"/>
<j:ie-validate-checkbox functionId="Verify that 'High School' is checked"
name="ed1"
form="sample"
checked="true"/>
<j:ie-validate-checkbox functionId="Validate the 'College' is still not checked"
name="ed2"
form="sample"
checked="false"/>
<j:ie-validate-checkbox functionId="Validate the 'Master' is still not checked"
name="ed3"
form="sample"
checked="false"/>
</j:ie-session>
</j:testcase>
The following script does a lot of things and is quite long. Notice how it first sets all of the form fields, submits the form, clicks the back button and the text is values of the fields are still set except the password field. This test case also submit the form in several different ways. One more thing to notice is that some functional points have the functionDelay attribute set. When executing a JavaScript call, IE needs some time to actually execute the JavaScript. There may be some times where you are validating that IE arrived at the expected page before IE could actually arrive there. Setting the functionDelay, makes the script wait for the given number of milliseconds after the execution of the tag.
<?xml version="1.0"?>
<j:testcase xmlns:j="jelly:jameleon" >
<j:test-case-summary>
This testcase submits the different ways with the buttons:
1) Using the name of the button
2) Using the value of the button
3) Using both the name and the value of the button
4) Using the alt text of the button
5) Using the img src of the button
</j:test-case-summary>
<j:test-case-author>Marti Whitehead</j:test-case-author>
<j:functional-point-tested>ie-click-button and validation</j:functional-point-tested>
<j:application-tested>Sample</j:application-tested>
<j:ie-session baseUrl="http://jameleon.sourceforge.net/jiffie-plugin/forms/sampleForm.html" beginSession="true" >
<j:ie-validate-title functionId="Validate the sample form page title first time"
title="Sample Form Page"
breakPoint="true"/>
<j:ie-set-text-field functionId="Enter the first name field"
name="fname"
form="sample"
value="Joe" />
<j:ie-set-text-field functionId="Enter the last name field"
name="lname"
form="sample"
value="Doo" />
<j:ie-set-radiobutton functionId="Set the gender radion button value to Female"
name="gender"
form="sample"
value="female" />
<j:ie-set-select-field functionId="Set the family size selected value to 3"
name="mySelect"
form="sample"
optionValue="2" />
<j:ie-set-checkbox functionId="Set the family education level to College"
name="ed2"
form="sample"
checked="true" />
<j:ie-set-text-field functionId="Set the family income field"
name="income"
form="sample"
value="100000" />
<j:ie-set-text-field functionId="Set the family debt field"
name="debt"
form="sample"
value="56000" />
<j:ie-set-text-field functionId="Set the user id field"
name="userid"
form="sample"
value="test001" />
<j:ie-set-password-field functionId="Set the password field"
name="password"
form="sample"
value="12345" />
<j:ie-click-button functionId="Click on the 'Go' button, using the name of the button"
form="sample"
name="submit"
functionDelay="300"/>
<j:ie-validate functionId="Validate the survey result page title and that the 'Go' button was pressed."
title="Survey Results"
textPresent="The 'Go' button was clicked" />
<j:ie-validate-text functionId="Validate the first name field is set to Joe"
text="First Name: Joe" />
<j:ie-validate-text functionId="Validate the first name field is set to Doo"
text="Last Name: Doo" />
<j:ie-validate-text functionId="Validate the gender is set to Female"
text="Gender: Female"/>
<j:ie-validate-text functionId="Validate the family size set is to 3"
text="Family Size: 2"/>
<j:ie-validate-text functionId="Validate the family education level is set to College"
text="Family Member Education Level: College" />
<j:ie-validate-text functionId="Validate the family income is set to 100000"
text="Family Income: 100000"/>
<j:ie-validate-text functionId="Validate the family debt is set to 56000"
text="Family Debt: 56000" />
<j:ie-validate-text functionId="Validate the user id field"
text="User id: test001" />
<j:ie-validate-text functionId="Validate the password field"
text="Password: 12345" />
<j:ie-go-back functionId="Click on the browser back button 1" functionDelay="50" />
<j:ie-validate-title functionId="Validate the sample form page title second time"
title="Sample Form Page" />
<j:ie-click-button functionId="Click on the 'Go' button, using the value"
form="sample"
value="Go"
functionDelay="300"/>
<j:ie-validate functionId="Validate the survey result page title and that the 'Go' button was pressed after using it's value attribute."
title="Survey Results"
textPresent="The 'Go' button was clicked" />
<j:ie-click-html-element functionId="Click on the 'Go Back' button"
htmlElement="input"
functionDelay="300">
<j:ie-attribute>
<j:ie-attribute-name>type</j:ie-attribute-name>
<j:ie-attribute-value>button</j:ie-attribute-value>
</j:ie-attribute>
<j:ie-attribute>
<j:ie-attribute-name>value</j:ie-attribute-name>
<j:ie-attribute-value>Go Back</j:ie-attribute-value>
</j:ie-attribute>
</j:ie-click-html-element>
<j:ie-validate-title functionId="Validate the sample form page title third time"
title="Sample Form Page" />
<j:ie-click-button functionId="Click on the 'Go' button, using both the name and the value of the button"
form="sample"
name="submit"
value="Go"
functionDelay="300"/>
<j:ie-validate functionId="Validate the survey result page title and that the 'Go' button was pressed after using it's name and value attributes."
title="Survey Results"
textPresent="The 'Go' button was clicked" />
<j:ie-go-back functionId="Click on the browser back button 3" functionDelay="50" />
<j:ie-validate-title functionId="Validate the sample form page title fourth time"
title="Sample Form Page" />
<j:ie-click-button functionId="Click on the blue button, using the alt text of the button"
form="sample"
identifier="post information"
functionDelay="300"/>
<j:ie-validate functionId="Validate the survey result page title and that the blue button was pressed after using it's alt text."
title="Survey Results"
textPresent="The 'Blue' button was clicked" />
<j:ie-go-back functionId="Click on the browser back button 4" functionDelay="50" />
<j:ie-validate-title functionId="Validate the sample form page title fifth time"
title="Sample Form Page" />
<j:ie-click-button functionId="Click on the purple button, using the img src of the button"
form="sample"
identifier="purple.JPG"
functionDelay="300"/>
<j:ie-validate functionId="Validate the survey result page title and that the purple button was pressed after using it's alt text."
title="Survey Results"
textPresent="The 'Purple' button was clicked" />
<j:ie-validate-text functionId="Validate the first name field set to Joe"
text="First Name: Joe" />
<j:ie-validate-text functionId="Validate the first name field set to Doo"
text="Last Name: Doo" />
<j:ie-validate-text functionId="Validate the gender set to Female"
text="Gender: Female"/>
<j:ie-validate-text functionId="Validate the family size set to 3"
text="Family Size: 2"/>
<j:ie-validate-text functionId="Validate the family education level set to College"
text="Family Member Education Level: College" />
<j:ie-validate-text functionId="Validate the family income set to 100000"
text="Family Income: 100000"/>
<j:ie-validate-text functionId="Validate the family debt set to 56000"
text="Family Debt: 56000" />
<j:ie-validate-text functionId="Validate the user id field"
text="User id: test001" />
</j:ie-session>
</j:testcase>
In above example, we end up using some of the same information over and over again when setting the form field values and even validating them. If we were to write custom tags to submit the form and validate the next page, we could likely make our script shorter and easier to maintain.
We could create an action point that posts the form by using the action point generator. I used the action point generator to generate the main code, then I added support for the muliple buttons myself.
package ex;
import com.tapsterrock.jiffie.*;
import net.sf.jameleon.plugin.jiffie.IEFunctionTag;
/**
* DESCRIPTION GOES HERE
* @jameleon.function name="sample-form" type="action"
* @jameleon.step Set firstName text field if value is provided
* @jameleon.step Set lastName text field if value is provided
* @jameleon.step Select gender radio field if value is provided
* @jameleon.step Check hightSchool checkbox field if value is provided
* @jameleon.step Check college checkbox field if value is provided
* @jameleon.step Check master checkbox field if value is provided
* @jameleon.step Set income text field if value is provided
* @jameleon.step Set debt text field if value is provided
* @jameleon.step Set userid text field if value is provided
* @jameleon.step Set password password field if value is provided
* @jameleon.step Select familySize select field if value is provided
*/
public class SampleFormTag extends IEFunctionTag{
/**
* the form identifier
* @jameleon.attribute default="0"
*/
protected String formIdentifier;
/**
* fname
* @jameleon.attribute required="false"
*/
protected String firstName;
/**
* lname
* @jameleon.attribute required="false"
*/
protected String lastName;
/**
* gender
* @jameleon.attribute required="false"
*/
protected String gender;
/**
* ed1
* @jameleon.attribute required="false"
*/
protected Boolean hightSchool;
/**
* ed2
* @jameleon.attribute required="false"
*/
protected Boolean college;
/**
* ed3
* @jameleon.attribute required="false"
*/
protected Boolean master;
/**
* income
* @jameleon.attribute required="false"
*/
protected String income;
/**
* debt
* @jameleon.attribute required="false"
*/
protected String debt;
/**
* userid
* @jameleon.attribute required="false"
*/
protected String userid;
/**
* password
* @jameleon.attribute required="false"
*/
protected String password;
/**
* mySelect
* @jameleon.attribute required="false"
*/
protected String familySize;
/**
* @jameleon.attribute
*/
protected boolean clickGo;
/**
* @jameleon.attribute
*/
protected boolean clickBlueButton;
/**
* @jameleon.attribute
*/
protected boolean clickPurpleButton;
public void testBlock(){
if (functionDelay == 0) {
functionDelay = 300;
}
setWorkingForm(formIdentifier);
if ( firstName != null ){
setTextFieldValue( firstNameFieldName, firstName);
}
if ( lastName != null ){
setTextFieldValue( lastNameFieldName, lastName);
}
if ( gender != null ){
setRadioButtonValue( genderFieldName, gender);
}
if ( hightSchool != null ){
setCheckbox( hightSchoolFieldName, hightSchool.booleanValue());
}
if ( college != null ){
setCheckbox( collegeFieldName, college.booleanValue());
}
if ( master != null ){
setCheckbox( masterFieldName, master.booleanValue());
}
if ( income != null ){
setTextFieldValue( incomeFieldName, income);
}
if ( debt != null ){
setTextFieldValue( debtFieldName, debt);
}
if ( userid != null ){
setTextFieldValue( useridFieldName, userid);
}
if ( password != null ){
setPasswordFieldValue( passwordFieldName, password);
}
if ( familySize != null ){
setSelectFieldOptionValue( familySizeFieldName, familySize);
}
IHTMLElement button = null;
if (clickGo) {
button = getSubmitButtonWithValue("Go");
}else if (clickBlueButton) {
button = getSubmit("post information");
}else if (clickPurpleButton) {
button = getSubmit("purple.jpg");
}
if (button != null) {
clickIHTMLElement(button);
}else{
fail("Not posting the form");
}
}
/////////////////////////////////////////////////////////////////////////////
// FIELD NAMES ///
// These attributes are used to identify the fields in the form ///
// So they can easily be changed if the form fields ever change ///
/////////////////////////////////////////////////////////////////////////////
/**
* firstName's field name
*/
protected String firstNameFieldName = "fname";
/**
* lastName's field name
*/
protected String lastNameFieldName = "lname";
/**
* gender's field name
*/
protected String genderFieldName = "gender";
/**
* hightSchool's field name
*/
protected String hightSchoolFieldName = "ed1";
/**
* college's field name
*/
protected String collegeFieldName = "ed2";
/**
* master's field name
*/
protected String masterFieldName = "ed3";
/**
* income's field name
*/
protected String incomeFieldName = "income";
/**
* debt's field name
*/
protected String debtFieldName = "debt";
/**
* userid's field name
*/
protected String useridFieldName = "userid";
/**
* password's field name
*/
protected String passwordFieldName = "password";
/**
* familySize's field name
*/
protected String familySizeFieldName = "mySelect";
}
I also created a validation tag that can be used to validate the results page. While this isn't neccesary, it does shorten things a bit and it's another example.
package ex;
import com.tapsterrock.jiffie.*;
import net.sf.jameleon.plugin.jiffie.IEFunctionTag;
/**
* Validates the results page from the sample form submit page
* @jameleon.function name="sample-form-validate" type="validation"
*/
public class SampleFormValidationTag extends IEFunctionTag {
/**
* The customer's first name
* @jameleon.attribute
*/
protected String firstName;
/**
* The customer's last name
* @jameleon.attribute
*/
protected String lastName;
/**
* The customer's gender
* @jameleon.attribute
*/
protected String gender;
/**
* The customer's education level
* @jameleon.attribute
*/
protected String educationLevel;
/**
* The family's income
* @jameleon.attribute
*/
protected String income;
/**
* The family's debt
* @jameleon.attribute
*/
protected String debt;
/**
* @jameleon.attribute
*/
protected String userid;
/**
* @jameleon.attribute
*/
protected String password;
/**
* The number of family members
* @jameleon.attribute
*/
protected String familySize;
/**
* @jameleon.attribute
*/
protected String buttonText;
/**
* @jameleon.attribute default="Survey Results"
*/
protected String title;
public void testBlock(){
assertTitleEquals(title);
if ( firstName != null ) {
assertTextPresent("First Name: " + firstName);
}
if ( lastName != null ) {
assertTextPresent("Last Name: " + lastName);
}
if ( gender != null ) {
assertTextPresent("Gender: "+gender);
}
if ( educationLevel != null ) {
assertTextPresent("Family Member Education Level: "+educationLevel);
}
if ( income != null ) {
assertTextPresent("Family Income: " + income);
}
if ( debt != null ) {
assertTextPresent("Family Debt: "+debt);
}
if ( userid != null ) {
assertTextPresent( "User id: " + userid);
}
if ( password != null ) {
assertTextPresent( "Password: " + password);
}
if ( familySize != null ) {
assertTextPresent( "Family Size: " + familySize);
}
if ( buttonText != null ) {
assertTextPresent( "The '"+buttonText+"' button was clicked");
}
}
}
We now have two custom tags and the above script can now look like:
<?xml version="1.0"?>
<j:testcase xmlns:j="jelly:jameleon" >
<j:test-case-summary>
This testcase submits the different ways with the buttons:
1) Using the name of the button
2) Using the value of the button
3) Using both the name and the value of the button
4) Using the alt text of the button
5) Using the img src of the button
</j:test-case-summary>
<j:test-case-author>Christian Hargraves</j:test-case-author>
<j:functional-point-tested>ie-click-button and validation</j:functional-point-tested>
<j:application-tested>Sample</j:application-tested>
<j:ie-session baseUrl="C:\wrk\jiffie-plugin\target\docs\forms\sampleForm.html" beginSession="true" >
<j:ie-validate-title functionId="Validate the sample form page title first time"
title="Sample Form Page"
breakPoint="true"/>
<j:sample-form
functionId="fill out the form with various data"
firstName="Joe"
lastName="Doo"
gender="female"
familySize="2"
college="true"
income="100000"
debt="56000"
userid="test001"
password="12345"
clickGo="true"/>
<j:sample-form-validate functionId="Validate that the form data was all posted correctly"
buttonText="Go"
firstName="Joe"
lastName="Doo"
gender="Female"
familySize="2"
educationLevel="College"
income="100000"
debt="56000"
userid="test001"
password="12345" />
<j:ie-go-back functionId="Click on the browser back button 1" functionDelay="50" />
<j:ie-validate-title functionId="Validate the sample form page title second time"
title="Sample Form Page" />
<j:sample-form functionId="Click on the 'Go' button, using the value"
clickGo="true"/>
<j:sample-form-validate functionId="Validate the survey result page title and that the 'Go' button was pressed after using it's value attribute."
buttonText="Go" />
<j:ie-click-html-element functionId="Click on the 'Go Back' button instead of click on the browser's back button."
htmlElement="input">
<j:ie-attribute>
<j:ie-attribute-name>type</j:ie-attribute-name>
<j:ie-attribute-value>button</j:ie-attribute-value>
</j:ie-attribute>
<j:ie-attribute>
<j:ie-attribute-name>value</j:ie-attribute-name>
<j:ie-attribute-value>Go Back</j:ie-attribute-value>
</j:ie-attribute>
</j:ie-click-html-element>
<j:ie-validate-title functionId="Validate the sample form page title third time"
title="Sample Form Page" />
<j:sample-form functionId="Click on the 'Go' button, using both the name and the value of the button"
clickGo="true" />
<j:sample-form-validate functionId="Validate the survey result page title and that the 'Go' button was pressed after using it's name and value attributes."
buttonText="Go"/>
<j:ie-go-back functionId="Click on the browser back button 3" functionDelay="50" />
<j:ie-validate-title functionId="Validate the sample form page title fourth time"
title="Sample Form Page" />
<j:sample-form functionId="Click on the blue button, using the alt text of the button"
clickBlueButton="true"
functionDelay="300"/>
<j:sample-form-validate functionId="Validate the survey result page title and that the blue button was pressed after using it's alt text."
buttonText="Blue" />
<j:ie-go-back functionId="Click on the browser back button 4" functionDelay="50" />
<j:ie-validate-title functionId="Validate the sample form page title fifth time"
title="Sample Form Page" />
<j:sample-form functionId="Click on the purple button, using the img src of the button"
clickPurpleButton="true"/>
<j:sample-form-validate functionId="Validate the survey result page title and that the purple button was pressed after using it's alt text."
firstName="Joe"
lastName="Doo"
gender="Female"
familySize="2"
educationLevel="College"
income="100000"
debt="56000"
userid="test001"
buttonText="Purple" />
</j:ie-session>
</j:testcase>