Magento functional testing with casper.js

casper-feat-image

Testing can be boring and time consuming task. So why don’t we use some tools and make our lives easier? In Magento there are numerous “boring” tasks that need to be done after the first install and then again when you test a new functionality. For example, create a test account, add product to cart, go trough checkout process, add product to wishlist, compare etc.Casper.js seems like the right tool for these “repeated” tasks. So, what is casper.js!?

CasperJS is an open source navigation scripting & testing utility written in Javascript for the PhantomJS WebKit headless browser and SlimerJS (Gecko). It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks

We will skip the installation process as it is very straightforward. So let’s jump into testing right away.

We will create two scenarios for demo purpose

Scenario 1

Open home page of your Magento store, click on log in link, open “Login or Create An Account” Magento page, find the “Create an Account” button and click on it to open “Create an Account” page, fill out the form, submit it, wait to be redirected to My Account dashboard and then find inside the body text “Hello, First name Last name!”.

And here is the test:

var BASE_URL = casper.cli.get('url');
 
// Go to home
casper.test.comment('Go to home');
casper.start(BASE_URL, function() {
    this.test.pass('Home was loaded');
});
 
// Go to login page
casper.then(function() {
    this.click('div.quick-access li.last a');
	this.test.pass('login page was loaded');
});
casper.then(function() {
    this.click('div.account-login div.buttons-set button');
	this.test.pass('register page was loaded');
});
// Fill login form and submit
casper.then(function() {
    this.test.info('Current location is ' + this.getCurrentUrl());
    this.fill('#form-validate', {
        'firstname': 'stamba',
        'lastname': 'stambic',
        'email': 'stamba@stamba.com',
        'password': 'johndoe123',
        'confirmation': 'johndoe123'
    }, true);
	this.test.pass('form populated');
});
 
// Registration goes well
casper.then(function() {
    this.test.info('Current location is ' + this.getCurrentUrl());
	this.test.pass('Registered');
});
// Account dashboard welcome
casper.then(function() {
    //this.test.assertTextExists('Hello, stamba stambic!');
	this.test.assertTextExists('Hello, stamba stambic!', 'page body contains "Hello, stamba stambic!"');
    this.test.info('Current location is ' + this.getCurrentUrl());
	this.test.pass('Dashboard in');
});
 
casper.run(function() {
    this.test.done();
});

Scenario 2

Open your store home page, fill out the search form with term “sony”, search for products, on search results page select the first product, open it, add it to cart, wait for the shopping cart page to fully load and take a screenshot.

Test:

var BASE_URL = casper.cli.get('url');
 
// Go to home
casper.test.comment('Go to home');
casper.start(BASE_URL, function() {
 this.test.pass('Home was loaded');
});
 
// Fill login form and submit
casper.then(function() {
 this.test.info('Current location is ' + this.getCurrentUrl());
 this.fill('#search_mini_form', {
 'q': 'sony'
 }, true);
 this.test.pass('form populated');
});
casper.then(function() {
 this.click('div.form-search button');
 this.test.pass('Search query hited');
});
casper.then(function() {
 this.test.info('Current location is ' + this.getCurrentUrl());
 this.test.pass('Search results page');
});
casper.then(function() {
 this.click('ul.products-grid li.first a');
 this.test.info('Current location is ' + this.getCurrentUrl());
 this.test.pass('First results product opened');
});
casper.then(function() {
 this.test.info('Current location is ' + this.getCurrentUrl());
 this.test.pass('Product page');
});
casper.then(function() {
 this.click('button.btn-cart');
 this.test.pass('Add to cart');
});
casper.then(function() {
 this.test.info('Current location is ' + this.getCurrentUrl());
 this.capture('magento.png', {
 top: 0,
 left: 0,
 width: 1680,
 height: 1050
 });
 this.test.pass('Checkout Cart with image');
});
casper.run(function() {
this.test.done();
});

Now to run tests we simply run this command:

$ casperjs test magento/magento-search.js --url=http://magento.local
Run test

Run test

And here is the screenshot:

Screenshot

Screenshot as a result

So at the end of the day (and this blog post) you can now write simple tests or you can automate some of the daily basic process while working with Magento.

Hope you’ll find this useful and happy testing!


About Stanislav Mihic

Frontend Developer

Stanislav is specialized in Web and Frontend Development with technologies such as JavaScript, CSS, and HTML using agile practices.

Read more posts by Stanislav / Visit Stanislav's profile

3 comments

  1. Thanks for these explanations.

    I was wondering how you are managing to run all tests every time, with tests that modify the shop state. For instance in your example you register a new user account “stamba@stamba.com”. The first time the test will be run on an instance it will work but the next times it won’t (email already registered).

    Do you use a VM with initial data, do you delete the user account afterwards, load a SQL dump before each test or something else?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.