Webshot gem没有捕获完成的页面

Question

我试图拍摄使用mapbox生成的地图的屏幕截图。我成功截取屏幕截图，直到我开始将数据存储在一个文件中，如果你有大量数据，mapbox会建议你。 （https://www.mapbox.com/help/working-with-large-geojson-data/#store-geojson-at-url）

现在我得到一个白色的屏幕。

我添加了超时。我等了多久似乎并不重要。

我相信数据应该通过Ajax加载。我正在针对本地运行的Web服务器运行它。当我使用Web浏览器查看页面时，我看到了对数据文件的请求。通过Webshot加载页面时，不会尝试加载数据文件。在尝试加载数据之前，某些内容阻塞或以其他方式停止。

有什么想法吗？

Answer 1

1. 它是否适用于现实生活＆＃34;？也就是说，在真正的浏览器中？
2. 是否打开一个单独的标签？通常情况下，屏幕截图宝石无法选择要拍照的标签。
3. javascript 是否允许访问本地数据？如何加载数据？
4. 这是一个CORS问题吗？你能断言在截取屏幕截图之前加载了数据吗？
5. 你能记录javascript错误并将它们发送回脚本运行器（Webshot？）
6. webshot是你唯一的选择吗？ Selenium chromedriver现在有一个内置的截图API。

Answer 2

受到肯的上述问题的启发，我逐层研究。 Webshot是一个相对简单的capybara包装器，它通过poltergeist gem与phantomjs相互作用。 Phantomjs有一些简单的教程，可以引导您完成与网页的交互（http://phantomjs.org/quick-start.html#page-loading）。

当我让phantomjs加载我的页面时，我立即看到了一个错误：类似于＆＃34; webgl未定义＆＃34;。

我使用的是Mapbox GL JS，它需要webgl。 Phantomjs不支持webgl（http://phantomjs.org/supported-web-standards.html）。

所以，虽然我的新页面在浏览器中运行良好，但它永远不会在phantomjs中运行。

我感到困惑的部分原因是该页面的早期版本在浏览器和幻像中都有效。然后我发现我们做了一个更改，这个更改间接地将我们的Mapbox js库从Mapbox.js改为mapbox-gl.js。

解决方案是使用mapbox.js（而不是Mapbox-gl.js）。

我们是通过leaflet.js（http://leafletjs.com/）完成的。

感谢大家的帮助。