JQuery is not part of PhantomJs

Question

I am trying to use jquery with phantomjs. I tried a standalone example and it worked fine. Here is what I did:

var page = require('webpage').create(); page.open("http://www.phantomjs.org", function(status) { page.onConsoleMessage = function(msg) { console.log("message recvd: " + msg); }; var result; page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() { console.log("loading jquery"); }); setTimeout(function() { page.evaluate(function() { console.log("$(\"title\").text() -> " + $("title").text()); }); }, 1000); } 

Here is the result I got:

 loading jquery message recvd: $("title").text() -> PhantomJS | PhantomJS 

In the code snippet above, I used setTimeout () for the evaluation function, because includeJs () did asynchronously and it took some time to load jquery. If I do not use setTimeout () or use a small value for the timeout, it does not work.

However, when I try to use the same code in my application, it does not work. Here is what I have:

 var baseSetup = function(guid, page, config, request, response) { /* enable the console output inside the callback functions */ page.onConsoleMessage = function (msg) { console.log(guid + ": console msg: " + msg); }; /* used for ignoring potential alert messages when evaluating js code */ page.onAlert = function (msg) { console.log(guid + " (alert): alert msg: " + msg); }; /* suppress the error messages */ page.onError = function(msg, trace) { var msgStack = ['ERROR: ' + msg]; if (trace && trace.length) { msgStack.push('TRACE:'); trace.forEach(function(t) { msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function + '")' : '')); }); } console.error(guid + ": " + msgStack.join('\n')); }; } module.exports = function extractionDriver(responseFromUrl, responseToUser, page, request) { console.log(page.customHeaders['guid'] + ": extractionDriver, status = " + responseFromUrl.status); if(page.isLocalFile || responseFromUrl.status !== 0) { var viewportStr = page.customHeaders['viewportStr']; console.log(page.customHeaders['guid'] + ": Setting viewport size: " + viewportStr); var viewportObj = parseViewport(viewportStr); page.viewport = viewportObj; page.evaluate(function(w,h) { document.body.style.width = w + "px"; document.body.style.height = h + "px"; }, viewportObj.width, viewportObj.height); page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() { console.log("loading jquery"); }); setTimeout(function() { page.evaluate(function() { console.log("$(\"title\").text() -> " + $("title").text()); }); }, 1000); } 

And this is what I see when the application starts:

  d8db6045-a0e8-11e4-a619-6949593d958d: ERROR: ReferenceError: Can't find variable: $ TRACE: -> phantomjs://webpage.evaluate(): 3 -> phantomjs://webpage.evaluate(): 4 -> phantomjs://webpage.evaluate(): 4 

The jquery download log line is never printed, and jquery is never loaded.

I tried wrapping the calculate () function inside the includeJs () callback, but that didn't work either (no console logs were printed).

What could be wrong here? Please let me know if I need to provide more information.

Answer 1

This is why page.includeJs has a callback, so you can put code that depends on jQuery. The callback is called when the JavaScript link is already loaded. Welcome to another level on the road to the hellish return journey.

I tried once, although for some reason this did not work. The workaround was to set the global variable in the includeJs and use waitFor to expect the global variable to be set outside of the includeJs callback.

 var _loadIndicator = false; page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() { _loadIndicator = true; }); waitFor(function check() { return _loadIndicator; }, function onReady() { page.evaluate(function() { console.log("$(\"title\").text() -> " + $("title").text()); }); }, 10000); 

Answer 2

I just have problems with this, but my mistake is that I tried phantom.injectJs and not page.injectJs (jerk). And then if status is success , put

 page.injectJs('lib/jquery.min.js'); 

and try

 page.evaluate(function(){ console.log($("body").length); });