Run casper.evaluate() in included / external script

Question

Introduction

I am using casperJS together with grunt-casper plugin for automating Tests for our new GUI Framework and just have a question about running jQuery / JS Code in the casper.evaluate() function to point out elements for capturing them.

First steps creating functionality

At first i build the tests a described in the casperJS HowTo like this:

casper.test.begin('LOGIN FORM TEST', function(test) {

    casper.start('http://www.sample.org');

    casper.waitForSelector("form.login-box",
    function success() {
        casper.test.assertElementCount('form.login-box > .well', 3, 'WORKS');
    },
    function fail() {

        /* Create overlay over malicious element */
        casper.evaluate(function () {

        /* Get boundaries of malicous element */
        var buffer = 6;
        var height = $(selector).height() + buffer + "px";
        var width = $(selector).width() + "px";
        var position = $(selector).offset();
        var posX = position.left + "px";
        var posY = position.top + buffer + "px";

        /* Add a overlay which matches the element and overlays it */
        $("body").append("<div id='errormarker'></div>");

        $("#errormarker")
          .css({
            'opacity': 0.4,
            'position': 'absolute',
            'top': posY,
            'left': posX,
            'height': height,
            'width': width,
            'background-color': '#f00',
            'z-index': 5000
          });
    });

    casper.test.fail('NOT COOL');
}, 200);

casper.capture('image.png');

casper.run(function() {
    test.done();});
});

This worked fine, at first i created a DIV which has the measurements and position of the malicious element. Could be verified on the screenshot.

Second step make it a general UtilFunction

But as i have a lot of tests which need this functionality for taking a screenshot when a test fails, i assumed to create a Utils.js, include it to the script and call the function with parameters whenever i need it so i created this:

Gruntfile (because i use grunt-casper the include of the script is here, its just a simple include nothing specific)

casper: {
    MyTest: {
        options: {
        includes: ['tests/testutils/Testutils.js']

Testutils.js

/**
 * Constructor of TestingUtils
 * @constructor
 */
 function Testutils() {}

/**
 * Function for creating a Screenshot with a marked malicious element for logging erroneous created objects
 * @param selector CSS selector of the element
 * @param pathForScreenshot the path where the screenshots are stored
 * @param casper the casper test object
 * @param screenshotName the name of the Screenshot which has to be created
 */
Testutils.prototype.createErrorScreenshot = function (selector, pathForScreenshot, casper, screenshotName) {

    /* Set thin border around malicous element */
    casper.evaluate(function () {

    /* Get boundaries of malicous element */
    var buffer = 6;
    var height = $(selector).height() + buffer + "px";
    var width = $(selector).width() + "px";
    var position = $(selector).offset();
    var posX = position.left + "px";
    var posY = position.top + buffer + "px";

    /* Add a overlay which matches the element and overlays it */
    $("body").append("<div id='errormarker'></div>");

    $("#errormarker")
        .css({
            'opacity': 0.4,
            'position': 'absolute',
            'top': posY,
            'left': posX,
            'height': height,
            'width': width,
            'background-color': '#f00',
            'z-index': 5000
    });
  });

  /* screenshot the whole screen with marker element */
  casper.capture(pathForScreenshot + screenshotName);

  /* Cleanup the content from marker */
  casper.evaluate(function () {
    $('#errormarker').remove();
  });

  /* Create specific screenshot of the element */
  casper.captureSelector(pathForScreenshot + screenshotName, selector);

  };

Calling the Function in Test.js casper.test.begin('LOGIN FORM TEST', function(test) {

    casper.start('http://www.sample.org');

    casper.waitForSelector("form.login-box",
    function success() {
        casper.test.assertElementCount('form.login-box > .well', 3, 'WORKS');
    },
    function fail() {
        /* THIS HERE IS NEW */
        var testutils = new Testutils();
        actUtils.createErrorScreenshot('form.login-box > .well > .form-group:nth-child(1)', tempCaptureFolder, casper, 'image.png');

    });

    casper.test.fail('NOT COOL');
}, 200);

casper.capture('image.png');

casper.run(function() {
    test.done();});
});

Problem now

The casper specific functions (casper.capture) work in the included js file, BUT casper.evaluate is not run....never, i debugged and logged this but i cannot use this functionality here.

So my question is, what can i do here? I need to use jQuery functionality here and especially evaluate for marking the DOM content before screenshotting it.

I think it has to do with the following mechanism how evaluate works:

http://docs.casperjs.org/en/1.1-beta2/_images/evaluate-diagram.png

I would be very very glad if someone can help me here.

Answer 1

Next steps

I now went on and no errors are provided. Another problem occurred and i am wondering what happens here.

But now magically casper.evaluate is entered, but i got errors that the parameters

var height = $(selector).height() + buffer + "px";
var width = $(selector).width() + "px";
var position = $(selector).offset();
var posX = position.left + "px";
var posY = position.top + buffer + "px";

could not be initialised, o.e. the $(selector) returned NULL, so i tried to get the HTML context and when i got the DOM with jQuery i got the following output:

<html><head></head><body></body></html>

so the content is empty.

SSL Problem?

Now i know the problem with SSL and Casper and as i said when i ran the casper.evaluate in the function calling script it worked fine because i set the params

args: ['--ssl-protocol=any', '--ignore-ssl-errors=true', '--web-security=no']

in GRUNT configuration.

Wrong page?

Now i thought that i am on the wrong website so i got the URL from casper.getCurrentUrl() and it is the the correct URL, so i took a capture inside of the evaluate() function, and the screenshot was correct too what proved that i am on the correct page.

But as i said the gotten HTML Content is empty, so what can i do here?

I think it must be a small problem, maybe with the sandboxed content, i do not have a concrete idea here.