使用 CasperJS 遍历网格答案

【问题标题】：Iterating over a grid with CasperJS使用 CasperJS 遍历网格
【发布时间】：2013-07-24 11:00:01
【问题描述】：

我正在尝试测试 CasperJS，并且正在抓取一个具有如下网格布局的网站：

|Name      |Name      |
|Title     |Title     |
|Image     |Image     |
|Something |Something |
|----------------------
|Name      |Name      |
|Title     |Title     |
|Image     |Image     |
|Something |Something |
|----------------------

如果我不使用 CasperJS，我将检索所有包含的列表（本例中为 4 个），然后在每个容器上运行一个方法，该方法可以检索具有所需属性的对象。

我似乎很难在 CasperJS 中做到这一点。首先我尝试在 casper.evaluate(function(){....}) 中返回 DOM 元素列表，但它无法返回 DOM 元素。

然后我尝试创建一个 each 循环，它将所需的对象 (4) 推送到一个数组并在 Evalue 中返回它，但它一直返回 null。

如何在 CasperJS 中做这样的事情。我能否以某种方式将容器的上下文返回给方法，该方法可以将对象返回给主评估，该方法可以返回对象的集合？

【问题讨论】：

您正在与 Casper 的主要概念发生冲突。服务端和客户端JS的分离。在评估之外，它只是服务器，没有 DOM。桥是可序列化的对象。这两个答案很好地解释了它。注意示例中的 getLinks 函数如何返回字符串数组，而不是 DOM 节点。docs.casperjs.org/en/latest/quickstart.html

标签： javascript dom phantomjs casperjs javascript-objects

【解决方案1】：

该方法是正确的，但评估是沙盒的。此外，评估函数的参数和返回值必须是一个简单的原始对象，但如果它可以通过 JSON 序列化，那就没问题了。闭包、函数、DOM 节点等将不起作用！

不是返回想要的对象，而是使用JSON.stringify()返回想要对象的序列化版本

【讨论】：

感谢您的回复，但是您将如何将其干燥。我希望有一种方法可以采用 DOM 上下文并返回 JSON 对象（字符串化）。我不能在沙箱中调用函数并返回 DOM 元素吗？基本上我只是想找出最好的解决方案是迭代一个容器，并在 CasperJS 中从该容器中取出元素。
@dofs 在评估之外没有 DOM，你就是做不到。您必须将元素抽象为简单的可序列化对象

【解决方案2】：

不幸的是，您无法从 evaluate() 函数中获得复杂的结构，因为从 evaluate() 传递的任何 arg 都类似于 JSON.parse(JSON.stringify(arg))。

但这并不意味着你不能传递另一种对象。

这是一个关于如何从casper.evaluate() 获取包含对象的数组的示例：

var arrayResult = this.evaluate(function getGridResuls(){

    //create array
    var arrayObjects = new Array();

    //Iterates over table (grid) elements
    jQuery("table.results").each(function( index ) {

        //get table (grid)
        var tableResult = jQuery(this);

        //create basic object    
        objResult = new Object();

        //fill object properties
        objResult.name      = tableResult.find('selector to get name').text();
        objResult.title     = tableResult.find('selector to get title').text();
        objResult.image     = tableResult.find('selector to get image info').text();
        objResult.something = tableResult.find('selectot to get something').text().trim();

        //assign object to array
        arrayObjects[index] = objResult;

    });  

    //return array with objects
    return arrayObjects;

});

...
//do something with arrayResult

我假设 Web 上下文包含 JQuery 库。

提示：尝试使用浏览器控制台运行evaluate()函数的js代码，以确保您的js代码按预期运行。

【讨论】：