L’une des fonctionnalités les plus précieuses de Puppeteer est la possibilité de prendre une capture d’écran de la page et de l’enregistrer sous forme de fichier. Vous pouvez utiliser cette fonctionnalité pour déboguer votre code ou l’intégrer directement à votre application. Parfois, il est utile de générer des images d’éléments individuels. Voici comment capturer un élément dans Puppeteer.

Comment faire une capture d’écran d’un élément dans Puppeteer

Pour capturer un élément dans Marionnettiste, vous devez exécuter la méthode de capture d’écran sur votre sélecteur d’élément. Prenons un exemple simple :

let element = await page.$('.my-element')
await element.screenshot({
  path: './tmp/screenshot.png',
})

Tout d’abord, nous utilisons le page.$() méthode pour obtenir notre référence d’élément, avec votre sélecteur comme paramètre. Cette méthode fonctionnera document.querySelector à l’intérieur de la page. Une fois que nous avons cette référence, nous appelons simplement le screenshot() méthode pour créer une image de l’élément seul.

Page.$() appelle document.querySelector pendant que Page.$$() appelle document.querySelectorAll et renvoie un tableau.

La méthode `screenshot prend un paramètre de chemin qui est un chemin relatif vers le répertoire de travail actuel. Si vous omettez le chemin, l’image ne sera pas enregistrée dans un fichier, mais la méthode renverra toujours un tampon de la capture d’écran.

Comment faire une capture d’écran de la page entière dans Puppeteer

Pour faire une capture d’écran de la page entière dans Puppeteer, définissez le fullPage paramètre lors de l’appel du Page.screenshot() méthode.

await page.screenshot({
  path: './tmp/screenshot.png',
  fullPage: true
})

La fullPage Le paramètre est défini sur false par défaut, mais lorsqu’il est activé, Puppeteer prendra une capture d’écran complète de toute la page défilante.

D’autres paramètres de capture d’écran utiles incluent :

  • qualité – une vallée numérique pour la qualité d’image entre 0 et 100
  • omitBackground – capture d’écran avec un fond transparent
  • encodage – base64 ou encodage binaire (par défaut, binaire)
  • clip – donnez à la capture d’écran des dimensions spécifiques ou faites une capture d’écran d’une zone spécifique de la page
  • type – type d’image jpeg ou png (la valeur par défaut est png)
  • fromSurface – capture à partir de la surface au lieu de la vue (valeur par défaut à true)
  • captureBeyondViewport – capture au-delà de la fenêtre (par défaut, true)

Vous savez maintenant comment capturer un élément dans Puppeteer et prendre une capture d’écran d’une page entière. Bon codage !

Si vous avez trouvé ce guide utile, consultez notre section Javascript pour obtenir des conseils, des astuces et des guides plus utiles sur les marionnettistes.

Categorized in:

Guide,