Exemple de tests fonctionnels sur Magento avec CasperJS

Voici un exemple d’utilisation de CasperJS avec Magento qui vous permettra de tester fonctionnellement votre boutique.

Introduction

Nous avons vu dans un article précédent comment utiliser Behat Mink avec Magento. Nous allons voir comment faire la même chose mais cette fois-ci avec CasperJS.

CasperJS, c’est quoi ?

CasperJS est un programme écrit en Javascript et basé sur PhantomJS. Ce dernier permet de virtualiser un navigateur et met à disposition une API Javascript assez peu pratique à exploiter telle quelle. C’est là que CasperJS intervient car il permet de simuler facilement la navigation d’un site internet avec tout ce que cela comporte : clic de souris, remplissage/soumission de formulaire, gestion d’événements, téléchargement et même capture d’écran.

Installation de CasperJS

Comme vu précédemment, il faut installer PhantomJS et ensuite CasperJS. Nul besoin de répéter ce que le site officiel fait très bien, je vous invite donc à suivre les instructions d’installation ici. Cela ne devrait pas prendre plus de 5 minutes.

Aperçu

Avant de voir comment écrire les tests, voici ce qu’on obtient dans le terminal après avoir testé l’ajout d’un produit au panier et l’authentification d’un client :

Ecrire des tests

Bien qu’il soit tout à fait possible de lancer un fichier unique, on éprouve vite le besoin de découper nos tests en plusieurs fichiers pour plus de clarté. Commencez donc par créer un dossier où mettre vos fichiers de tests :

$ mkdir tests

Créez ensuite 2 fichiers comme ci-dessous :

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();
});

Lancer les tests

Pour lancer les tests, rien de plus simple, il suffit de lancer la commande suivante :

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

Notez que pour notre exemple nous passons en argument l’url du site à tester, ce qui facilite le lancement des tests d’un environnement à l’autre.

Vous constaterez également qu’il n’y a aucune adhérence avec Magento et que cet article sert juste à avoir un cas concret d’utilisation mais cela fonctionnerait de la même façon sur n’importe quel autre site développé dans n’importe quel autre langage.

5 réponses à “Exemple de tests fonctionnels sur Magento avec CasperJS”

    • gondo dit :

      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 dit :

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

  2. pooran dit :

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

  3. Rahul dit :

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

Laisser un commentaire

* Champs requis

Categories