cypress: Error during screenshot capture: RangeError: Index out of range | The value of "offset" is out of range.
Current behavior:
Executing cy.screenshot() on large pages causes error. Stack trace:
RangeError: Index out of range
at checkInt (buffer.js:1180:11)
at Buffer.writeUInt32BE (buffer.js:1271:5)
at new Jimp (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/jimp/index.js:137:30)
at stitchScreenshots (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:199:17)
at /Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:295:21
at tryCatcher (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:510:31)
at Promise._settlePromise (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:567:18)
at Promise._settlePromise0 (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:612:10)
at Promise._settlePromises (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:691:18)
at Async._drainQueue (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:133:16)
at Async._drainQueues (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:143:10)
at Immediate.Async.drainQueues (/Users/rbayliss/Library/Caches/Cypress/3.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:17:14)
at runCallback (timers.js:781:20)
at tryOnImmediate (timers.js:743:5)
at processImmediate [as _immediateCallback] (timers.js:714:5)
Desired behavior:
Screenshots are captured.
Steps to reproduce:
Call cy.screenshot() on a page that exceeds 16,000,000 square pixels (in my case, the element is 1195px by 13518px). Reproduction test case: https://github.com/rbayliss/cypress-test-tiny/tree/index_error
Versions
Cypress package version: 3.0.1
Cypress binary version: 3.0.1
Chrome 67.0.3396.87 on OSX 10.13
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 14
- Comments: 38 (9 by maintainers)
Commits related to this issue
- Use Cypress for visual regression testing Switch to Firefox for e2e due to https://github.com/cypress-io/cypress/issues/2034 — committed to valor-software/ng2-charts by santam85 4 years ago
is there any update on this issue?
In my case this error was caused by the behavior of the
dom.getElementPositioning(https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/coordinates.js#L27). In some cases it returns negative values between -1 and 0 infromElViewport.topfor elements that are being captured.I suppose changing https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/screenshot.js#L235 to
y: Math.max(0, elPosition.fromElViewport.top),will fix the problem with negative offsets.Unfortunatelly, I’m not deeply familiar with the code of cypress, so I can’t predict whether any other behavior of the system will be affected or not by this change.
Can anyone tell me where else this code is used? And is this the right place in code to fix the problem?
For now I just overwrote the
screenshotcommand as a workaround and it works for me:This bug is really coming in the way of my success with visual testing with Cypress(cypress-image-snapshot/plugin). I get the out of range error only when I run with headless chrome, inside a container! I setup the viewport to (1600,900) in cypress.json. Dont use cy.viewport() anywhere in the test. I get the snapshots with cy.matchImageSnapshot() for the test- locally, in both headed and headless chrome. Also headless, locally. But not on headless-inside container!
I am on 3.8.3
Narrowed this issue down to a smaller repro so we don’t have to rely on outside repos/URLs. This is reproducible outside of any snapshot plugins.
If I open the DevTools attached to the window then the test passes without this error which is super fun. 🤦
index.htmlspec.jsDEBUG=cypress:server:screenshotlogs@jfhector try to put into
cypress/support/commands.jsthatCypress.Commands.overwrite(...code I wrote above. Maybe it would fix the issue.Also running into this. Seems to happen only with <canvas> or <svg> elements, in Blink/Webkit browsers.
cy.setResolutiondoes not exist (and seems to never exist before as the Cypress changelog doesn’t mention it at all) so it can’t be a valid workaround.I have the same problem and it seems to come from the
packages/server/lib/screenshots#cropmethod. Sometime dimensions ends with a negative value as y and jimp does’nt like it at all.You already check if calculated dimensions do not exceed image dimensions (Line 139-140). A solution may be to add a second check on dimensions not being negative.
[Edit] Sometime,
Buffer.allocUnsafereceive a negative size and raise another kind of RangeError:Buffer size is calculated from width and height, so these two should also be checked to prevent negative values.
This sounds like #6099 but, at least in my test cases, nothing is resized while screenshots are captured.
the code looks like:
I’m getting the same error when trying to create a screenshot of an area 1170px by 1317px.
My workaround is to increase the viewport from
to
Edit: running Cypress v3.1.0