How to Hide Scrollbars from Screenshots

Problem

One of the reasons for test failures when testing layouts using screenshots is the presence of scrollbars in the browser at the moment the screenshot is taken. There can be 3 scenarios where a diff occurs between the reference screenshot and the current one taken during the test run:

1. There was no scrollbar when the reference screenshot was taken, but it appeared when taking the current screenshot.
2. There was a scrollbar when the reference screenshot was taken, but it did not appear in time when taking the current screenshot.
3. There is a scrollbar on both the reference and current screenshots, but the positions, sizes, or transparency of the scrollbars differ due to the timing of when the screenshots were taken relative to the appearance of the scrollbar.

The screenshot below shows an example corresponding to the first scenario:

Solution 1: screenshotDelay

In Testplane settings, there is a mandatory option browsers that specifies the set of browsers available in the project and their properties. Select the browser where you are experiencing diffs due to scrollbars and add the screenshotDelay option for it:

module.exports = {
    browsers: {
        iphone: {
            screenshotDelay: 600, // Delay before taking a screenshot in ms

            // other browser settings...
        },

        // other browsers...
    },

    // other Testplane settings...
};

The screenshotDelay option sets a pause in milliseconds that Testplane should wait before taking a screenshot (before executing the assertView command).

How can it help?

Often screenshots generate diffs because the test needs to scroll the page to the required element just before taking the screenshot. After the scroll is performed, the scrollbar might still be visible on the screen for some time and thus, might appear in the screenshot if taken immediately. The screenshotDelay gives the scrollbar time to disappear.

However, this method does not always work as it depends on the implementation and behavior of the browsers.

Solution 2: Disabling Scrollbars

If scrollbars appear in screenshots in the Chrome browser, they can be disabled using the DevTools protocol.

To do this, add the hermione-hide-scrollbars plugin to your project and specify in its settings the list of browsers for which you want to disable scrollbars in the tests.

warning

Update the Chrome browser to version 72.1 or higher for this functionality to work in your tests. Earlier versions of Chrome do not support the Emulation.setScrollbarsHidden command, which is used to disable the scrollbars.

Keywords

• screenshotDelay
• hermione-hide-scrollbars