Starting working on PhantomJS & CasperJS

 

PhantomJS: is a headless WebKit with JavaScript API.

 

CasperJS: is a navigation scripting & testing utility that runs on top/alongside of PhantomJS.

The Api of Phantom JS is based on JavaScript: how would you execute code in a browser? Web sites JavaScript code is sandboxed, so that it does not interact with the main tool. Nothing is rendered to the screen like Selenium, we use the command-line.

Phantom JS is a browser itself, supporting DOM manipulation, Ajax calls, Canvas elements and more. It’s able to load entire html pages for end-to-end testing and only Selenium compares with it in functionality. It is very powerful.

We are going to use:

• Mac OSX
• Terminal app
• Ruby (must be already install on your MAC)
• Git
• Homebrew
• phantomJS
• casterJS

1. Assuming we have GIT move where you want to clone (if not http://git-scm.com/download/mac):
   $ git clone git://github.com/n1k0/casperjs.git
2. Checkout the latest version of Casperjs:
   $ cd casperjs/ && git checkout tags/0.6.7
3. Create a link to the CasperJS source file:
   $ -sf ‘pwd’/bin/casperjs /usr/local/bin/casperjs
4. verify instalation:
   
   <span style="color: #339966;">$ casperjs --version</span>

   1	<span style="color: #339966;">$ casperjs --version</span>

5. general verification:
   
   <span style="color: #339966;">$ which brew &amp;&amp; which casperjs &amp;&amp; which phantomjs</span>

   1	<span style="color: #339966;">$ which brew &amp;&amp; which casperjs &amp;&amp; which phantomjs</span>

   
   
   this must diplay something like:

   1	this must diplay something like:

   
   
   <span style="color: #339966;">$ /usr/local/bin/brew $ /usr/local/bin/casperjs $ /usr/local/bin/phantomjs</span>

   1	<span style="color: #339966;">$ /usr/local/bin/brew $ /usr/local/bin/casperjs $ /usr/local/bin/phantomjs</span>

6. Running the test:
   
   
   <span style="color: #339966;">$ cd ~/Desktop $ mkdir unit_tests $ cd unit_tests $ touch googletest.js</span>

   1	<span style="color: #339966;">$ cd ~/Desktop $ mkdir unit_tests $ cd unit_tests $ touch googletest.js</span>

   
   
   Finally, using nano or vi open the googletest.js and COPY + PASTE this:

   1	Finally, using nano or vi open the googletest.js and COPY + PASTE this:

   
   
   <span style="color: #339966;">var casper = require('casper').create();</span>

   1	<span style="color: #339966;">var casper = require('casper').create();</span>

   
   
   <span style="color: #339966;">casper.start('http://www.google.com/', function() {</span>

   1	<span style="color: #339966;">casper.start('http://www.google.com/', function() {</span>

   
   this.test.assertTitle(‘Google’, ‘google homepage title is the one expected’);
   this.test.assertExists(‘form[action=”/search”]’, ‘main form is found’);
   this.fill(‘form[action=”/search”]’, {
   q: ‘foo’
   }, true);
   });
   
   1

   
   casper.then(function() {
   this.test.assertTitle(‘foo – Recherche Google’, ‘google title is ok’);
   this.test.assertUrlMatch(/q=foo/, ‘search term has been submitted’);
   this.test.assertEval(function() {
   return __utils__.findAll(‘h3.r’).length >= 10;
   }, ‘google search for “foo” retrieves 10 or more results’);
   });
   
   1

   
   casper.run(function() {
   this.test.renderResults(true);
   });
   
   1

   
   
   <span style="font-family: monospace;">Finnaly run it:</span>

   1	<span style="font-family: monospace;">Finnaly run it:</span>

   
   
   1

   
   
   <span style="color: #339966;"><code>$ casperjs samples/googletest.js</code></span>

   1	<span style="color: #339966;"><code>$ casperjs samples/googletest.js</code></span>

   
   
   1

   
   
   <span style="font-family: monospace;">If TEST PASS you will end up with something like this:</span>

   1	<span style="font-family: monospace;">If TEST PASS you will end up with something like this:</span>

   
   
   1

   
   
    <a href="http://leolanese.com/blog/wp-content/uploads/2012/06/test1.png"><img class="alignnone size-full wp-image-62" title="test" src="http://leolanese.com/blog/wp-content/uploads/2012/06/test1.png" alt="" width="640" height="127" /></a>

   1	<a href="http://leolanese.com/blog/wp-content/uploads/2012/06/test1.png"><img class="alignnone size-full wp-image-62" title="test" src="http://leolanese.com/blog/wp-content/uploads/2012/06/test1.png" alt="" width="640" height="127" /></a>