search

applitools / eyes-cypress

Applitools Eyes SDK for cypress.io - This repository is deprecated. It has moved to https://github.com/applitools/eyes.sdk.javascript1/tree/master/packages/eyes-cypress
Other
24 stars 11 forks source link

Screenshots of React Virtualized aren't working #9

Closed cdeutsch closed 5 years ago

cdeutsch commented 6 years ago

I'm trying to use Eyes to take a screenshot of a React Virtualized Table https://github.com/bvaughn/react-virtualized

Everything in the table is missing...

eyes-screenshot

It should look like this...

regular-screenshot

I added some console.log to the eyes library source and it looks like it's properly parsing the DOM nodes into cdt...

image

...but whatever is reassembling them isn't putting them together the same.

Is there a max payload size when sendRequest is called?

Probably some quirk of React Virtualized but since I can't see the code on the other end that's about as far as I can take it.

I can point you to the Test Results in the Eyes GUI if need be.

cdeutsch commented 6 years ago

I have a hunch this is possibly a scrolling issue.

I've noticed in some other screenshots Eyes doesn't take into account what is scrolled into view in elements that have an overflow.

I wonder if it'd be possible to save the scrolling position of overflowed elements when you're parsing the DOM?

amitzur commented 6 years ago

Hi @cdeutsch, we're terribly sorry in responding to your issue! We usually take no more than a day to reply...

Your analysis was indeed correct. We currently fall short on elements which scroll internally. This is a limitation we are currently discussing, and will post any updates we have to this issue.

amitzur commented 6 years ago

While there's indeed an issue with scrolled elements, there's no reason for the content not to render properly even if it doesn't maintain the scroll position.

Could you share what project you are capturing?

I rendered successfully 2 of the examples - the list and full page grid. See here: grid-virtualized virtualized

cdeutsch commented 6 years ago

Sorry I can't share the project.

I think the difference is mine is scrolled to the bottom on initial render instead of starting at the top. scrollToAlignment="end"

Basically, if there isn't plans to support scrolling I think you can close this issue.

amitzur commented 6 years ago

There is a workaround that you might find helpful for this case. We provide a way for you to specify a script that the browser will evaluate before capturing the screenshot. So you could do something like:

cy.eyesCheckWindow({
  scriptHooks: {
    beforeCaptureScreenshot: 'document.querySelector(...).scrollTop = 1000'
  }
})

The relevant section in the docs is here: https://github.com/applitools/eyes.cypress#arguments-to-cyeyescheckwindow