Page Object Pattern Implementation with CasperJS

Question

Is there anyone who have already implemented the famous "Page Object Pattern" with casperjs, it's very useful for test maintenability in the long term ?

It's very very cool to use that when you have to separe the mechanics and the purpose of your tests. it become more pleasurable to write your tests this way.

There are some examples with ruby and selenium:
http://blog.josephwilk.net/cucumber/page-object-pattern.html
https://code.google.com/p/selenium/wiki/PageObjects

Answer 1

Using the example in your second link, you can convert this to a Javascript class-like object and encapsulate in its own module:

var LoginPage = function(casper) {
    this.casper = casper;
};

LoginPage.prototype.typeUsername = function(username) {

    this.evaluate(function() {
        __utils__.findOne('input.username').value = username;
    });
};

exports = LoginPage;

and then use it in your test:

var LoginPage = require("./LoginPage.js");
var login = new LoginPage(this);
login.typeUsername("geoff");

Answer 2

Here is an exemple of Page object pattern with CasperJS to test a login feature. The page object is in a file called LoginPage.js :

function LoginPage() {

  this.startOnLoginPage = function () {
    casper.echo("base url is : " + casper.cli.options.baseUrl);
    casper.start(casper.cli.options.baseUrl + '/login');
  };

  this.checkPage = function () {
    casper.then(function () {
      casper.test.assertUrlMatch('login', 'Is on login page');
      casper.test.assertExists('form[name="f"]', 'Login page form has been found');
    });
  };

  this.fillForm = function (username, password) {
    casper.then(function () {
      this.fill('form[name="f"]', {
        'j_username': username,
        'j_password': password
      }, false);
    });
  };

  this.submitForm = function () {
    casper.then(function () {
      this.click('form[name="f"] button[type="submit"]', 'Login submit button clicked');
    });
  };
}

Then you can use this Page Object on several tests. For example :

phantom.page.injectJs('LoginPage.js');
var loginPage = new LoginPage();

casper.test.begin('Should login', function (test) {
  loginPage.startOnLoginPage();
  loginPage.checkPage();
  loginPage.fillForm('scott', 'rochester');
  loginPage.submitForm();
});

For more details and a complete example : http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html