cypress-image-snapshot: snapshots recorded during `cypress run` mismatch `cypress open`

I would refer to this issue in Cypress for this one: https://github.com/cypress-io/cypress/issues/3324

Cypress’s current recommendation is to only take screenshots for comparison during cypress run. There’s further explanation here: https://github.com/cypress-io/cypress/issues/3324#issuecomment-542414532

You could write logic to disable screenshotting during cypress open by using the isInteractive config option or browser.isHeadless option. https://docs.cypress.io/api/cypress-api/browser.html#Screenshot-only-in-headless-browser

if (Cypress.config('isInteractive')) {
  // interactive "cypress open" mode
} else {
  // "cypress run" mode
}

Cypress.Commands.overwrite('screenshot', (originalFn, subject, name, options) => {
  // only take screenshots in headless browser
  if (Cypress.browser.isHeadless) {
    // return the original screenshot function
    return originalFn(subject, name, options)
  }

  return cy.log('No screenshot taken when headed')
})

// only takes in headless browser
cy.screenshot()

My workaround is to only capture images in headless mode.

 Cypress.browser.isHeadless
    ? cy.matchImageSnapshot()
    : cy.log('Snapshot skipped in headed mode.')

I get the same issue.

cypress.json

{
  "viewportWidth": 1400,
  "viewportHeight": 660
}

commands.js

addMatchImageSnapshotCommand({
  failureThreshold: 0.003, // threshold for entire image
  failureThresholdType: "percent", // percent of image or number of pixels
  customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
  capture: 'viewport', // capture viewport in screenshot
)}

When I run tests in cypress open I get a snapshot resolution of 1400x600. When I run in cypress run I get a snapshot of 1280x660

One strange behaviour is that if i remove the viewport config from cypress.json i get a snapshot of 1000x660, which is the default viewport.

If i change cypress.json to

{
  "viewportWidth": 1390,
  "viewportHeight": 650
}

Then recorded snapshot in cypress run mode changes to 1280x650, so i reacts to viewportHeight but not to viewportWidth.

If you have a custom viewport setting, viewportWidth defaults to 1280.

Trying to overwrite matchImageSnapshot, I got the error:

Cannot overwite command for: matchImageSnapshot. An existing command does not exist by that name.

Overwriting screenshot I got the error:

Image was NaN% different from saved snapshot with undefined different pixels.
See diff for details: undefined

Asserted the headed vs headless mode seem to work but looks clumsy:

  Cypress.browser.isHeadless
    ? cy.matchImageSnapshot({
        customSnapshotIdentifier: 'in-iframe/conversation-is-open',
        failureThreshold: 0.03,
        failureThresholdType: 'percent', // percent of image or number of pixels
      })
    : cy.log('No screenshot taken when headed');

I ran it in gitlab ci, and there’s a mismatch between the images taken by the ci and taken locally, with the same cypress command cypress run

Seems like cypress run only takes screenshot of the visible screen, and cypress open scrolls and screenshots the entire page

I recorded now using cypress open and then did cypress run and this is the error:

Error: Image size (360x640) different than saved snapshot size (360x3566).