Skip to main content

How to Hide Scrollbars Using Chrome DevTools Protocol

Overview​

warning

This recipe only works when using Chrome DevTools Protocol (CDP).

Read details in the section “How to use CDP in Testplane”

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. You can read more about this problem and some ways to solve it here. This problem arises particularly often in tests with mobile emulation.

CDP has a special method Emulation.setScrollbarsHidden that allows hiding the scrollbar. However, puppeteer lacks a wrapper for this method. Therefore, we will use the CDPSession.send method to execute the Emulation.setScrollbarsHidden command.

Example: How to Hide Scrollbars Using CDP​

Here's how it looks:

it("should hide scrollbar", async function () {
    // Get puppeteer instance
    const puppeteer = await this.browser.getPuppeteer();

    // Get the first open page (considering it to be currently active)
    const [page] = await puppeteer.pages();

    // Create a CDP session
    const client = await page.target().createCDPSession();

    // Hide the scrollbar
    await client.send("Emulation.setScrollbarsHidden", { hidden: true });

    await this.browser.url("https://yandex.ru");
});

Also, read our recipe “How to Hide Scrollbars from Screenshots”.

There you will also learn about the hermione-hide-scrollbars plugin, which is implemented based on the Emulation.setScrollbarsHidden method and which you can use to disable scrollbars in CI for all tests in specific browsers.