如何将对象传递给 CasperJS 函数

Question

我正在为工作编写一些测试代码，并试图找出它抛出错误的原因。我正在使用面向对象的方法来保持我的主脚本尽可能干净。我有一个包含所有元素路径的脚本，名为 elements.js。我正在使用 phantom 将该脚本注入另一个文件，该文件包含名为 click.js 的点击方法。示例：

function Click() {

   phantom.page.includeJs('/my/path/to/elements.js');
   var element = new Elements();

   this.clickElement = function() {
      casper.then( function() {
         casper.click(element.nameOfElement);
      });
   };
}

运行我的脚本以这种方式抛出未定义的错误，但是如果我直接在我的 click.js 脚本中声明元素的路径，我的测试运行正常：

function Click() {

  var nameOfElement = ('css > path > to > element');

  this.clickElement = function() {
     casper.then( function() {
         casper.click(nameOfElement);
     });
  };
}

我想从一个来源调用所有元素路径只是为了保持我的脚本干净，正如您可以想象的那样，它们可能会变得很长，具体取决于我们测试的元素数量。我还有其他文件需要为此测试使用元素的路径，但它们遵循与我上面的 click.js 脚本片段相同的原则。

更新

这是我的 element.js 脚本的样子：

function Elements() {

   var nameOfElement = ("css path");
   var anotherElement = ("css path");

}

Answer 1

PhantomJS（和 CasperJS）有两个上下文。 page.includeJs() 和 page.injectJs() 是两个 PhantomJS 函数，它们将 JavaScript 文件包含到 DOM 中，然后在页面上下文中对其进行评估，但是您想访问您的元素路径之外页面上下文。

我假设你的 elements.js 看起来像这样：

function Elements(){
    this.someElement = "css path";
    ...
}

然后你需要读取文件并评估它：

var fs = require("fs");
var el = fs.read("/path/tp/elements.js");
eval(el);

var elements = new Elements();
console.log(elements.someElement);

您可能应该以不同的方式定义 elements.js 以利用 PhantomJS 的 require 功能：

作为模块

elements.js

module.exports = function(){
    this.someElement = "css path";
    ...
}

script.js

var elements = new require("/path/to/elements.js");

作为对象

elements.js

exports.someElement = "css path";
exports.someOtherElement = "css path";

script.js

var elements = require("/path/to/elements.js");

您可能不想每次点击都读取文件，因此您可以

var elements = require("/path/to/elements.js");
casper.clickElement = function(nameOfElement) {
    this.thenClick(elements[nameOfElement]);
};

以后像这样使用

casper.clickElement("someOtherElement");

Answer 2

我解决了这个问题，解决了我遇到的菜鸟问题。在我的 element.js 脚本中，我添加了一个简单的 get 方法，它现在可以工作了。

function Elements() {

    var someElement = "css path";

    this.getSomeElementPath = function() {
        return someElement;
    };
}

在我的 click.js 脚本中将其称为：

function Click() {

    phantom.page.injectJs('path/to/element.js');
    var element = new Elements();

    this.clickSomeElement = function() {
        casper.then( function() {
            casper.click(element.getSomeElementPath());
        });
    };
}

并且，在我的主脚本中：

'use strict':

phantom.page.injectJs('/path/to/element.js');
phantom.page.injectJs('/path/to/click.js');

var element = new Element();
var click = new Click();

casper.test.begin("Test", function (test) {

    var url = www.url.com;

    console.log(url);

    casper.start(url);

    casper.then(function() {
       click.clickSomeElement();
    });

    ....//rest of code

    casper.run(function() {
       casper.test.done();
    });
});

现在，测试正常运行。

如何将对象传递给 CasperJS 函数

How to pass an object to a CasperJS function

javascript

phantomjs

casperjs