Comment définir le viewport maximum dans Puppeteer ?

Question

Lorsque je lance une nouvelle page, je dois spécifier la taille de la fenêtre d'affichage à l'aide de la fonction setViewport fonction :

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

Je veux utiliser max viewport.

Comment faire pour que la fenêtre d'affichage soit redimensionnée en fonction de la taille de la fenêtre ?

Answer 1

Je suis peut-être très en retard sur ce point. Néanmoins, pour les autres, essayez :

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

Définissez le defaultViewport option pour null comme ci-dessus pour désactiver la résolution 800x600. Il prend alors la résolution maximale.

Answer 2

Vous pouvez passer le --window-size en tant qu'argument pour puppeteer.launch() pour modifier la taille de la fenêtre selon vos souhaits width y height .

Ensuite, vous pouvez appeler la méthode Chrome Devtools Protocol Emulation.clearDeviceMetricsOverride pour effacer les métriques de périphérique remplacées (y compris la fenêtre d'affichage par défaut 800 x 600).

Ainsi, la fenêtre d'affichage correspondra à la taille de la fenêtre (lors de captures d'écran, etc.).

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
});

Note : page.viewport() retournera toujours { width: 800, height: 600 } et la seule façon de modifier de manière fiable les valeurs de ces propriétés est d'utiliser la fonction page.setViewport() .

Voir l'exemple complet ci-dessous :

'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();
})();

Answer 3

Comme expliqué dans ce numéro

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

fait en sorte que chrome définisse le viewport en déduisant la résolution actuelle de l'écran. Il semble que cela ne fonctionne qu'avec headless: false

Answer 4

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

la ligne " const browser = ..." maximise votre fenêtre chrome. Mais notez que la page est l'endroit où le viewport doit être défini et qu'il sera toujours à la taille par défaut lorsque vous créez la page.

Lorsque vous définissez la fenêtre d'affichage avec une largeur et une hauteur de "0", la taille de la fenêtre d'affichage de la page devient égale à la taille du navigateur.

Answer 5

Pour moi, la combinaison de defaultViewport: null y args: ['--start-maximized'] m'a donné du plein écran avec une vue adaptée à la taille de l'écran :

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