使用 CasperJS 实现页面对象模式答案

【问题标题】：Page Object Pattern Implementation with CasperJS使用 CasperJS 实现页面对象模式
【发布时间】：2014-03-18 16:28:33
【问题描述】：

有没有人已经用 casperjs 实现了著名的“页面对象模式”，这对于长期测试可维护性非常有用？

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

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

【问题讨论】：

标签： casperjs qa web-testing test-suite

【解决方案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();
});

【讨论】：

【解决方案2】：

使用第二个链接中的示例，您可以将其转换为类似 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");

【讨论】：

当我尝试实现上述解决方案时，我得到错误：“错误：TypeError：对象不是构造函数（评估'new LoginPage（this）'）”。知道为什么吗？我完全按照它。
首先确保LoginPage.js 位于正确的位置（在我的示例中，与需要它的脚本位于同一目录中）。但我认为您的问题可能与 CasperJS 中的“修补要求”有关。请参阅此链接docs.casperjs.org/en/latest/upgrading/…。让我知道它是否有效，我会更新答案。
嘿菲尔，不幸的是，这不起作用。我会玩弄它，看看我能不能让它工作，如果不能，我会打开一个关于堆栈溢出的新问题，我可以在其中发布我的测试和页面代码。