Skip to content

Calling screenshot() on an element that changes sizes after scrolling throws 'is invalid for option "size"' exception #6099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Keysox opened this issue Jan 6, 2020 · 6 comments · Fixed by #7962
Closed

Calling screenshot() on an element that changes sizes after scrolling throws 'is invalid for option "size"' exception #6099

Keysox opened this issue Jan 6, 2020 · 6 comments · Fixed by #7962
Assignees
@panzarino
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: screenshots 📸 type: bug

Comments

@Keysox
Copy link

Keysox commented Jan 6, 2020 •
edited by sync-by-unito bot
Loading

Current behavior:

Using the screenshot command on an element that changes sizes after scrolling causes an exception to be thrown when trying to stitch them together.


RangeError: The value "-36960000" is invalid for option "size"
    at Function.allocUnsafe (buffer.js:272:3)
    at Jimp.cropQuiet (Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/plugin-crop/dist/index.js:42:27)
    at Jimp.<computed> [as crop] (Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@jimp/core/dist/index.js:1266:23)
    at crop (Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:145:26)
    at Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:209:22
    at arrayEach (Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/lodash/lodash.js:516:11)
    at Function.forEach (Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/lodash/lodash.js:9342:14)
    at stitchScreenshots (Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:206:7)
    at Library/Caches/Cypress/3.8.1/Cypress.app/Contents/Resources/app/packages/server/lib/screenshots.js:350:21
    at processImmediate (internal/timers.js:439:21)

Desired behavior:

The screenshot command should properly create an image instead of throwing an exception.

Steps to reproduce:

See: https://github.com/Keysox/cypress-screenshot-issue

Versions

Cypress: 3.8.1
@Keysox Keysox mentioned this issue Jan 6, 2020
Open
@jennifer-shehane
Copy link
Member

I'm able to reproduce this error from the repo.

Screen Shot 2020-01-07 at 3 33 55 PM

@Keysox
Copy link
Author

Keysox commented Jan 7, 2020

Thanks @jennifer-shehane!

I currently have a WIP branch that I can put a PR up for, which fixes this issue for us:

Additionally, here are a few other ways I've thought of to fix the issue so far:

  • Change logic around stitching screenshots together
    • Unfortunately, this only handles this edge case and doesn't feel very robust
  • Re-use disableTimersAndAnimations to fix this
    • Wouldn't allow for us to take the screenshot after our animation is finished, which is needed for visual testing
  • Detect if an element has resized and if so, restart the screenshot process
    • I'd be afraid of an infinite loop with this approach
  • Pass a cypress command to screenshot that would have to resolve before one is taken
    • This feels pretty robust but would require the caller to think hard about how/when to use it

@gael-ian gael-ian mentioned this issue May 26, 2020
Closed
@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Jul 2, 2020
@jennifer-shehane jennifer-shehane added pkg/driver This is due to an issue in the packages/driver directory topic: screenshots 📸 labels Jul 2, 2020
@jennifer-shehane
Copy link
Member

This is still failing in 4.9.0. Full reproducible example:

index.html

<html>
<body>
  <main style="transform: scaleY(10); background-color: blue; height: 50vh; transition: 10s;"></main>
  <script>
    window.addEventListener('scroll', () => {
      const main = document.getElementsByTagName('main')[0]
      main.style.transform = "scaleY(1)";
    })
  </script>
</body>
</html>

spec.js

it('screenshot element', () => {
  cy.visit('index.html')
  cy.get('main').screenshot()
})

Screen Shot 2020-07-07 at 11 19 20 AM

@panzarino panzarino mentioned this issue Jul 13, 2020
Merged
2 tasks
@panzarino
Copy link
Contributor

I've noticed that this issue isn't only related to changing the size after scrolling, there's also a bug with elements that extend beyond the top of the viewport. I've created a new issue here: #7966

@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope labels Jul 14, 2020
@jennifer-shehane jennifer-shehane changed the title Calling screenshot() on an element that changes sizes after scrolling throws an exception Calling screenshot() on an element that changes sizes after scrolling throws 'is invalid for option "size"' exception Jul 14, 2020
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: needs review The PR code is done & tested, needs review stage: work in progress labels Jul 14, 2020
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jul 20, 2020

The code for this is done in cypress-io/cypress#7962, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Jul 20, 2020
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jul 21, 2020

Released in 4.11.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.11.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jul 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@panzarino panzarino

Labels
pkg/driver This is due to an issue in the packages/driver directory topic: screenshots 📸 type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix bug when taking screenshot of an element that changes size on scroll cypress-io/cypress
4 participants
@jennifer-shehane @Keysox @panzarino @CypressJosh