Example of functional tests in Magento with CasperJS

Here is an example of how to use CasperJS with Magento that will allow you to write some functional tests for your store.

Introduction

We already saw in a previous article how to use Behat Mink with Magento. We’re going to run the same tests but with CasperJS this time.

What is CasperJS?

CasperJS is a program written in Javascript and built on top of PhantomJS. The latter allows you to virtualize a browser and provides a Javascript API that is not very easy to use as is. This is where CasperJS occurs because it can easily simulate the navigation of a website with everything that entails: click, fill/submit forms, event management, download and even screenshot.

CasperJS installation

As seen above, install PhantomJS and then CasperJS. No need to repeat what the official site says, I invite you to follow the installation instructions here. This should not take more than 5 minutes.

Overview

Before seeing how to write tests, here’s what you get in the terminal after testing adding a product to cart and the customer authentication:

Writing tests

Although it is possible to run a single file, one feels the need to quickly cut our tests into multiple files for clarity. Start by creating a folder to put your test files:

$ mkdir tests

Then create two files as below:

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 product list
casper.then(function() {
    casper.test.comment('Go to product list');
    this.test.assertExists('li.nav-3-2 a', 'Found product list link');
  this.click('li.nav-3-2 a');
});
 
// Go to product view
casper.then(function() {
    this.test.info('Current location is ' + this.getCurrentUrl());
    this.test.comment('Go to product view');
 this.test.assertExists('div.category-products li.item a', 'Found product view link');
   this.click('div.category-products li.item a');
});
 
// Select options and add product to cart
casper.then(function() {
    this.test.info('Current location is ' + this.getCurrentUrl());
    this.test.comment('Select options');
    var option1 = this.evaluate(function() {
        // Selecting first available gender, should be Mens
        document.querySelector('select.super-attribute-select').selectedIndex = 1;
        return true;
    });
    // Firing onchange event to populate the second select box
    this.evaluate(function() {
        var element = document.querySelector('select.super-attribute-select');
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent('change', false, true);
        element.dispatchEvent(evt);
    });
    var option2 = this.evaluate(function() {
        // Selecting first available size, should be 8
        document.querySelector('dd.last select.super-attribute-select').selectedIndex = 1;
        return true;
    });
    this.test.assert(option1 && option2, 'Selected options');
    // Adding product to cart
    this.test.comment('Add product to cart');
    this.click('button.btn-cart');
});
 
casper.then(function() {
    this.test.assertTextExists('was added to your shopping cart', 'Product was added');
    this.test.info('Current location is ' + this.getCurrentUrl());
});
 
casper.run(function() {
    this.test.done();
});

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');
});
 
// Fill login form and submit
casper.then(function() {
    this.test.info('Current location is ' + this.getCurrentUrl());
    this.fill('#login-form', {
        'login[username]': '[email protected]',
        'login[password]': 'johndoe'
    }, true);
});
 
// Check if customer is logged in
casper.then(function() {
    this.test.assertTextExists('Hello, John Doe!', 'Customer logged in');
    this.test.info('Current location is ' + this.getCurrentUrl());
});
 
casper.run(function() {
    this.test.done();
});

Running tests

To run the tests, just run the following command:

$ casperjs test tests/ --url=http://dev.magento.local

Note that for our example we pass the URL of the site to be tested as unique argument, making it easy to run a test suite from an environment to another one.

You will also note that there is no adhesion with Magento and the main goal of this article is to have a concret use case but it would work the same way on any other site developed in any other language.

5 Responses to “Example of functional tests in Magento with CasperJS”

    • gondo says:

      official magento testing guide cover functional testing purely via PHPUnit and Selenium.
      in this case Gherkin, language used to write human readable behavior test scenarios, is used.
      basically this moves tests closer to non technical people.
      however i prefer tests written in php over those written in JS, as it gives me flexibility to prepare magento environment before executing tests.

  1. Hasan says:

    It is really nice to read your article. What about adopting TDD (Test Driven development) using casperjs?

  2. pooran says:

    // Firing onchange event to populate the second select box
    thanks for adding this step

  3. Rahul says:

    good Article.
    Can you please provide some details how we can create script to test onestepcheckout using casper js

Leave a Reply

* Required fields

Categories