casperjs中evaluate() thenEvaluate()的讲解及使用方法

太过爱你忘了你带给我的痛 2022-08-09 06:56 165阅读 0赞

evaluate()官方文档的解释：

Signature: evaluate(Function fn\[, arg1\[, arg2\[, ...\]\]\])

Basically PhantomJS’ WebPage\#evaluate equivalent. Evaluates an expression in the current page DOM context:

casper.evaluate(function(username, password) \{  
document.querySelector('\#username').value = username;  
document.querySelector('\#password').value = password;  
document.querySelector('\#submit').click();  
\}, 'sheldon.cooper', 'b4z1ng4');

Note: For filling and submitting forms, rather use the fill() method.

Warning: The pre-1.0 way of passing arguments using an object has been kept for BC purpose, though it may  
not work in some case; so you’re encouraged to use the method described above

Understanding evaluate()  
The concept behind this method is probably the most difficult to understand when discovering CasperJS. As a  
reminder, think of the evaluate() method as a gate between the CasperJS environment and the one of the  
page you have opened; everytime you pass a closure to evaluate(), you’re entering the page and execute  
code as if you were using the browser console.

evaluate()是在casperjs环境和你所打开的网页的桥梁，也就是你使用evaluate()是在操作你当前打开的DOM文档，是casperjs环境和DOM文档的一个交互，这就像你是在用浏览器的控制台控制html内容是一样一样的。

举官方的例子看一下：

casper.evaluate(function(username, password) {
        document.querySelector('#username').value = username;  //操作当前加载到浏览器中的DOM
        document.querySelector('#password').value = password;
        document.querySelector('#submit').click();
    }, 'sheldon.cooper', 'b4z1ng4');

thenEvaluate() 官方解释：

Signature: thenEvaluate(Function fn\[, arg1\[, arg2\[, ...\]\]\])  
Adds a new navigation step to perform code evaluation within the current retrieved page DOM:  
// Querying for "Chuck Norris" on Google  
casper.start('http://google.fr/').thenEvaluate(function(term) \{  
document.querySelector('input\[name="q"\]').setAttribute('value', term);  
document.querySelector('form\[name="f"\]').submit();  
\}, 'Chuck Norris');  
casper.run();

This method is a convenient shortcut for chaining then() and evaluate() calls.

从最后的解释可以看出来 thenEvaluate()方法是then()和evaluate()方法的结合。这里的thenEvaluate()是继承上一个步骤结束后才运行的，而evaluate()方法不用等到上一个步骤运行结束就可以运行的。

参考代码：

phantom.outputEncoding="GBK";
    var casper=require('casper').create({
    	clientScripts:[
    		'jquery.js'
    	],
    	pageSettings:{
    		loadImages:false,
    		loadPlugins:false
    	},
    	logLevel: "info",  
    	verbose: true   
    });
    casper.start('http://www.baidu.com',function(){ 
    	//var a=document.getElementById('su');	
    });
    casper.wait(2000,function(){
    	casper.evaluate(function(term) {    //这里我使用的wait函数等待上一个步骤运行结束后再使用的evaluate函数 效果和直接使用thenEvaluate()是一样一样的	
    	$("#su").attr("value",term);
    }, 'CasperJS');
    });
    
    casper.wait(2000,function(){
    	this.capture('hehe1.png');
    	casper.echo(casper.getTitle());	
    });
    casper.run();