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. 在“现实生活”中能工作吗？也就是说，在真正的浏览器中？
2. 是否会打开一个单独的选项卡？通常，截图gem很难选择哪个选项卡来拍摄照片。
3. 允许访问本地数据吗？数据是如何加载的？
4. 这是CORS问题吗？你能断言数据在你记录javascript错误并将它们发送回脚本运行器(Webshot?)
5. Is webshot之前已经加载了吗？Selenium chromedriver现在有一个内置的截图API。

Answer 2

受Ken上述问题的启发，我逐层进行了调查。Webshot是水豚的一个相对简单的包装器，它通过幽灵gem与幽灵进行交互。Phantomjs有一些简单的教程，引导你完成与网页(http://phantomjs.org/quick-start.html#page-loading)的交互。

当我请求phantomjs加载我的页面时，我立即看到一个错误:类似于"webgl未定义“。

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

因此，虽然我的新页面在浏览器中工作得很好，但它在phantomjs中永远不会工作。

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

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

我们通过leaflet.js (http://leafletjs.com/)做到了这一点。

感谢大家的帮助。