Question

是否有人已经使用casperjs实现了着名的“页面对象模式”，从长远来看，它对测试维护非常有用吗？

当你必须分离测试的机制和目的时，使用它非常非常酷。以这种方式编写测试会变得更加愉快。

有一些红宝石和硒的例子：
http://blog.josephwilk.net/cucumber/page-object-pattern.html
https://code.google.com/p/selenium/wiki/PageObjects

Answer 1

使用第二个链接中的示例，您可以将其转换为类似Javascript类的对象并封装在自己的模块中：

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");

Answer 2

以下是使用CasperJS测试登录功能的Page对象模式的示例。页面对象位于名为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');
    });
  };
}

然后，您可以在多个测试中使用此Page Object。例如：

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

使用CasperJS实现页面对象模式

2 个答案: