如何将回调添加到phantomJS onLoadFinished

Question

我尝试使用phantomJS自动导航某些网页。 我试图创建的是测试和导航的模式，到目前为止我得到了这个。

暂时忽略由于空数组而导致的所有潜在空指针，例如：）

testSuite.js

var webPage = require('webpage');

// Test suite definition
function testSuite(name){

    this.name=name;
    this.startDate=new Date();
    this.tests=[];
    this.add=function(test){
        this.tests.push(test);
    };
    this.start=function(){
        console.log("Test Suite ["+this.name+"] - Start");
        this.next();
    },
    this.next=function(){
        console.log("neeext");
        console.log(this.tests.length);
        var test=this.tests[0];
        this.tests.splice(0,1);
        console.log("Test ["+ test.name+"]");
        test.execute();
    };
}

//Test definition
function test(name,testFunction){
    this.name=name;
    this.execute=testFunction;
}


module.exports.testSuite=testSuite;
module.exports.test=test;

FirstPageModule.js

    var currentPage;

    function onPageLoadFinished(status) {
        var url = currentPage.url;
        var filename='snapshot.png';
        console.log("---------------------------------------------------------------");
        console.log("Status:  " + status);
        console.log("Loaded:  " + url);
        console.log("Render filename:" + filename);
        console.log("---------------------------------------------------------------");

        if(status == 'success'){
            currentPage.render(filename);
        }   

        if(status=='fail'){
            console.log("Status:  " + status);
        }

    }

function open(){
    currentPage.open("http://localhost:8080");
}

function login(){

    var username="topSecretUsername";
    var password="topSecretPassord";
    currentPage.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"); 
    currentPage.evaluate(function(user,pass) {

            $("#user").val(user);
            $("#pass").val(pass);
    },username,password);

    currentPage.render("page.png");

    currentPage.evaluate(function(){
        $('#loginButton').click();
    });

}

    function FirstPage(){
        var page = webPage.create();
        currentPage=page;
        this.testSuite = new testSuite("FirstPageModule");
        this.testSuite.add(new test("Open First Page",open));
        this.testSuite.add(new test("Login",login));

        var onLoadFinished=onPageLoadFinished;
        var callNextTest=this.testSuite.next;

        currentPage.onLoadFinished=function(status){
            onLoadFinished.apply(this,arguments);
            callNextTest();
        };

        page.onConsoleMessage = function(msg) {
          console.log(msg);
        }


    }

module.exports=new FirstPage();

PageTests.js

 var firstPage=require('./FirstPageModule.js');
 firstPage.testSuite.start();

我想要做的是顺序执行隔离函数，在每个函数执行完毕后，我会截取屏幕并调用下一个函数。

但是，出于某种原因，testSuite上的下一个方法没有被调用，或者第二个测试的方法没有被执行。

我做错了什么？

Answer 1

只需在“全局”范围内提供logName变量：

var logName;

function onPageLoadComplete(status){
    console.log(status);
    // Call the logName function
    if(typeof(logName) == "function"){
        logName();
    }
}

function test(){
    var page = webPage.create();
    this.name="TestName";
    // Update logName value as a function.
    logName = function(){
        console.log(this.name);
    }

    page.onLoadFinished = onPageLoadComplete;
}

小学，它似乎与phantomjs无关，但只有普通的javascript，我希望这是你需要的，否则请更具体地提出你的问题。

Answer 2

当页面完全加载时，您可以使用回调创建自己的page.get实现。

例如：创建一个文件模块pageSupport.js

// attach listeners
Object.prototype.listeners = {};

// store and fire listeners
Object.prototype.addEventListener = function(event, callback) {

    if (!this.listeners[event]) this.listeners[event] = [];

    this.listeners[event].push(callback);

    this[event] = function(e) {
        if (listeners[event]) {
            listeners[event].forEach(function(listener) { 
                listener.call(null, e);
            });
        }
    }
} 

// create a new reference to webpage.open method
Object.prototype._open = Object.open;

// receive an url and 
// return a function success that will be called when page is loaded.
Object.prototype.get = function(url) {
    return {
        success : function(callback) {
            this.open(url);
            this.addEventListener('onLoadFinished', function(status) {
                if (status == 'success') {
                    return callback(status);
                }
            });
        }.bind(this)
    }
}

// export as phantomjs module.
exports.Object = Object;

因此，您可以在脚本中调用此模块并按如下方式使用它：

var page = require('webpage').create();
           require('./pageSupport');

page.get('http://stackoverflow.com').success(function(status) {

  // Now this callback will be called only when the page is fully loaded \o/
  console.log(status); // logs success
});