Geek asks and answers

Implementing a Page Object Template with CasperJS

Is there anyone who has already implemented the famous "page object template" using casperjs, is it very useful for the duration of the test?

It is great to use this when you need to separate the mechanics and purpose of your tests. it becomes more enjoyable to write your tests this way.

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

+3
source share
2 answers

Using this example in the second link, you can convert it to a class-like Javascript object and encapsulate it in your 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;

:

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

CasperJS . 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');
    });
  };
}

. :

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

: http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html

+2

More articles:


All Articles