web-dev-qa-db-fra.com

Comment maximiser l'utilisation de l'écran dans Puppeteer (sans tête)

Je teste marionnettiste l'automatisation du navigateur Chrome (J'utilisais auparavant Selenium, mais j'avais quelques problèmes avec le navigateur qui n'attendait pas que la page soit entièrement chargée). 

Lorsque je lance une instance de puppeteer - elle affiche alors le contenu occupant moins de la moitié de l'écran avec des barres de défilement. Comment puis-je le faire passer en plein écran?

const puppeteer = require('puppeteer');

async function test(){
    const browser = await puppeteer.launch({
        headless: false,
      });
    const page = await browser.newPage();
    await page.goto('http://google.com')
}

test()

La page initiale semble se charger correctement, mais dès que j'accède à une page, elle est plus petite et plus défilante.

puppeteer
4
Martin Thompson

Vous voudrez probablement définir une certaine taille d'écran, que tout navigateur réel a: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768});
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  await page.screenshot({path: 'example.png'});

  browser.close();
})();
20
Vaviloff

vous pouvez les options utilisateur dans le lancement

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args:[
       '--start-maximized' // you can also use '--start-fullscreen'
    ]
    });

  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768});
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  await page.screenshot({path: 'example.png'});

  browser.close();
})();
9
Akhil Aravind

Selon la Documentation Marionnettiste :

page.setViewport (viewport)

  • viewport < Object >
    • width < number > largeur de la page en pixels.
    • height < number > hauteur de la page en pixels.
    • deviceScaleFactor < number > Spécifie le facteur d'échelle du périphérique (peut être considéré comme dpr). La valeur par défaut est 1.
    • isMobile < boolean > Indique si la balise meta viewport est prise en compte. La valeur par défaut est false.
    • hasTouch < boolean > Spécifie si la fenêtre prend en charge les événements tactiles. La valeur par défaut est false
    • isLandscape < boolean > Spécifie si la fenêtre est en mode paysage. La valeur par défaut est false.
  • renvoie: < Promise >

NOTE dans certains cas, la configuration de viewport rechargera la page afin de définir les propriétés isMobile ou hasTouch.

Dans le cas de plusieurs pages dans un seul navigateur, chaque page peut avoir sa propre taille de fenêtre d'affichage.

Par conséquent, vous pouvez utiliser page.setViewport() pour définir la largeur et la hauteur de la page:

await page.setViewport( { 'width' : 1366, 'height' : 768 } )

Remarque: Assurez-vous d'utiliser l'opérateur await lorsque vous appelez page.setViewport(), car cette fonction est asynchrone.

1
Grant Miller