在PhantomJS 2中运行测试时从Karma截屏? [英] Take screenshot from Karma while running tests in PhantomJS 2?

问题描述

在使用QUnit和Karma在PhantomJS 2.0.1中运行的测试中，我需要一种截屏的方法.

I need a way to take a screenshot during a test which uses QUnit and Karma to run inside PhantomJS 2.0.1

我找到了以下命令:

window.top.callPhantom('render');

这不会引发任何错误，但似乎不起作用，或者至少，我不知道在哪里可以找到所截取的屏幕截图.

That doesn't throw any error but doesn't seem to work, or at least, I don't know where to look for the taken screenshot.

有任何线索吗?

推荐答案

找到了方法！

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

I had to edit my custom PhantomJS custom launcher adding an option:

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启动的脚本中. 然后，该脚本将包含:

As you can see, we are defining the onCallback option, it will be injected inside the script launched by phantomjs. The script, then, will contain:

page.onCallback = <our function>

现在，我们可以使用callPhantom要求PhantomJS运行onCallback函数的内容，并使用所有本机PhantomJS方法.

Now, we are able to use callPhantom to ask PhantomJS to run the content of our onCallback function and use all the native PhantomJS methods.

现在，您可以在测试中使用以下功能:

Now, you can use in your tests the function:

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

获取屏幕快照，该屏幕快照将保存在应用程序的根目录中.

To take a screenshot that will be saved in the root directory of your application.

此外，如果您定义fname，则可以为屏幕截图定义自定义路径和文件名.

Additionally, if you define the fname you'll be able to define a custom path and file name to your screenshot.

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

---

打包在一起以方便使用

我创建了一个方便的函数以在测试中使用.将onCallback函数降低到必要的最低限度，这样就可以在我的测试环境中管理所有逻辑:

---

Pack all together for ease of use

I've created an handy function to use inside my tests. The onCallback function is reduced to the minimum necessary, in this way all the logic is managed inside my test environment:

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

helper

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

---

信用

我从此答案中获得了该脚本，对其进行了修改并自己找到了可以与之一起使用的地方业力.

---

Credits

I got this script from this answer, adapted it and found by myself where to put it to make it work with karma.

这篇关于在PhantomJS 2中运行测试时从Karma截屏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！