Skip to content
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.

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

Add an option to disable scrolling #21

Open
attiks opened this issue Aug 29, 2016 · 9 comments
Open

Add an option to disable scrolling #21

attiks opened this issue Aug 29, 2016 · 9 comments

Comments

@attiks
Copy link

attiks commented Aug 29, 2016

We want to test hover states, so we use moveToObject to position the cursor, but this tool always scroll first, hence loosing the hover.

Can we add an option to disable all scrolling?

@attiks
Copy link
Author

attiks commented Aug 29, 2016

Slightly related to #20

@zinserjan
Copy link
Owner

Can you explain me what exactly do you wanna test? What's your test case? I just want to understand this completely before we introduce some options that we may not need. I didn't really think of it before this came up.

I just tried moveToObject and this method scrolls always to the element respectively takes it into viewport. For my testcase it was always below some sticky elements 😞

I would like to support screenshots with hover states but we need to make sure that the rest looks completely the same as without hover.

@attiks
Copy link
Author

attiks commented Aug 29, 2016

We use https://github.com/zinserjan/wdio-visual-regression-service to make sure CSS changes don't introduce any regressions, so we need to check the hover state as well. To be able to do this we need to position the mouse on top of the element, but when creating the screenshot we noticed that there was a scroll even if we didn't specify a width. We also tried using the same width as the viewport.

Using the screenshot method of webdriverio was the only one that works.

@zinserjan
Copy link
Owner

I've started to think about a solution that eliminates the need of the scroll. Then it should work in theory for all kinds of screenshots (document, element and viewport screenshots). But this would require some refactoring of the code base. I would like to postpone this until the iOS integration is ready (it's nearly complete).

@attiks
Copy link
Author

attiks commented Aug 30, 2016

Let me know if there's anything I can do to help

@bennett000
Copy link

@zinserjan I would also be able to spare some cycles if you want any help.

Also, I hope this doesn't sound rude because I'm super happy that this library even exists, but do you have a ballpark timeframe on this?

Lastly, if you know of any suggestions or shortcuts I could use to get around #20 in the short term that would be awesome.

@zinserjan
Copy link
Owner

zinserjan commented Aug 31, 2016

do you have a ballpark timeframe on this?

Unfortunately not, my time is very limited in the next days.

Initially, I thought that it would be enough to remove the real browser scrolling to the top and that the virtual css-scroll does not affect the hover state, cause moveToObject does not really move the cursor. But I was wrong...

Therefore we have to restore the cursor position when necessary or we introduce a new option to hover an element.

The following could work:

  1. scroll page to top
  2. scroll page virtually and take screenshots until we reach the element that we wanna hover
  3. when element goes into the viewport we move the cursor to that element
  4. take screenshot
  5. move cursor out of viewport
  6. capture the rest of document

@attiks
Copy link
Author

attiks commented Aug 31, 2016

Or we can make it more general and add a before callback to the options, which is run after the screen is scrolled and before the screenshot is made, only thing I'm not sure of is that moveToObject might initiate a scroll if the element is not in the viewport. But if it works it can easily be reused for other use cases

@HouCoder
Copy link

I've the same problem, in my case, using browser.saveElementScreenshot will scrolls to the top of the browser(Chrome).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

No branches or pull requests

4 participants