zinserjan / wdio-screenshot

A WebdriverIO plugin. Additional commands for taking screenshots with WebdriverIO.
MIT License
109 stars 43 forks source link

Add an option to disable scrolling #21

Open attiks opened 8 years ago

attiks commented 8 years ago

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 commented 8 years ago

Slightly related to #20

zinserjan commented 8 years ago

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 :disappointed:

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

bennett000 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

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