javascript - Iterating over a grid with CasperJS - Stack Overflow

admin管理员组

文章数量:1303551

I am trying to test CasperJS out, and are scraping a site which has a grid layout like:

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

If I wasn't using CasperJS I would retrieve a list of all the contains (4 i this case) and then run a method on each container which could retrieve an object with the wanted properties.

I just seem to have a hard time of doing this in CasperJS. First I tried to return the list of DOM elements in casper.evaluate(function(){....}), but it can't return DOM elements.

Then I tried to make an each loop which would push the wanted objects (4) to an array and return it in an Evalue, but it keeps returning null.

How would one go about doing something like this in CasperJS. Can I somehow return a context of a container to a method, which can return the object to the main evaluate, which can the return the collection of the objects?

I am trying to test CasperJS out, and are scraping a site which has a grid layout like:

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

If I wasn't using CasperJS I would retrieve a list of all the contains (4 i this case) and then run a method on each container which could retrieve an object with the wanted properties.

I just seem to have a hard time of doing this in CasperJS. First I tried to return the list of DOM elements in casper.evaluate(function(){....}), but it can't return DOM elements.

Then I tried to make an each loop which would push the wanted objects (4) to an array and return it in an Evalue, but it keeps returning null.

How would one go about doing something like this in CasperJS. Can I somehow return a context of a container to a method, which can return the object to the main evaluate, which can the return the collection of the objects?

• javascript
• dom
• phantomjs
• casperjs
• javascript-objects

Share Improve this question Follow edited Oct 3, 2014 at 16:15 Hemerson Varela 25.8k1818 gold badges7272 silver badges6969 bronze badges asked Jul 24, 2013 at 19:19 DofsDofs 19.3k2828 gold badges7878 silver badges124124 bronze badges 1

• 1 You're banging your head against the main concept of Casper. The separation between server and client JS. Outside of evaluate, it's server only, no DOM. The bridge is the serializable objects. The two answers explain it well. Notice how the getLinks function in the example returns an array of strings, not DOM nodes.docs.casperjs/en/latest/quickstart.html – Ruan Mendes Commented Aug 3, 2013 at 8:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9 +50

Unfortunately, you can't get a plex structure from evaluate() function, because whatever arg passed from evaluate() is sort of JSON.parse(JSON.stringify(arg)).

But it doesn't mean that you are not able to pass another kind of objects.

Here an example about how get an array with objects from 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

I'm assuming that the web context includes the JQuery library.

Tip: try to run the js code of the evaluate() function by using the browser console in order to be sure that your js code is working as expected.

The approach is correct but evaluate is sandboxed. In addition, the arguments and the return value to the evaluate function must be a simple primitive object but if it can be serialized via JSON, then it is fine. Closures, functions, DOM nodes, etc. will not work!

Instead of returning wanted object, returns a serialized version of wanted object using JSON.stringify()

本文标签： javascriptIterating over a grid with CasperJSStack Overflow