In your tests, you might have scrollable elements within the main content, which you wish to visually validate.
For example, "step 4" in the Applitools tutorial contains a scrollable element:
As you can see in the example above, the viewport doesn't reveal the full element. In order to solve this issue, and visually validate the scrollable elements, Applitools Eyes can automatically scroll and stitch the element to capture the entire contents of the region.
In order to determine which element is scrollable, we can investigate using the dev tools. In firefox, this is especially simple. After right-clicking on the webpage we want to investigate, and selecting "Inspect", the HTML of the webpage will be shown. In firefox, if an element is scrollable, the element will be marked with a "scroll" tag:
In other browsers, there is no scroll tag, but we can always select an element to check, and within the dev tools console, enter:
$0.scrollTop = 300
Meaning that if the selected element is scrollable, the element should move down by 300 (or any number preferred) pixels down. If nothing happens, the element is not scrollable.
After finding the requested nested element and its selector, we simply insert it to the "By selector". In the above example, the code should look like this:
eyes.check("test", Target.Region(By.id("step4Content")).fully());
Note:
The"fully" function tells Applitools to perform the scrolling and stitching mechanism.
For further reading, please find the checkRegion in nested Frames article.