Add "Offset" Option for Element Scrolling when Making a Screenshot

[emilyrohrbough]

Pulling forward from zinserjan/wdio-screenshot#87 (this should be huge if we could address this!! 😄 🙏 )

Summary

I would like to be able to pass a cropElement option (maybe a better name 😄) to the makeElementScreenshot(), such that when an element is larger than the viewport, a screenshot is taken of the visible portion of the element.

Currently, when using the wdio-visual-regression service, when using checkElement() and an element is larger than the viewport, the screenshot fails because the BaseStrategy attempts to scroll the element in view. The error outputs are a bit unclear as to why until digging through code.

Outputs typically received:

endX is out of range

or

endY is out of range

Use Cases

There are instances "chopping" the visible element is desired. For example, when creating a slide-panel React component, we close the panel, it is placed off-screen using css using transform: translate3d(100%, 0, 0); and then is set to visibility: hidden;. Using checkElement(), we cannot take a screenshot.

Solution

Add a screenshot option to return the the documentX and documentY values if the start/end x/y values are too large.