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 ver

Answer 1

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