Sometimes, when attempting to capture a full-page screenshot, the webpage does not scroll down, and only the visible viewport is captured.
When capturing a full-page screenshot, Eyes is trying to scroll the body of the page (or the document in some cases) in order to capture the whole page. However, sometimes within a specific page, there is a different scrollable element that needs to be scrolled which Eyes has not found automatically.
Sometimes this element needs to be found and specified in order to capture a full-page screenshot.
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.
An example of this method is shown below:
After finding the scrollable element and its selector, we simply insert it to the "By selector". We then capture a screenshot of the element by checking the region, and by adding the "fully" function, which tells Applitools to perform the scrolling mechanism. In Java, the code should look like this:
eyes.check("test", Target.Region(By.cssSelector("ScrollableElement")).fully());
This is supported in other SDKs as well.
Some examples of the fully interface within the Fluent API are: javascript and C#.