简介

Question

简介

我正在使用casperJS和grunt-casper插件来自动化我们的新GUI框架的测试，并且只是在casper.evaluate（）函数中运行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脚本的包含就在这里，它只是一个简单的包含没什么特别的）

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

现在出现问题

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

所以我的问题是，我能在这做什么？我需要在这里使用jQuery功能，特别是在截断它之前评估标记DOM内容。

我认为它与评估工作的以下机制有关：

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

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

Answer 1

后续步骤

我现在继续，没有提供任何错误。发生了另一个问题，我想知道这里发生了什么。

但是现在神奇地输入了casper.evaluate，但我得到了参数错误

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";

无法初始化，即。 $（选择器）返回NULL，所以我试图获取HTML上下文，当我用jQuery获取DOM时，我得到了以下输出：

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

所以内容为空。

SSL问题？

现在我知道SSL和Casper的问题，正如我所说，当我在函数调用脚本中运行casper.evaluate时它运行正常，因为我设置了参数

args：[ - --ssl-protocol = any'，' - signore-ssl-errors = true'，' - web-security = no']

以GRUNT配置。

错误的页面？

现在我认为我在错误的网站上，所以我从casper.getCurrentUrl（）获取了URL，这是正确的URL，所以我在evaluate（）函数内部进行了捕获，截图是正确的也证明了我在正确的页面上。

但正如我所说的HTML内容是空的，那我该怎么办？

我认为这一定是一个小问题，也许是沙盒内容，我这里没有具体的想法。

在包含/外部脚本中运行casper.evaluate（）

简介