理解CasperJS中的evaluate函数

Question

我想了解在哪种情况下我应该或必须使用该evaluate功能.

我已经阅读了有关evaluateCasperJS功能的API文档,但我不确定在哪种情况下我应该使用这个函数.DOM上下文是什么意思？有人可以提供一个例子吗？

Answer 1

CasperJS文档很好地描述了casper.evaluate()它的作用.

回顾一下:您传递将在DOM上下文中执行的函数(您也可以将其称为页面上下文).您可以将一些原语作为参数传递给此函数并返回一个原语.请记住,您传递给的此函数evaluate必须是自包含的.它不能使用在此函数之外定义的变量或函数.

CasperJS为日常任务提供了许多好的功能,但是当您需要自定义功能来执行某些操作时,可能会遇到这种情况.evaluate基本上是要做的

1. 从页面中检索一些值,以便在脚本中根据它执行操作
2. 除了单击或填写表单之外,以某种方式操作页面
3. 第1点和第2点的组合.

例子

您可能需要一个通用函数来checked从复选框中获取属性.CasperJS目前仅提供getElementAttribute在这种情况下不起作用的功能.

function getChecked(cssSelector){
    return document.querySelector(cssSelector).checked;
}

if (casper.evaluate(getChecked, selector)){
    // do something
} else {
    // do something else
}

在大多数情况下,它只是您想要使用的偏好.如果您有data-uid每个li元素的用户列表,那么您至少有2种可能性来检索uid.

卡斯帕只:

var uids = casper.getElementsAttribute('ul#user-list > li', 'data-uid');

卡斯帕 - 评估:

var uids = casper.evaluate(function(){
    return Array.prototype.map.call(document.querySelectorAll('ul#user-list > li'), function(li){ return li["data-uid"]});
});

关于操纵一切皆有可能,但取决于你想做什么.假设您想要截取网页的截图,但有些元素您不希望出现在那里.或者您可以将自己的CSS添加到文档中.

删除元素:

function removeSelector(cssSelector){
    var elements = document.querySelectorAll(cssSelector);
    Array.prototype.forEach.call(elements, function(el){
        el.parent.removeChild(el);
    });
}
casper.evaluate(removeSelector, '.ad'); // if it would be that easy :)

通过CSS更改网站外观:

function applyCSS(yourCss){
    var style = document.createElement("style");
    style.innerHTML = yourCss;
    document.head.appendChild(style);
}
casper.evaluate(applyCSS, 'body { background-color: black; }'); // non-sense

根

CasperJS建立在PhantomJS之上,因此继承了它的一些怪癖.PhantomJS文档说明了page.evaluate()这一点:

注意:函数的参数和返回值evaluate必须是简单的原始对象.经验法则:如果它可以通过JSON序列化,那么它很好.

闭包功能,DOM节点等,将不工作!