Navigation script

The following script is more complex, representing a navigation scenario for a user who wants to calculate a loan condition using a specialized web application for this:

1. "use strict";
2. var fs = require('fs');
3. var utils = require('utils');
4. var webserver = require('webserver');
5. var testclientURL = 'http://www.exampledomain.com/testclient.htm';
6. // Create CasperJS instance
7. var casper = require('casper').create({
8. 	verbose : true,
9. 	logLevel : 'debug',
10. 	viewportSize: {
11. 		width: 1024,
12. 		height: 768
13. 	},
14. 	pageSettings: {
15. 		"loadImages" : true,
16. 		"loadPlugins" : true,
17. 		"webSecurityEnabled" : false,
18. 		"ignoreSslErrors" : true
19. 	}
20. });
21. // Read file path
22. var filePath = casper.cli.get(0);
23. // Read request data
24. var requestHeader = fs.read('request-header.txt');
25. var requestFooter = fs.read('request-footer.txt');
26. // Define global variables
27. var request;
28. var productNumber = 0; // -1 means no product selection, 
    otherwise it's the position in the list counting from 0
29. // Register error handler
30. casper.on('complete.error', function(err) {
31.     this.die("Complete callback has failed: " + err);
32. });
33. casper.on('error', function(msg, err) {
34. 	this.die(msg + " -> " + err);
35. });
36. /*
37.  * Initializes the test procedure by login a "login" page, altering the 
38.  * request form and sending the data to the server to perform the login
39.  * @param casper The casper instance to add steps to
40.  * @param url The URL to load the login page fromCharCode
41.  * @param request The complete request to send to MARZIPAN
42.  */
43. function startTestcase(casper, url, request) {
44. 	// Create directory to log screenshots to
45. 	fs.makeDirectory('log');
46. 	// Loading first form
47. 	casper.thenOpen(url);
48. 	casper.then(function _saveScreen01() {
49. 		this.capture('log/screen01_Test-Client-Form.png');
50. 	});
51. 	// Updating form input with loaded request
52. 	casper.waitForSelector('body > form:nth-child(3)',
53. 		function success() {
54. 			console.log('[INFO] Filling out login form ...');
55. 			this.fill('body > form:nth-child(3)', {
56. 				'CALLINTERFACE' : request
57. 			}, true);
58. 		},
59. 		function fail() {
60. 			console.log('[ERROR] Login Form not found');
61. 		}
62. 	);
63. }
64. /*
65.  * Method selects a product form the list of available products.
66.  * @param casper The CasperJS instance to add steps to
67.  * @param productNumber The number of the product list to select
68.  */
69. function selectProduct(casper, productNumber) {
70. 	var productSelection = '#SUBMIT__produktListe_' + productNumber + '_formName_' 
		+ productNumber + '__common_ladeProduktFuerImport';
71. 	casper.wait(4000);
72. 	// Select product
73. 	casper.waitForSelector(productSelection,
74. 			function success() {
75. 				console.log('[INFO] Selecting product...');
76. 				this.capture('log/screen02_Produktauswahl.png');
77. 				this.click(productSelection);
78. 			},
79. 			function fail() {
80. 				this.capture('log/screen02_Produktauswahl_err.png');
81. 				console.log('[ERROR] Product not found');
82. 			}
83. 	);
84. }
85. 
86. /*
87.  * This method fills a form of data to manually enter data
88.  * @param casper The CasperJS instance to add steps to
89.  */
90. function fillForm(casper) {
91. 	// Fill the form
92. 	casper.waitForSelector('#content-area > form:nth-child(1)',
93. 		function success() {
94. 			console.log('[INFO] Filling out form...');
95. 			this.capture('log/screen03_Eingabemaske.png');
96. 			this.sendKeys('input[name="zinsbindungslaufzeit"]', '10');
97. 			this.sendKeys('input[name="auszahlungsdatum"]', '17.08.2016');
98. 			this.sendKeys('input[name="rate"]', '900');
99. 			this.sendKeys('input[name="effektivzins"]', '2');
100. 			this.capture('log/screen04_EingabemaskeAusgefuellt.png');
101. 		},
102. 		function fail() {
103. 			this.capture('log/screen03_Eingabemaske_err.png');
104. 			console.log('[ERROR] Form not found');
105. 		}
106. 	);
107. }
108. /*
109.  * Presses the "berechen Nominalzins" Button
110.  * @param casper The CasperJS instance to add test steps to
111.  */
112. function pressBerechneNominalzinsAnnuitaetendarlehen(casper) {
113. 	// Compute nominal interest rate
114. 	casper.thenClick('input[name="SUBMIT_/aktiv/berechneNominalzinsAnnuitaetendarlehen"]');
115. 	casper.waitForSelector('#SUBMIT__aktiv_berechneNominalzinsAnnuitaetendarlehen', 
116. 		function success() {
117. 			this.wait(7000, function _saveScreen05() {
118. 				this.capture('log/screen05_NominalzinsBerechnet.png');
119. 			});
120. 		},
121. 		function fail() {
122. 				this.capture('log/screen05_NominalzinsBerechnet_err.png');
123. 			console.log('[ERROR] Failed to calculate nominal interest rate');
124. 		}
125. 	);
126. }
127. /*
128.  * Presses the "Ruecksenden" Button
129.  * @param casper The CasperJS instance to add test steps to
130.  */
131. function pressSubmitRuecksendenGeschaeft(casper) {
132. 	// Select Rücksprung
133. 	casper.thenClick('input[name="SUBMIT_/aktiv/ruecksendenGeschaeft"]', function _saveScreen06() {
134. 		this.capture('log/screen06_Ruecksprung.png');
135. 		this.wait(7000, function() {
136.         	this.capture('log/screen07_Ergebnis-HTML.png');
137.     	});
138. 	});
139. }
140. // Start CasperJS engine
141. casper.start();
142. try {
143. 	console.log('[INFO] Considering >> ' + filePath);
144. 	// Check whether it's a regular file
145. 	if(fs.isFile(filePath)) {
146. 		console.log('[INFO] Processing ' +  filePath);
147. 		console.log('[INFO] Loading request file >> ' + filePath);
148. 		request = fs.read(filePath);
149. 		// The complete request to send is header + content + footer
150. 		var completeRequest = requestHeader + request + requestFooter;
151. 		startTestcase(casper, testclientURL, completeRequest);
152. 		if(productNumber >= 0 ) {
153. 			selectProduct(casper, productNumber);
154. 		} else {
155. 			console.log('[INFO] Skipping product selection');
156. 		}
157. 		fillForm(casper);
158. 		pressBerechneNominalzinsAnnuitaetendarlehen(casper);
159. 		pressSubmitRuecksendenGeschaeft(casper);
160. 		console.info('[INFO] Testcase finished');
161. 	} else {
162. 		console.log('[INFO] Ignoring ' + filePath + ' as it is no regular file');
163. 	}
164. } catch(err) {
165. 	console.log('[ERROR] ' + err);
166. }
167. // Execute the chain of steps and exit on success
168. casper.run(function () {
169. 	this.exit();
170. });

The first step required to compute the loan’s conditions is the login. This is done by altering the request form and send data to the server to perform the login (see line 151). The complete request to be sent to the server contains three parts: the request header, the content and the request footer. All these parts are read from files (see lines 24, 25 and 148). The request content file path is given as a command line parameter and is accessed in line 22. After a successful login a product is selected (see line 153). Then a form is filled with some constraints as the payout date, annuity installment, effective interest rate (see lines 97, 98, 99). In the next step the nominal interest rate is calculated (see line 158). In the final step the “Rücksprung” button is clicked (see line 159), and the navigation scenario is finished.

To track the fulfillment of the navigation steps the screen capture mechanism is used, for example in lines 49, 76, 80.

Assuming the script is saved in a file named navigationScript.js, the following command starts its execution:

casperjs navigationScript.js C:/requestContent.txt

Testing script

CasperJS provides a helpful range of functions and assertions. Usually, the base components of a CasperJS test file are:

• test suite declaration: contains a description, number of tests and the suite code itself
• functional steps: the code inside the suite – actions on the website and assertions
• run tests: the command which runs the tests

Below you can see a simple test script:

1.  casper.test.begin('Testing Google', 1, function(test){
2.    casper.start('http://google.com');
3.    casper.then(function(){
4. 	test.assertTitle('Google', 'Google has correct title'); 
5.    });
6.    casper.run(function(){
7.  	  test.done();
8.    })
9. });

Test scripts are a little bit different than the scraping ones, although they share most of the API. One difference is that test scripts don’t require creating a casper instance. They require to be run with the ‘test’ keyword in the command line. The casperjs test subcommand configures a test environment for you, so a preconfigured casper object will be available in your test script.

Assuming that the above script was saved in a file named firsttest.js, you have to type the following command to run it:

	casperjs test firsttest.js

In line 1, the access to an instance of the Tester class, provided by CasperJS, is made by default through the test property of any Casper class instance. Then the begin method is called, passing in three arguments: description, the number of tests expected to run and the callback function. In this case, a suite with 1 test will be started. The callback function, the third parameter, will get the current Tester instance as its first argument.

In line 2, using start() method, Google web page is loaded.

In line 4 one of the asserts, assertTitle, is used to check that the title equals the expected one. First parameter is the expected value and the second one is optional and is the message to be shown after the assert is performed.

The done() method must be called in order to terminate the suite. This call was placed in the callback function of the run() method, see line 7. That means that it will be executed after all the previous steps are done.

Conclusion

CasperJS is a useful tool for automating and testing web applications, being very easy and fast to install. It provides high-level methods that facilitate things as clicking buttons, filling forms, capturing screenshots of a page or only parts of it, downloading resources, scraping Web contents. It has a well-defined API and a documentation that is very helpful, being straightforward and concise.

If you want to automate the interaction with a web page or test it, CasperJS is definitely a good choice.

More Software Testing and JavaScript Resources

• Software Testing Magazine
• Software Testing Tutorials and Videos
• JavaScript Tutorials and Videos

Click here to view the complete list of tools reviews