PhantomJs clicks links or performs functions on a page

Question

I'm just used to PhantomJs, and still its really cool.

I am trying to crawl a site and get product data on the site. Each product page displays the default product color. When you click on a color swatch, it changes the new color, launching the function. Each clickable color swatch element is as follows:

<input type="image" id="swatch_0" onclick="pPage.getColor(0);" src="http://www.site.com/img50067.jpg"> 

getColor updates the thumbnail and price for this color. The identifier is incremented for each available color (swatch_0, swatch_1, etc.), and the argument is also passed the getColor increment. I want to iterate over each color using PhantomJs and retrieve the corresponding data for each.

I loaded the page, loaded jQuery and was able to pull out the data for the color loaded in the initial color, but nothing allows me to execute click events.

here is what i am trying:

 page.evalaute(function){ var selection = $('#confirmText').text(); // name of the color var price = $('#priceText').text(); // price for that color console.log('Price is: ' + price); console.log('Selection is: ' + selection); console.log($('#swatch_1')); $('#swatch_1').trigger("click"); selection = $('#selectionConfirmText').text(); price = $('#priceText').text(); console.log('Price is: ' + price); console.log('Selection is: ' + selection); } 

This gives me:

 console> Price is: $19.95 console> Selection is: blue console> [Object Object] console> TypeError: 'undefined' is not and object // repeating until I manually exit 

other code does not run. I also tried to fire the event without jQuery as follows:

 var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var cb = document.getElementById("swatch_1"); cb.dispatchEvent(evt); 

And by running the function directly:

 pPage.getColor(1); 

And I get the same result. Any help is appreciated.

Answer 1

If the onclick handler is specified directly in the HTML, as you have it here, you can call it directly using Javascript:

 $(function() { $('#swatch_0')[0].onclick(); }); 

I believe that you can also use the PhantomJS page sendEvent() method to create your own click click event. But it seems like this is a bit complicated, as you should call it from the PhantomJS context with the x, y position of the mouse. Unverified code:

 var elementOffset = page.evaluate(function() { return $('#swatch_1').offset(); }); page.sendEvent('click', elementOffset.left + 1, elementOffset.top + 1); 

Answer 2

not a lot of activity here for several months, but I have been working with this material lately and maybe this is the answer to your question

if jquery is already loaded as part of the page you are working on, then jquery injection will not work, you will get a description that you are describing (I found this too).

So when you enter jquery code, first make sure that it is no longer part of the context