在PhantomJS 2中运行测试时从Karma截取屏幕截图？

Question

我需要一种在测试过程中截取屏幕截图的方法，该测试使用QUnit和Karma在PhantomJS 2.0.1中运行

我找到了这个命令：

window.top.callPhantom('render');

这不会引发任何错误，但似乎不起作用，或者至少，我不知道在哪里寻找截图。

有任何线索吗？

Answer 1

找到了办法！

解决方案

我必须编辑我的自定义PhantomJS自定义启动器，添加一个选项：

PhantomJSCustom: {
    base: 'PhantomJS',
    options: {
        onCallback: function(data){
            if (data.type === "render") {
                // this function will not have the scope of karma.conf.js so we must define any global variable inside it
                if (window.renderId === undefined) { window.renderId = 0; }
                page.render(data.fname || ("screenshot_" + (window.renderId++) + ".png"));
            }
        }
    }
}

如您所见，我们正在定义onCallback选项，它将被注入phantomjs启动的脚本中。 然后，该脚本将包含：

page.onCallback = <our function>

现在，我们可以使用callPhantom让PhantomJS运行我们onCallback函数的内容并使用所有原生的PhantomJS方法。

用法

现在，您可以在测试中使用函数：

window.top.callPhantom({type: 'render'});

截取将保存在应用程序根目录中的屏幕截图。

此外，如果您定义fname，您将能够为屏幕截图定义自定义路径和文件名。

window.top.callPhantom({type: 'render', fname: '/tmp/myscreen.png'});

将所有包装在一起以方便使用

我已经在我的测试中创建了一个方便的函数。 onCallback函数减少到必要的最小值，这样所有逻辑都在我的测试环境中管理：

karma.conf.js

PhantomJSCustom: {
    base: 'PhantomJS',
    options: {
        onCallback: function(data){
            if (data.type === 'render' && data.fname !== undefined) {
                page.render(data.fname);
            }
        }
    }
}

辅助

// With this function you can take screenshots in PhantomJS!
// by default, screenshots will be saved in .tmp/screenshots/ folder with a progressive name (n.png)
var renderId = 0;
function takeScreenshot(file) {
    // check if we are in PhantomJS
    if (window.top.callPhantom === undefined) return;

    var options = {type: 'render'};
    // if the file argument is defined, we'll save the file in the path defined eg: `fname: '/tmp/myscreen.png'
    // otherwise we'll save it in the default directory with a progressive name
    options.fname = file || '.tmp/screenshots/' + (renderId++) + '.png';

    // this calls the onCallback function of PhantomJS, the type: 'render' will trigger the screenshot script
    window.top.callPhantom(options);
}

积分

我从this answer获得了这个剧本，对其进行了改编，并由我自己找到了将其用于与业力合作的地方。

Answer 2

我拍摄快照的自定义幻像的Karma条目如下所示：

module.exports = function (config) {
  config.set({
    ..
    browsers: [ 'PhantomJSCustom'],
    customLaunchers: {
      'PhantomJSCustom': {
        base: 'PhantomJS',
        options: {
          onCallback: function(data){
            if (data.type === "render") {
              // this function will not have the scope of karma.conf.js so we must define any global variable inside it
              if (window.renderId === undefined) { window.renderId = 0; }
              page.render(data.fname || ("screenshot_" + (window.renderId++) + ".png"));
            }
          }
        }
      }
    },
    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing         // phantom)
      exitOnResourceError: true
    },
    ..
  })