简介

我正在使用casperJS和grunt casper插件来自动测试我们的新GUI框架，只是有一个关于在casper.eevaluate((函数中运行jQuery/JS代码以指出捕获它们的元素的问题。

创建功能的第一步

起初，我构建了casperJS HowTo中描述的测试，如下所示：

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();});
});

这很好，起初我创建了一个DIV，其中包含恶意元素的测量值和位置。可以在屏幕截图上验证。

第二步使其成为通用的UtilFunction

但由于我有很多测试需要这个功能来在测试失败时截屏，我假设创建一个Utils.js，将其包含在脚本中，并在需要时使用参数调用该函数，所以我创建了这个：

Gruntfile(因为我使用grunt-casper，所以脚本的include就在这里，它只是一个简单的include，没有任何特定内容(

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);
  };

调用Test.js中的函数casper.test.boot('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();});
});

现在出现问题

特定于casper的函数(casper.capture(在包含的js文件中工作，但casper.eevaluate未运行。。。。从来没有，我调试并记录了这个，但我不能在这里使用这个功能。

所以我的问题是，我能在这里做什么？我需要在这里使用jQuery功能，尤其是在对DOM内容进行屏幕截图之前对其进行标记评估

我认为这与以下评估机制有关：

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

如果有人能在这里帮助我，我将非常高兴。