3

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

It's very very cool to use that when you have to separate 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

bad_coder
  • 11,289
  • 20
  • 44
  • 72
Brice LALU
  • 173
  • 1
  • 7

2 Answers2

2

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");
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Phil Mander
  • 1,819
  • 15
  • 20
  • When I attempt to implement the above solution I get the error: " error: TypeError: Object is not a constructor (evaluating 'new LoginPage(this)')". Any idea why? I have followed it exactly. – user1523236 Sep 20 '16 at 18:39
  • First be sure sure that `LoginPage.js` is in the right location (in my example in the same directory as the script requiring it). But I think your problem might be related to the "patching require" in CasperJS. See this link http://docs.casperjs.org/en/latest/upgrading/1.1.html#require-in-custom-modules. Let me know if it works and I'll update the answer. – Phil Mander Sep 20 '16 at 19:43
  • Hey Phil, unfortunately that did not work. I will play around with it and see if I can get it working and if not I will open a new issue on stack overflow where I can post my test and page code. – user1523236 Sep 21 '16 at 13:49
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

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
jsebfranck
  • 704
  • 2
  • 9
  • 18