Error during screenshot capture: RangeError: Index out of range | The value of "offset" is out of range. #2034
Comments
jennifer-shehane
added
the
stage: needs investigating
|
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 |
|
I've met the same issue. Running Cypress v3.1.0 The same version works on my workstation, but not works on my laptop. |
|
This seems to be an issue of dependency "jimp" package. |
|
I am have the same problem running cypress open Cypress: 3.1.0 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. |
|
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 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. |
|
Same here. Latest Cypress, Vue CLI 3 project, macOS Mojave. |
|
same issue here. Cypress 3.1.4,
nothing changes for these screenshots in error, though they have nothing noticeable different from those working. |
|
just found a workaround which seems to work in any case (at least for all of my cases). Never call
Hope this helps. |
|
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. Thanks for not letting this down ! |
|
We are suddenly getting this issue now - though it wasn’t happening last week??! |
|
This could well be fixed when master is released since jimp is upgraded and last time I looked at the code, a lot of differences exist in the upgrade. |
|
setResolution() works for me. Windows 10 + Chrome. |
|
@bluehenry is that a custom command? |
the code looks like: context('demo', () => {
beforeEach(() => {
cy.setResolution([2560, 1440]);
cy.visit('https://google.com');
cy.wait(8000);
})
it('demo', function() {
cy.matchImageSnapshot('dashboard');
})
}); |
|
@bluehenry , this works for me too. On a headless Chrome browser, though I don't understand how. |
|
This did not happen to me on Cypress 3.8.0 trying to upgrade to Cypress 4+for a while now and this Error keep poping out... |
|
The issue is still happening, @jennifer-shehane what is the priority for fixing this or if there is a work around? |
I have the same problem and it seems to come from the 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] 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. |
|
I was running into the same error when trying to do matchImageSnapshot of an element. I was able to work around the issue by chaining a "then" statement with this function like this passed to it. const clipWorkaround = ($el) => {
const rect = $el[0].getBoundingClientRect();
const opts = {clip: {x : rect.x, y: rect.y, width: rect.width, height: rect.height } };
cy.screenshot(opts);
};The opts probably should also be using the capture: 'fullPage' to work correctly. It might be viable to select the body of the page as your element. I was originally using 'viewport' if you're digging into my code. |
|
Another reproducible example: https://github.com/masakudamatsu/line-height-picker/blob/visual-testing/cypress/e2e/visual-tests.js Cypress v4.8.0
The element to be screenshotted has SVG inside
Seems this only happens when there is vertical scroll necessary to get the full image, even if the element itself is small |
|
Quite new to the cypress and automated testing, and for me the same issue occurred. However, at least for me the issue is that if the element before has height that is of float value, the cypress tries to crop with a negative y value (-0.78125 in my case). If I force the y value to have a minimum value zero, everything proceeds smoothly. |
|
Issue appears if body is scrollable means bigger than viewport. Don't know exactly how screenshots are made but somethings is opened with the same body state except scroll position. |
|
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. 🤦
<html>
<body>
<svg width="778pt" height="308pt" style="background-color: green;"></svg>
<svg id="blue" width="778pt" height="308pt" style="background-color: blue;"></svg>
<div style="height: 300px; background-color: red;"></div>
</body>
</html>
it('works', () => {
cy.visit('index.html')
cy.get('#blue').screenshot()
})
|
cypress-bot
bot
added
stage: ready for work
|
I am experiencing the same issue, waiting for this fix to finish my mobile e2e testing. It only happens to me when I set a viewport. Thank you in advance. |
jennifer-shehane
changed the title
|
Also running into this. Seems to happen only with or elements, in Blink/Webkit browsers. |
Switch to Firefox for e2e due to cypress-io/cypress#2034
|
Part of what seems to trigger this issue is setting the viewport before taking a screenshot. It can be very inconsistent. I have a custom command to take a series of screenshots at various browser widths, and the same dimensions will work with one page but fail with another. Fiddling with the viewport X and Y can get it working in one place but will likely break another. |
|
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! |
|
is there any update on this issue? |
|
I hoped that I could workaround this issue by using |
|
I'm also getting this error frequently. I've tried several workarounds suggested in the comments above, but none of them worked. It's a real pain since our build pipeline depends on the screenshot functionality, and they are failing randomly now. Are there any plans to fix this issue? We now either have to disable all our tests, or retry until they succeed. |
|
In my case this error was caused by the behavior of the I suppose changing https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/screenshot.js#L235 to 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 Cypress.Commands.overwrite(
'screenshot',
(originalFn, subject, name, options) => {
if (subject) {
let scrollY = null;
const win = Cypress.dom.getWindowByElement(subject[0]);
return originalFn(subject, name, {
...options,
onBeforeScreenshot(...args) {
if (options.onBeforeScreenshot) {
options.onBeforeScreenshot(...args);
}
scrollY = Object.getOwnPropertyDescriptor(win, 'scrollY');
Cypress.log({
name: 'stub scrollY',
displayName: 'stub sY',
message: `${win.scrollY} => ${
win.scrollY ? win.scrollY - 1 : win.scrollY
}`,
});
Object.defineProperty(win, 'scrollY', {
value: win.scrollY ? win.scrollY - 1 : win.scrollY,
});
},
onAfterScreenshot(...args) {
Object.defineProperty(win, 'scrollY', scrollY);
if (options.onAfterScreenshot) {
options.onAfterScreenshot(...args);
}
Cypress.log({
name: 'restore scrollY',
displayName: 'restore sY',
message: `${win.scrollY}`,
});
},
});
}
return originalFn(subject, name, options);
}
); |
|
I'm getting this error too. It's preventing me from being able to use Cypress to accomplish our goals. |
Just tested this and seems to be working OK! Fixed the issue I was having. |
@jfhector try to put into |
|
@aleksandryackovlev I've tried the workaround you've suggested, and I'm still getting the same issue. Thanks for trying to help though! For now I'm getting ok results from the workaround that @iGoog suggested above. But with that workaround, the image files are not clipped very precisely, so I expect some inconsistent results when my colleagues (or the pipeline) run those tests. |
cypress-bot
bot
added
stage: needs review
|
There's a PR open to fix this here: #9281 |
cypress-bot
bot
added
stage: pending release
and removed
stage: needs review
|
The code for this is done in cypress-io/cypress#9281, but has yet to be released. |
|
Released in This comment thread has been locked. If you are still experiencing this issue after upgrading to |
and others
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_errorVersions
The text was updated successfully, but these errors were encountered: