web-dev-qa-db-fra.com

Comment définir la fenêtre maximale dans Puppeteer?

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

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

Je veux utiliser la fenêtre d'affichage max.

Comment rendre la fenêtre redimensionnable en fonction de la taille de la fenêtre?

javascriptnode.jsgoogle-chrome-devtoolsviewportpuppeteer
21
fehif

Je suis peut-être très en retard à ce sujet. Néanmoins pour d'autres, essayez:

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

Définissez l'option defaultViewport sur null comme ci-dessus pour désactiver la résolution 800x600. Il faut alors la résolution max.

29
n00b_g33k

Vous pouvez passer le drapeau --window-size comme argument à puppeteer.launch() pour changer la taille de la fenêtre à votre width souhaitée et height.

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

Cela entraînera la fenêtre pour correspondre à la taille de la fenêtre (lors de la capture 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
});

Remarque: page.viewport() renverra toujours { width: 800, height: 600 }, Et le seul moyen de manière fiable modifier les valeurs de ces propriétés consiste à utiliser 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();
})();
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});

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

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

7
Rahul Singh

Comme expliqué dans ce problème

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

fait que le chrome définit la fenêtre en déduisant la résolution d'écran actuelle. Semble fonctionner uniquement avec headless: false

5
rivanov

Il vaut probablement la peine de mentionner que si vous combinez puppeteer.launch({defaultViewport: null}) avec puppeteer.connect(), encore une fois, vous devez passer {defaultViewport: null}}, sinon la fenêtre est ramenée à sa taille par défaut. Donc dans ce cas, utilisez:

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

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

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