CODEWITHSUNDEEP
javascriptphantomjscasperjs
TechnoCorner
TechnoCorner

Reputation: 5135

CasperJS screenshot gives a blank screen

I've been banging my head with this one.

I'm running on casperjs 1.1.0-beta3 using phantomjs 1.9.8

I'm trying to capture an image from url and save it a file.

This is my command:

casperjs --proxy-type=none --ssl-protocol=any /home/casper-capture.js http://url.com/demo/demo /home/demoScreenshot.png

This is my casper-capture.js

/**
* capture image from url and save it to file.
**/
var casper = require('casper').create({
    verbose: true,
    logLevel: "debug",
     viewportSize: {
        width: 2300,
        height: 1200
    },
    pageSettings: {
        webSecurityEnabled: false,
        loadImages:  true,        // The WebPage instance used by Casper will
        loadPlugins: true         // use these settings
    }
});
// delay before image capturing
var delay = 60000;
//timeout delay for loading
var timeoutForLoading = 10 * 60000;
// image source url.
var url = casper.cli.args[0];
// image output path
var path = casper.cli.args[1];

casper.start().zoom(4).thenOpen(url, function urlCaptureClouser() {
    this.wait(delay, function(){
        casper.waitFor(function check() {
            return this.evaluate(function() {
                return document.querySelectorAll('.fa-spin').length +
                        document.querySelectorAll('.chart-loading').length == 0;
            });
        }, function then() {
           this.capture(path);
        }, function then() {
            this.capture(path);
        }, timeoutForLoading);
    });
});

casper.run();

I'm getting a "blank" screen. :-(

When I run it on my local system. It works! I'm not sure what I am doing wrong.

Can someone please pin point my issue?

Console log (with error logging):

[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
[debug] [phantom] opening url: <URL>, HTTP GET
[debug] [phantom] Navigation requested: url=<URL>, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "<URL>"
Error: TypeError: 'undefined' is not an object (evaluating 'Object.assign.apply')
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step urlCaptureClouser 2/2 <URL> (HTTP 200)
[info] [phantom] Step urlCaptureClouser 2/2: done in 329ms.
[info] [phantom] Step _step 3/3 <URL> (HTTP 200)
[info] [phantom] Step _step 3/3: done in 351ms.
[info] [phantom] wait() finished waiting for 60000ms.
[info] [phantom] Step _step 4/4 <URL> (HTTP 200)
[info] [phantom] Step _step 4/4: done in 60358ms.
[info] [phantom] waitFor() finished in 41ms.
[info] [phantom] Step then 5/5 <URL> (HTTP 200)
[debug] [phantom] Capturing page to /home/dmeo1991.png
[info] [phantom] Capture saved to /home/dmeo1991.png
[info] [phantom] Step then 5/5: done in 60674ms.
[info] [phantom] Done 5 steps in 60674ms
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///usr/lib/node_modules/casperjs/bin/bootstrap.js. Domains, protocols and ports must match.

Upvotes: 0

Views: 1719

Answers (1)

Artjom B.
Artjom B.

Reputation: 61892

Your log revealed "Error: TypeError: 'undefined' is not an object (evaluating 'Object.assign.apply')" which might be responsible for a blank screen, because none of the JavaScript was actually executed.

You either need to upgrade to PhantomJS 2.x (the engine behind PhantomJS 1.x is more than 5 years old now) or add a polyfill. I've copied the polyfill from MDN:

casper.on('page.initialized', function(){
    this.evaluate(function(){
        // Polyfill...
        if (typeof Object.assign != 'function') {
          Object.assign = function(target) {
            'use strict';
            if (target == null) {
              throw new TypeError('Cannot convert undefined or null to object');
            }

            target = Object(target);
            for (var index = 1; index < arguments.length; index++) {
              var source = arguments[index];
              if (source != null) {
                for (var key in source) {
                  if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key];
                  }
                }
              }
            }
            return target;
          };
        }
    });
});

casper.start(...)...

Upvotes: 2

Related Questions