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.
Summary
I would like to be able to pass a
cropElementoption (maybe a better name 😄) to themakeElementScreenshot(), 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:
or
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 tovisibility: hidden;. UsingcheckElement(), we cannot take a screenshot.Solution
Add a screenshot option to return the the
documentXanddocumentYvalues if the start/end x/y values are too large.