1

Тема: Просмотр страницы viewport в Puppeteer

По умолчанию страница просмотра в браузере имеет размеры 800 x 600.

Можно передать флаг --window-size в качестве аргумента для puppeteer.launch(), чтобы изменить размер окна до требуемой ширины (width) и высоты (height).

Затем можно вызвать метод Chrome Devtools Protocol Emulation.clearDeviceMetricsOverride чтобы очистить установки переопределенных устройств (включая окно просмотра 800 x 600 по умолчанию).

Это действие приведет к тому, что  окно просмотра будет соответствовать заданному размеру окна (например, при съемке скриншотов и т.д.).

const browser = await puppeteer.launch({
    args : [
        '--window-size=1920,1080'
    ]
});

const page = await browser.newPage();

await page._client.send( 'Emulation.clearDeviceMetricsOverride' );

await page.screenshot( { path : 'example.png' } ); // Image Dimensions : 1920 x 1080

ВНИМАНИЕ: page.viewport() все равно вернет { width: 800, height: 600 }, и единственный способ достоверно изменить значения этих свойств - использовать page.setViewport().

'use strict';

const puppeteer = require( 'puppeteer' );

( async () =>
{
    /* ============================================================
        Prerequisite: Set Window size
    ============================================================ */

    const browser = await puppeteer.launch({
        args : [
            '--window-size=1920,1080'
        ]
    });

    const page = await browser.newPage();

    await page.goto( 'https://www.example.com/' );

    /* ============================================================
        Case 1: Default Viewport
    ============================================================ */

    console.log( 'Case 1 - Width  :', page.viewport().width );  // Width  : 800
    console.log( 'Case 1 - Height :', page.viewport().height ); // Height : 600

    await page.screenshot( { path : 'image-1.png' } );          // Image Dimensions : 800 x 600

    /* ============================================================
        Case 2: Clear Overridden Device Metrics
    ============================================================ */

    await page._client.send( 'Emulation.clearDeviceMetricsOverride' );

    console.log( 'Case 2 - Width  :', page.viewport().width );  // Width  : 800
    console.log( 'Case 2 - Height :', page.viewport().height ); // Height : 600

    await page.screenshot( { path : 'image-2.png' } );          // Image Dimensions : 1920 x 1080

    /* ============================================================
        Case 3: Manually Set Viewport
    ============================================================ */

    await page.setViewport({
        width  : 1920,
        height : 1080
    });

    console.log( 'Case 3 - Width  :', page.viewport().width );  // Width  : 1920
    console.log( 'Case 3 - Height :', page.viewport().height ); // Height : 1080

    await page.screenshot( { path : 'image-3.png' } );          // Image Dimensions : 1920 x 1080

    /* ============================================================
        Case 4: Revert Back to Default Viewport
    ============================================================ */

    await page.setViewport({
        width  : 800,
        height : 600
    });

    console.log( 'Case 4 - Width  :', page.viewport().width );  // Width  : 800
    console.log( 'Case 4 - Height :', page.viewport().height ); // Height : 600

    await page.screenshot( { path : 'image-4.png' } );          // Image Dimensions : 800 x 600

    await browser.close();
})();

Если требуется максимальное разрешение, то можно установить для параметра defaultViewport значение null как показано ниже ( разрешение 800x600 будет отключено ).

const browser = await puppeteer.launch({defaultViewport: null});

Поделиться