如何将对象传递给CasperJS函数

How to pass an object to a CasperJS function

本文关键字：CasperJS 函数 对象      更新时间：2023-09-26

我正在为工作编写一些测试代码，并试图找出它抛出错误的原因。我使用面向对象的方法来实现这一点，以便保持我的主脚本尽可能干净。我有一个包含所有元素路径的脚本，名为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");
}

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功能:

<<p> 作为模块/strong>

elements.js 

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

script.js 

var elements = new require("/path/to/elements.js");
<<p> 作为对象/strong>

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

我解决了这个问题，通过我的菜鸟大脑屁。在我的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();
    });
});

现在，测试正常运行。

相关文章：