背景
我通过使用JS模拟用户输入来对我正在处理的应用程序运行UI测试。 JS在iframe上依次运行一堆鼠标和键盘触发器,测试的应用程序正在运行中,我可以观察休息时间。我想设置它,以便它可以定期截取当前状态的屏幕截图。
已经考虑
我知道这是一个重复的问题,我现在再次问这个问题,以防最近这个领域有任何进展。
我看了http://html2canvas.hertzen.com/来截取屏幕截图,虽然它在大多数情况下都有用,但是当有很多CSS3和webfonts使用时它似乎有问题。
我也不能自由地使用服务器端方法,因为我正在处理单页骨干应用程序,并且它不存储基于URL的状态(大多数情况下)。
我甚至看过mozilla特定的background:-moz-element()
属性,但是当您想要的页面位于iframe中时,这不起作用。
我认为最接近我需要的是phantomJS,它允许你操纵页面并截取屏幕截图。我想避免这种情况,因为我会使用该功能来查看测试,否则我正在运行它。
那么,有没有人知道我在这里可以使用的任何东西?它甚至可以是一个浏览器(Firefox或Chrome)专用,只要它在Windows上运行即可。它不需要在我的所有客户端上运行,所以即使我必须设置一个特殊的环境,只要屏幕截图可以通过JS保存(仅在Firefox或Chrome上,所以没有ActiveX)。
TL; DR 需要Javascript或HTML5 API来保存在iframe中运行的应用的屏幕截图。请不要付费解决方案。
答案 0 :(得分:4)
答案 1 :(得分:3)
最后和phantomJS一起去了。虽然html2canvas非常适合基本用法,但是当你有很多CSS3和webfonts时,它并不是很好。
phantomJS的稳定版本虽然有一些文档存在的webfonts问题 - https://code.google.com/p/phantomjs/issues/detail?id=592
幸运的是,该用户已经构建了一个支持字体的版本,开箱即用 - http://arunoda.me/blog/phantomjs-webfonts-build.html
此外,值得注意的是,如果您从自己的服务器(本地)提供Web字体,它可能仍会失败。切换到谷歌托管网址通常会解决这个问题。可能与内容类型有关。
答案 2 :(得分:1)
由于您可以使用需要特定浏览器的解决方案,因此您可以制作Chrome扩展程序,并使用Tab API的captureVisibleTab方法。
chrome.tabs.captureVisibleTab(null, {}, function (image) {
// You can add that image HTML5 canvas, or Element.
});
来源:https://stackoverflow.com/a/4574782/2972
请查看此答案,了解有关如何从JavaScript调用扩展程序的信息:https://stackoverflow.com/a/8713547/2972