RangeError when visually diffing: The value of "offset" is out of range.

[david-boydell]

Related issue: #5668. As per 5668 I'm raising a new issue in the hope that it is reproducible in this instance.

Current behavior:

When visually diffing an element with Cypress Image Snapshot or cypress-plugin-snapshots using Cypress v4.0.0, or greater, I receive the error "RangeError: The value of "offset" is out of range. It must be >= 0 and <= 22014716. Received -13440" when attempting to compare screenshots.

I do not get this error on version 3.8.3.

Desired behavior:

The plugins work as expected on versions greater than v3.8.3

Test code to reproduce

1. Install and check cypress version with npx cypress -v

Cypress package version: 4.0.0
Cypress binary version: 4.0.0

2. Add cypress-plugin-snapshot to your project as per https://github.com/meinaart/cypress-plugin-snapshots
3. Use the following test:

describe('Signed out homepage', () => {
  it('displays the signed out banner', () => {
    cy.visit('https://www.bbc.co.uk/weatherwatchers').then(() => {
      cy.get('.banner--intro-signed-out').toMatchImageSnapshot({ imageConfig: { threshold: 0.01 } });
    });
  });
});

4. Run it once to establish the expected screenshot, then run the test again. You receive the error RangeError: The value of "offset" is out of range. It must be >= 0 and <= 22014716. Received -13440 in the results window.
5. Rerunning the same steps with cypress v3.8.3 does not produce the error.

I can paste the full error from the console if necessary, was quite verbose though.

Versions

v.4.0.0, OS X 10.14.6, Chrome Version 84.0.4147.135 (Official Build) (64-bit)

[jennifer-shehane]

Duplicate of #2034

[TeemuKoivisto]

Well this might be a duplicate but it's broken again and the original thread is locked. Can't bother to submit a proper bug report because I don't know how to reproduce this, it worked fine just a while ago. Maybe I'll just change my selector or something to get over this.

cypress_runner.js:191073 RangeError: The value of "offset" is out of range. It must be >= 0 and <= 4141436. Received 4141440
    at boundsError (internal/buffer.js:83:9)
    at Buffer.readUInt32BE (internal/buffer.js:306:5)
    at Jimp.<anonymous> (/Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/plugin-crop/dist/index.js:43:37)
    at scan (/Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/utils/dist/index.js:53:9)
    at Jimp.scanQuiet (/Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/core/dist/index.js:1262:32)
    at Jimp.cropQuiet (/Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/plugin-crop/dist/index.js:42:12)
    at Jimp.<computed> [as crop] (/Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/core/dist/index.js:1176:23)
    at crop (/Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:171:24)
    at /Users/teemu/Library/Caches/Cypress/8.7.0/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:464:17
    at processImmediate (internal/timers.js:462:21)
From previous event:
    at $Cypress.automation (http://localhost:3300/__cypress/runner/cypress_runner.js:166441:12)
    at automate (http://localhost:3300/__cypress/runner/cypress_runner.js:157468:20)
    at automateScreenshot (http://localhost:3300/__cypress/runner/cypress_runner.js:157478:10)
    at scrollAndTake (http://localhost:3300/__cypress/runner/cypress_runner.js:157548:12)
From previous event:
    at takeScrollingScreenshots (http://localhost:3300/__cypress/runner/cypress_runner.js:157551:58)
    at takeElementScreenshot (http://localhost:3300/__cypress/runner/cypress_runner.js:157661:10)
    at http://localhost:3300/__cypress/runner/cypress_runner.js:157783:14
From previous event:
    at takeScreenshot (http://localhost:3300/__cypress/runner/cypress_runner.js:157775:19)
    at Context.screenshot (http://localhost:3300/__cypress/runner/cypress_runner.js:157896:14)
    at Context.<anonymous> (http://localhost:3300/__cypress/runner/cypress_runner.js:169912:23)
    at http://localhost:3300/__cypress/runner/cypress_runner.js:168605:17
From previous event:
    at runCommand (http://localhost:3300/__cypress/runner/cypress_runner.js:168584:10)
    at next (http://localhost:3300/__cypress/runner/cypress_runner.js:168727:16)
    at http://localhost:3300/__cypress/runner/cypress_runner.js:168756:18
logError @ cypress_runner.js:191073
DevTools failed to load source map: Could not load content for http://localhost:3300/__cypress/runner/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Packages:

    "cypress": "^8.7.0",
    "cypress-plugin-snapshots": "^1.4.4",

EDIT: Ah it appears the bug came from starting to use full-screen mode with Chrome as I run the headed tests. Running headless works fine and headed too when Cypress is windowed. Yet full-screen and perhaps a combination of other variables, I'm downloading files and uploading them which might affect too. Okay, I removed the line where I trigger a download and now it works. So Chrome + headed + full-screen + file download == this bug. I might file a proper bug report but maybe this will help someone.