Headless Cypress fails to render Google Maps with Map ID

[masakudamatsu]

With Map ID specified, Google Maps API appears to use WebGL, as one of the requested JS scripts is called webgl.js (which doesn't get requested when the default map style is used).

Headless Chromium, used with cypress run, appears to be known to fail with WebGL

• https://bugs.chromium.org/p/chromium/issues/detail?id=809065
• GPU is always disabled when running in headless mode. puppeteer/puppeteer#1260
• Map tiles aren't rendering in headless chrome (via puppeteer) mapbox/mapbox-gl-js#7721

For MapBox, adding an option preserveDrawingBuffer: true seems to be a solution.

• Map tiles aren't rendering in headless chrome (via puppeteer) mapbox/mapbox-gl-js#7721 (comment)
• Can not render a WebGL image for PDF -- get a black box instead puppeteer/puppeteer#1731 (comment)

What is the equivalent option for Google Maps?

cf. How to save the canvas image as a PNG with Cypress: https://glebbahmutov.com/blog/canvas-testing/#saving-the-canvas

[masakudamatsu]

We've found a temporary solution: choose raster, not vector, in the settings for a Map ID.

But this comes at the cost of performance, it seems.

• "The vector map is the same Google map your users are familiar with using, and offers a number of advantages over the default raster tile map, most notably the sharpness of vector-based images, and the addition of 3D buildings at close zoom levels. The vector map also supports some new features, such as the ability to add 3D content with WebGL Overlay View, programmatic tilt and heading control, enhanced camera control, and fractional zoom for smoother zooming." (source, emphasis mine)

When released, we should switch to the vector map.