Comment définir la fenêtre d’affichage dans Puppeteer

Puppeteer est l’une des API de chrome sans tête les plus populaires pour Node. Il est livré avec des tonnes de fonctionnalités et fournit une syntaxe simple avec laquelle travailler. Parfois, il est nécessaire de modifier la résolution Windows de votre navigateur sans tête ou d’émuler un appareil spécifique. Voici comment définir la fenêtre d’affichage dans Puppeteer.

Comment définir la fenêtre d’affichage dans Puppeteer

Pour définir la fenêtre d’affichage dans Puppeteer, utilisez le “setViewport” fonction sur votre objet de page.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  //Code to Set Viewport
  await page.setViewport({
        width: 1920,
        height: 1080
  })

  await page.goto('https://www.example.com');
  await browser.close();
})();

Une fois que vous avez créé une nouvelle page dans votre instance de navigateur Puppeteer, vous pouvez modifier sa fenêtre d’affichage pour ajuster la résolution. Définir votre fenêtre d’affichage avant de naviguer vers l’URL est une bonne idée. De nombreux sites ne se formateront pas correctement si vous modifiez la taille de la fenêtre d’affichage après avoir chargé la page.

La fonction setViewport acceptera un objet avec les propriétés suivantes :

• largeur: largeur en pixels de la fenêtre (obligatoire)
• la taille: hauteur en pixels de la fenêtre (obligatoire)
• estPaysage: identifie que la fenêtre est en mode paysage (facultatif) (faux par défaut)
• isMobile: identifie que la fenêtre se trouve sur un appareil mobile (facultatif) (faux par défaut)
• aTouch: identifie si les fenêtres prennent en charge les événements tactiles (facultatif) (faux par défaut)
• deviceScaleFactor: définit le DPR (facultatif) (par défaut 1)

Vous devez inclure la largeur et la hauteur lors de la définition de la fenêtre, mais le reste des arguments est facultatif. La largeur et la hauteur sont toutes deux définies en pixels. Voici quelques-unes des résolutions les plus populaires sur plusieurs appareils :

Si vous essayez de faire ressembler votre instance de marionnettiste à un appareil mobile, vous pouvez utiliser le “imiter” fonction.

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['Galaxy Note II'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  await browser.close();
})();

La fonction d’émulation définit à la fois l’agent utilisateur et la fenêtre d’affichage pour le périphérique spécifié. Vous pouvez obtenir une liste des appareils utilisables avec leurs résolutions et leurs agents utilisateurs ici.

Vous savez maintenant comment définir la fenêtre d’affichage dans Puppeteer ou émuler directement des appareils spécifiques.

Si vous souhaitez consulter des didacticiels plus utiles, consultez notre section Javascript. Bon codage !