How to sign up in Opencart using CasperJS

As a user, registering for websites is no fun. Because it’s on a computer, it’s only slightly less annoying than filling out paper forms. Most of the time, all you want is to automate your work. If you haven’t heard of “CasperJS” you just might be living in an old era.

CasperJS eases the process of defining a full navigation scenario and provides useful high-level functions and methods. You can automate the signup process for Opencart using CasperJS.

You can learn how to install casperJS from this link http://webkul.com/blog/functional-testing-casperjs/

By default, a Casper instance won’t print anything to the console. This can be very frustrating when creating or debugging scripts, so a good practice is to always start coding a script using these settings:

var casper = require('casper').create({
verbose: true,
logLevel: "debug"
});

Using verbose settings you’ll be able to trace every step made.

Here is the script that will explain the signup process.

Firstly, we will retrieve the current page title using getTitle(). After that, we will wait until an element matching the provided selector expression exists in DOM to process the next step using waitForSelector().

var url = 'http://example.com/index.php?route=account/register';
casper.start(url, function() {
this.echo(this.getTitle());
this.waitForSelector('form[action="' + url + '"]');
});

To fill in a form we will use the fill() method.

casper.then(function(){
this.fill('form.form-horizontal', {
'firstname' : 'John',
'lastname' : 'Doe',
'email' : 'john@webkul.com',
'telephone' : '9520101010',
'address_1' : 'A-67',
'city' : 'noida',
'postcode' : '201301',
'password' : 'admin123',
'confirm' : 'admin123',
'agree' : '1',
'zone_id': '3513'
}, false);
});

After filling out the signup form, we will submit the form. Here we use then() and click() methods.

then() method is the standard way to add a new navigation step by providing a simple function. You can add as many steps as you need.

click() method performs a click on the element matching the provided selector expression.

casper.then(function(){
this.click(".form-horizontal .btn.btn-primary");
});

The site may take some time to parse your script and render the views. Therefore, we will use wait() method. After waiting 2000 milliseconds we fill out the form.

casper.wait(2000, function(){
this.echo(this.getCurrentUrl());
});

Finally, we will run the test.

casper.run(function(){
this.echo("done");
});

Here’s the full code:

/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_CasperJS
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/

var casper = require('casper').create({
verbose: true,
logLevel: 'debug',
});
var url = 'http://shikhabr.com/d4/index.php?route=account/register';
casper.start(url, function() {
this.echo(this.getTitle());
this.waitForSelector('form[action="' + url + '"]');
});
casper.then(function(){
this.fill('form.form-horizontal', {
'firstname' : 'John',
'lastname' : 'Doe',
'email' : 'john@webkul.com',
'telephone' : '9520101010',
'address_1' : 'a-63',
'city' : 'noida',
'postcode' : '201301',
'password' : 'admin123',
'confirm' : 'admin123',
'agree' : '1',
'zone_id': '3513'
}, false);
});
casper.then(function(){
this.click(".form-horizontal .btn.btn-primary");
});
casper.wait(2000, function(){
this.echo(this.getCurrentUrl());
});
casper.run(function(){
this.echo("done");
});

After preparing the script, you have to execute the command in the terminal. Here is the command.

$ casperjs OcSignup.js

Here, OcSignup.js is the js file in which we have written a script for the sign-up process. You can see the output of the above code in the terminal.