Как установить максимальный видовой экран в Puppeteer?

Question

Когда я запускаю новую страницу, я должен указать размер области просмотра с помощью функции setViewport:

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

Я хочу использовать макс. Область просмотра.

Как мне сделатьИзменение размера окна просмотра в зависимости от размера окна?

Answer 1

Вероятно, стоит упомянуть, что если вы объедините puppeteer.launch({defaultViewport: null}) с puppeteer.connect(), вам снова нужно будет передать {defaultViewport: null}}, в противном случае область просмотра вернется к размеру по умолчанию.Так что в этом случае используйте:

await puppeteer.connect({browserWSEndpoint: ws, defaultViewport: null})

Answer 2

const browser = await puppeteer.launch( {"headless": false, args: ['--start-maximized'] } );
const page = await browser.newPage();
await page.setViewport({width:0, height:0});

строка "const browser = ..." увеличивает окно Chrome.Но обратите внимание, что на странице необходимо настроить область просмотра, и она все равно будет иметь размер по умолчанию при создании страницы.

Когда вы устанавливаете область просмотра с шириной и высотой как «0», размер области просмотра страницы становится равным размеру браузера.

Answer 3

Как объяснено в этом выпуске

page.setViewport({ width: 0, height: 0 });

заставляет хром устанавливать область просмотра, выводя текущее разрешение экрана.Кажется, работает только с headless: false

Answer 4

Я могу опоздать на это.Тем не менее, для других попробуйте:

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

Установите для параметра defaultViewport значение null, как указано выше, чтобы отключить разрешение 800x600.Тогда требуется максимальное разрешение.

Answer 5

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

Затем можно вызвать метод протокола Chrome Devtools 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();
})();