Webshot gem is not capturing the finished page

问题:

I am attempting to take screen shots of maps generated with mapbox. I successfully took screenshots until I started storing my data in a file, which mapbox recommends if you have a lot of data. (https://www.mapbox.com/help/working-with-large-geojson-data/#store-geojson-at-url)

Now I get a white screen.

I've added a timeout. It doesn't seem to matter how long I wait.

I believe the data should be loaded via Ajax. I'm running this against a locally running web server. When I view the page using a web browser I see a request for the data file. When the page is loaded via Webshot, there is no attempt to load the data file. Something blocks or it otherwise stops before it tries to load the data.

Any ideas?

回答1:

1. Does it work in "real life"? That is, in a real browser?
2. Is it opening a separate tab? Often, the screenshot gems have trouble choosing which tab to take the picture.
3. Is the javascript allowed to access local data? How is the data getting loaded?
4. Is this a CORS issue? Can you assert that the data is loaded before taking the screenshot?
5. Can you record javascript errors and send them back to the script runner (Webshot?)
6. Is webshot your only choice? Selenium chromedriver now has a built-in screenshot API.

回答2:

Inspired by Ken's questions above, I investigated layer by layer. Webshot is a relatively simple wrapper around capybara, which interacts with phantomjs via the poltergeist gem. Phantomjs has some simple tutorials that step you through interacting with web pages (http://phantomjs.org/quick-start.html#page-loading).

When I asked phantomjs to load my page I immediately saw an error: something like "webgl not defined".

I was using Mapbox GL JS, which requires webgl. Phantomjs does not support webgl (http://phantomjs.org/supported-web-standards.html).

So, while my newer page worked fine in a browser, it was never going to work in phantomjs.

Part of my confusion was that an earlier version of the page worked in both the browser and phantomjs. Then I discovered that we made a change and that change indirectly changed our Mapbox js library from Mapbox.js to mapbox-gl.js.

The solution was to use mapbox.js (not Mapbox-gl.js).

We did this via leaflet.js (http://leafletjs.com/).

Thanks for the help everyone.