Перейти к основному содержимому

Как скрывать скроллбары с помощью Chrome DevTools Protocol

Обзор​

warning

Данный рецепт работает только при использовании Chrome DevTools Protocol (CDP).

Читайте подробности в разделе «Как использовать CDP в Testplane»

Одна из причин падений тестов при тестировании верстки с помощью скриншотов — это появление скроллбара в браузере в момент снятия скриншота. Подробнее об этой проблеме и некоторых способах её решения, вы можете прочитать здесь. Особенно часто эта проблема возникает в тестах с мобильной эмуляцией.

В CDP есть специальный метод Emulation.setScrollbarsHidden, который позволяет скрыть скроллбар. Однако в puppeteer отсутствует обертка над этим методом. Поэтому мы воспользуемся методом CDPSession.send, чтобы выполнить команду Emulation.setScrollbarsHidden.

Пример: как отключить скроллбар с помощью CDP​

Вот как это будет выглядеть:

it("should hide scrollbar", async function () {
    // Получаем инстанс puppeteer'а
    const puppeteer = await this.browser.getPuppeteer();

    // Получаем первую открытую страницу (считаем, что она активная в данный момент)
    const [page] = await puppeteer.pages();

    // Создаем CDP-сессию
    const client = await page.target().createCDPSession();

    // Скрываем скроллбар
    await client.send("Emulation.setScrollbarsHidden", { hidden: true });

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

Читайте также наш рецепт «Как убрать скроллбары из скриншотов».

Там же вы узнаете про плагин hermione-hide-scrollbars, который реализован на основе метода Emulation.setScrollbarsHidden и который вы можете использовать, чтобы отключить скроллбары в CI для всех тестов в конкретных браузерах.