5

背景

我通过使用 JS 模拟用户输入，在我工作的应用程序上运行 UI 测试。JS 在运行测试应用程序的 iframe 上按顺序运行一堆鼠标和键盘触发器，我可以观察中断。我想对其进行设置，以便它可以定期截取当前状态的屏幕截图。

已经考虑

我知道这是一个重复的问题，我现在再次问这个问题，以防最近这个领域有任何发展。

我查看了http://html2canvas.hertzen.com/以截取屏幕截图，虽然它在大多数情况下都有效，但在使用大量 CSS3 和 webfonts 时似乎有问题。

我也不能随意使用服务器端方法，因为我正在开发一个单页主干应用程序，并且它不存储基于 URL 的状态（大部分情况下）。

我什至查看了 mozilla 的特定background:-moz-element()属性，但是当您想要的页面位于 iframe 中时，这不起作用。

我认为最接近我需要的是 phantomJS，它允许您操作页面并截取屏幕截图。我想避免这种情况，因为我会使用在运行测试时查看测试的能力。

那么，有人知道我可以在这里使用什么吗？只要它在 Windows 上运行，它甚至可以是一种浏览器（Firefox 或 Chrome）独有的。它不需要在所有客户端上运行，只在我的客户端上运行，所以即使我必须设置一个特殊的环境也可以，只要可以通过 JS 保存屏幕截图（虽然只在 Firefox 或 Chrome 上，所以没有 ActiveX）。

TL;DR 需要 Javascript 或 HTML5 API 来保存在 iframe 中运行的应用程序的屏幕截图。请不要付费解决方案。

4

3 回答 3

4

看起来您需要的正是我们开发的产品。我们可以从单个页面应用程序（包括状态）创建完全准确的屏幕截图。

看看http://usersnap.com

全面披露：我是 Usersnap 的联合创始人。

于 2013-09-19T10:17:19.980 回答
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

此外，值得注意的是，如果您从自己的服务器（本地）提供网络字体，它可能仍然会失败。切换到谷歌托管的网址通常会解决这个问题。可能与内容类型有关。

于 2013-08-15T13:39:30.933 回答
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

于 2013-03-16T09:22:17.297 回答