Error during screenshot capture: RangeError: Index out of range | The value of "offset" is out of range.

[rbayliss]

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

[rhoog]

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

cy.viewport(1200, 800);

to

cy.viewport(1200, 1500);

Edit: running Cypress v3.1.0

[wBingwei]

I've met the same issue. Running Cypress v3.1.0

The same version works on my workstation, but not works on my laptop.
Only happening with test runner with headed mode.

[wBingwei]

This seems to be an issue of dependency "jimp" package.
My laptop is Windows 10, 14' size, and the screen resolution is 1080P. At first, I use 125% text size, then the range error happened. But when I changed the text size to 100%, the error disappear.

[guigonc]

I am have the same problem running cypress open

Cypress: 3.1.0
SO: OS X 10.13.6
Node: 8.11.3

The strange is that I have a lot of other tests that runs ok. The test that fails looks no different from the others

it('renders form section', () => {
   cy.get('.checkbox label').click()
   cy.get('.form-section').screenshot('form-section-opened')
})

If I remove the command that does the click the screenshot works.

[mattbgold]

I have the same issue on 3.1.0, both when running locally on Windows and in a docker container using chrome.

Every call to cy.screenshot() in my spec file would produce the same error, and this was across three different viewport sizes. (1700x900, 375x812, and 768x1024).

The issue disappeared after I changed the viewports to slightly different sizes (1700x800, and 375x667), and now I seem to be able to use the original viewport sizes again without any issue.

[leeuwd]

Same here. Latest Cypress, Vue CLI 3 project, macOS Mojave.

[loicsalou]

same issue here. Cypress 3.1.4,
All my screenshots were working so far but now some of them crash with this RangeError "Index out of range". This issue is annoying, I can't build the report I need without these screenshots.
I tried the following:

• move the place of the screenshot in the code
• add some wait before
• end previous cy... command before
• take the screenshot in its own step (it(...))
• change viewport size

nothing changes for these screenshots in error, though they have nothing noticeable different from those working.

[loicsalou]

just found a workaround which seems to work in any case (at least for all of my cases).

Never call cy.screenshot('file') directly, always use some dom element and chain with .root().screenshot('file')

• simple ex. cy.get('[data-cy=myTag]').root().screenshot('file')
• different use case, to see the result of an action like opening a popup, cy.get('[data-cy=myPopupButton]').click().root().screenshot('result-screen-file' works fine.

Hope this helps.

[loicsalou]

unfortunately my workaround does not seem to always work. Some of my screenshots which were working 2 days ago are crashing today, no change on my side.
This feature is really important for my users, we intend to deliver them a "book" for each release so they can check small issues with desing like CSS bugs etc.

Thanks for not letting this down !