casperjs - 使用 CasperJS 实现页面对象模式

Question

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

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

有一些有关 ruby​​ 和 selenium 的示例:
http://blog.josephwilk.net/cucumber/page-object-pattern.html
https://code.google.com/p/selenium/wiki/PageObjects

Answer 1

这是使用 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