web-dev-qa-db-ja.com

Puppeteerで最大ビューポートを設定する方法は？

新しいページを実行するときは、setViewport関数を使用してビューポートのサイズを指定する必要があります。

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

最大ビューポートを使用したい。

ウィンドウサイズに応じてビューポートのサイズを変更するにはどうすればよいですか？

javascriptnode.jsgoogle-chrome-devtoolsviewportpuppeteer
21
fehif

私はこれに非常に遅れるかもしれません。それにもかかわらず、他の人のために、試してください：

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

上記のようにdefaultViewportオプションをnullに設定して、800x600解像度を無効にします。その場合、最大解像度がかかります。

29
n00b_g33k

_--window-size_ フラグを引数として puppeteer.launch() に渡して、ウィンドウサイズを目的のwidthに変更できます。 height。

次に、Chrome Devtools Protocol method _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();
})();
_
21
Grant Miller
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」に設定してビューポートを設定すると、ページビューポートのサイズはブラウザのサイズと同じになります。

7
Rahul Singh

これで説明したように issue

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

現在の画面解像度を推測して、chromiumにビューポートを設定させます。 headless: falseでのみ機能するようです

5
rivanov

puppeteer.launch({defaultViewport: null})をpuppeteer.connect()と組み合わせる場合は、再度{defaultViewport: null}}、それ以外の場合、ビューポートはデフォルトのサイズに調整されます。したがって、この場合は次を使用します。

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

私にとっては、defaultViewport: nullとargs: ['--start-maximized']の組み合わせにより、フルスクリーンで画面サイズに適したビューが得られました。

browser = await puppeteer.launch({
            headless: false,
            args: [
                '--start-maximized',
            ],
            defaultViewport: null,
        });
0
Zubeir