cy.screenshot is not capturing canvas element on Chrome

[KrzGruszcz]

Current behavior

I'm running a test where a canvas screenshot is taken.
A screenshot is saved as a result. But the resulting file image is different for different browsers:

• Chrome v131
  

• Electron v118
  

Desired behavior

Canvas graphics should be saved when running tests on Chrome.

Test code to reproduce

it('canvas screenshot', () => {
  Cypress.on('uncaught:exception', () => {
    return false;
  });

  cy.visit('https://www.mapbox.com/maps');
  cy.get('.mapboxgl-canvas').last().wait(5000).screenshot('canvas');
});

Cypress Version

13.16.1

Node version

v22.12.0

Operating System

cypress/factory:5.1.1 image

Debug Logs

No response

Other

No response

[jennifer-shehane]

Hmm, I am able to recreate this in run mode, which uses the headless Chrome browser.

Running via cypress open does not result in an empty canvas in the screenshot and running cypress run --browser chrome --headed also does not result in an empty canvas.

I wanted to rule out the possibility that the canvas was not being rendered in headless mode, so I did record the run (where Test Replay is recorded) and the Test Replay displayed the canvas properly while the screenshot is blank. So this means the problem is with the screenshot somehow.

Test Replay

Screenshot in same test

It's strange that someone wouldn't have reported this before though, so I'm not sure it's a widespread issue with canvas. I know customers that do use screenshots for canvas since it's difficult to test the contents of.

I don't have a solution atm. Test Replay might be nice to use though since it accurately portrays the canvas, but that depends on your use case.