<svg> snapshots are not working in headless mode

[louis-vinchon]

Using cypres 4.x.x

I have a couple

• when taking a snapshot of a parent element: there is a black box instead of the svg.
• when taking a snapshot of the svg element itself: the plugin registers an invalid PNG Fatal error reading PNG image file: Invalid IHDR data (when I try to open the png). I also sometimes get an error from the plugin when running the tests that says RangeError: The value "-530376" is invalid for option "size".

[louis-vinchon]

Strangely I have an other that works fine. I don't know what's wrong with the other two.

[jrfornes]

For anyone having errors like "RangeError: The argument 'size' is invalid. Received -1051200", take a look at your full page screenshot size - run your tests in interactive mode and see how large your screenshot size is and if it looks clipped, specifically the area you are screenshotting then you might need to increase your full page size. take a look at https://docs.cypress.io/api/plugins/browser-launch-api#See-all-Chrome-browser-switches for guidance on how to do that.

I fixed my errors with the following Cypress configuration:

setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.name === 'chrome' && browser.isHeadless) {
          // set full page screenshot size to 1920x1080
          launchOptions.args.push('--window-size=1920,1080');

          // force screen to be non-retina (to keep 1920x1080 size)
          launchOptions.args.push('--force-device-scale-factor=1');

          // disable shared memory usage (to prevent chrome from crashing)
          launchOptions.args.push('--disable-dev-shm-usage');
        }

        return launchOptions;
      });

      on('task', {
        log(message) {
          console.log(message);
          return null;
        },
      });

      // `on` is used to hook into various events Cypress emits
      // `config` is the resolved Cypress config
      require('@cypress/code-coverage/task')(on, config);

      // implement node event listeners here
      addMatchImageSnapshotPlugin(on, config);

      return config;
},