Showing posts with label CasperJS. Show all posts
Showing posts with label CasperJS. Show all posts

Monday, April 11, 2016

Examples of submitting login-forms using CasperJS

One of the standard use-cases of CasperJS is automation of a user logging in to a webpage.

The login-system requires CasperJS to handle:

- Filling in the username and password field
- Submitting the login-form
- Storing cookies received by the server - This is carried out automatically by CasperJS
- Resending cookies after every new HTTP-request( automatically carried out by CasperJS)

Example 1: Using this.sendKeys:



var casper = require('casper').create({
    pageSettings: {
        loadImages: false,//The script is faster when this field is set to false
        loadPlugins: false,
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
    }
});
  var x = require('casper').selectXPath;
casper.start(url-loginpage, function() {
this.sendKeys("#name_username_form_element", "username");
this.sendKeys("#name_password_form_element", "password");
});
// proceed to click submit using XPATH-expression
casper.thenClick(x(' INSERT XPATH EXPRESSION HERE'));
casper.wait(2000,function() {
casper.capture('screenpicture.png');
}),   // wait some time for page to load and take screenshot

casper.run();


XPATH-expression is easily found inspecting the login form with tools such as Chrome-developer
tool or the Firebug extension in Mozilla Firefox.

Note that sometimes it may work to skip the XPATH expression and instead use:
 
casper.then(function() {
this.clickLabel('TITLE-Login_Button');
});
 
Example 2 : Using casper.fill
 
The syntax is then :
 
 
 
casper.fill('selector', {
    'nameOfFormElement' : 'yourInput'
}, submit);
 
 
 
 
An example form with selector form#loginform and elements username and password is then filled out as follows:
 casper.fill('form#signInForm', {
    'username' : 'mynamehere',
    'password' : 'difficultpasswordhere'
}, true);
 
 
 
In the above expression the submit button is set to true, so it will automatically submit the credentials.

Sometimes it may not work due to some serverside setting. Then at first try to set to 'false' above
and use the .click() method afterwards, i.e add:
 
 
casper.then(function(){
        this.click("selector-signin-button");
    });
 
 
 
 
 
 
 






Saturday, April 9, 2016

Basic browsing in casperjs

Suppose we want to browse a site and retrieve the page title using casperjs.

First step is to require and create a new casper instance:

var casper = require('casper').create(
{   verbose: true,
    logLevel: 'debug'                              //logLevel parameter can also be 'error', 'info','warning'
    pageSettings: {
                           userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/53"

                       }
} );


The create() method will then create and return an instance of the casper class.
 Above further optional settings to the create method has been added for debugging, as well
 as a specified useragent.

Second step is to start casper and browse the target site. This is done using the
created casper instance and with it calling the start method:

casper.start(url, function() {// add code here as needed});

The "function()" above denotes a function that may be carried out once the page has been loaded

So let's assume we want to visit google.com:

casper.start(http://google.com);

To browse the google site and print its title:


casper.start(http://www.google.com, function() {
this.echo(this.getTitle(), 'INFO');
});


Messages can be printed in the following range of styles:
'INFO', 'ERROR', 'WARNING', 'COMMENT'

At the end call the run() method with the created casper object:

casper.run();


The resulting code will then be:


 var casper = require('casper').create(
{   verbose: true,
    logLevel: 'debug',
    pageSettings: {
                           userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/53"

                       }

                                      
} );


casper.start(http://www.google.com, function() {
this.echo(this.getTitle, 'INFO');
});

casper.run();



The above code is saved in a .js file and can be executed by running
casperjs filename.js








Sunday, February 21, 2016

Installing PhantomJS and CasperJS

PhantomJS is a scripted headless browser, based on the WebKit engine. It is used for automating web-page interactions and provides a JavaScript API which enables automation, taking screenshots, simulating user behavior such as submitting forms, clicking links, etc.

Although PhantomJS contains the above utilities on its own, it is easier to use together with
CasperJS  which provides a more intuitive way to script the browser-webpage workflow.

Installing PhantomJS 

cd /usr/local/share
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-i686.tar.bz2
tar xjvf phantomjs-2.1.1-linux-i686.tar.bz2


Make a symlink and point it to the package , then make symlink in /usr/local/bin to the binary in
/usr/local/share/phantomjs :


ln -s /usr/local/share/phantomjs-2.1.1 /usr/local/share/phantomjs

ln -s /usr/local/share/phantomjs/bin/phantomjs /usr/local/bin/phantomjs



The version of PhantomJS on your system can now be obtained via:


phantomjs --version


Installing CasperJS 

 cd  /usr/local/share

git clone git://github.com/n1k0/casperjs.git
cd casperjs
ln -s /usr/local/share/bin/casperjs /usr/local/bin/casperjs



The installed casperjs version can now be shown via:

casperjs --version

For more details see:
http://phantomjs.org/
http://casperjs.org/