Determining the Scrollable Element to get a Full Page Screenshot

Introduction

Sometimes, when attempting to capture a full-page screenshot using the Applitools SDKs, 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 by default (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.

To get around this, you can specify the scrollable element on the page in order to capture a full-page screenshot.

Determining the scrollable elements on a page

In order to determine which element is scrollable, we can investigate using the browser developer 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 developer tools, there is no scroll tag, but we can check if the element is the scrollable element by running a JavaScript command in the browser console.

Here are the steps:

1. Open the developer tools and look at the DOM inspector tab
2. Click on the element you believe is the scrollable element on the page
3. Run the following command in the browser console to confirm:

This command will try to scroll the element by 300 pixels. If this element is scrollable, you will see the page scroll down by 300 pixels. If the page was not scrollable, go back to step 2. above and continue to check for the scrollable element on the page.

Passing the scrollable element to the Eyes SDKs

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.

To capture the entire window with a custom scrollable element, we should instead use the scrollRootElement function in our CheckSettings builder. In Java, the code should look like this:

// Region Screenshot 
eyes.check("test", Target.Region(By.cssSelector(<ScrollableElementSelector>)).fully());  

// Window Screenshot with custom scrollable element 
eyes.check("test", Target.Window().scrollRootElement(By.cssSelector(<ScrollableElementSelector>)).fully());

This is supported in other SDKs as well:
1. Javascript Selenium 
2. C# Selenium 
3. Python Selenium 
4. Ruby Selenium