Capture scroll position

[twokul]

Hello!

I have found a similar issue https://github.com/percy/percy-cypress/issues/2 on the topic. I was wondering what would it take to implement something like this.

After looking at @percy/cli, it seems like we could potentially use prepareDom to denote the elements that have a scrollTop value that is not equal to 0 and store that value as an attribute. Later, the attribute could be used during the (re)hydration.

I'm happy to land a hand (if at all feasible) to implement something like that. I will need some guidance though 😄

Let me know what you think! 🍻

Edit 1: We could potentially use PercyScript for that but it seems to be deprecated.

[Robdel12]

Hey @twokul! This isn't something we'll likely add support for, it would require large changes to the rendering infrastructure to also scroll the page to the exact place each time (and JS is disabled for a vast majority of screenshots in Percy).

Are you looking to capture the scroll position of a scrollable element within the main page or the scroll position of a screenshot in general?

[twokul]

👋 @Robdel12!

Are you looking to capture the scroll position of a scrollable element within the main page or the scroll position of a screenshot in general?

Within the main page, yeah.

Is it safe to use PercyScript for that then? What's your recommendation here?

[Robdel12]

All our SDKs use the same underpinnings (and the same infrastructure), so it'll be the same for any SDK. You won't be able to capture a scrollable div within the main page right now. Any state that's not encoded into the DOM will either need to be serialized or lost.

We could possibly explore serializing that position into the DOM with an inline CSS translate, but feels like there could be a lot of diffs that come from that. If that scroll position is off by anything (0.5px), there will be diffs. You could try this out yourself in your test suite to see if it'd be accurate or not. Before calling percySnapshot, you could serialize the scroll position with CSS into the DOM. So when we capture the DOM it should have the right position.

[mmun]

Does the code in the execute option run on Percy's servers? Would it make sense to make it something like

let scrolledElements = document.querySelectorAll('[data-percy-scroll-top]');
for (let element of scrolledElements) {
  element.scrollTop = element.dataset.percyScrollTop;
}

[Robdel12]

Does the code in the execute option run on Percy's servers?

It doesn't, and that's only for for the snapshot command (not the ember SDK). That runs any JS before the DOM snapshot is captured. JS is disabled in Percy's browsers because almost no app is prepared to handle re-hydration from that kind of captured state (weird things happen)

If you want to capture this state, you'll have to serialize it into the DOM that's being captured. I'm skeptical it'll produce deterministic results -- it hasn't in the past.

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 28 days with no activity.

[mysticdevx]

Hey, this issue is closed but it is still a valid one, and if there's any solution/workaround, please let us know.