Débuter avec Puppeteer –

Les outils de développement de navigateurs offrent un nombre impressionnant d’options pour plonger sous le capot des sites Web et des applications Web. Ces fonctionnalités peuvent être encore améliorées et automatisées par des outils tiers. Dans cet article, nous examinerons Puppeteer une bibliothèque basée sur les nœuds à utiliser avec Chrome / Chromium.

Le site Web de Puppeteer décrit Puppeteer comme

une bibliothèque de nœuds offrant un niveau élevé. API permettant de contrôler Chrome ou Chromium via le protocole DevTools. Puppeteer fonctionne sans tête par défaut, mais peut être configuré pour exécuter du chrome ou du chrome complet (sans tête).

Puppeteer est fabriqué par l'équipe derrière Google Chrome, vous pouvez donc être sûr qu'il sera bien entretenu. Il nous permet d’effectuer des actions courantes sur le navigateur Chromium, par programmation via JavaScript, via une API simple et conviviale.

Avec Puppeteer, vous pouvez:

• gratter des sites Web
• pour générer des captures d’écran de sites Web comprenant SVG et Canvas
• crée des PDF de sites Web
• analyse un SPA (application d'une page)
• accède à des pages Web et extrait des informations à l'aide de l'API DOM standard
• générer un contenu prédéfini, c'est-à-dire un rendu côté serveur
• automatiser l'envoi des formulaires
• automatiser l'analyse des performances
• automatiser les tests d'interface utilisateur comme Cypress
• tester les extensions de chrome

Le marionnettiste n'a rien de nouveau que Selenium ] PhantomJS (qui est maintenant obsolète), mais similaire, mais fournit une API simple et facile à utiliser et fournit une grande abstraction afin que nous n'ayons pas à nous soucier des détails essentiels pour traiter avec elle.

Il est également activement maintenu nous avons donc toutes les nouvelles fonctionnalités d'ECMAScript, car Chromium le supporte.

Prérequis

Pour ce tutoriel, vous devez posséder des connaissances de base en JavaScript, ES6 + et Node.js.

. Vous devez également avoir installé la dernière version. de Node.js .

Nous utiliserons la fil tout au long de ce tutoriel. Si vous n'avez pas le fil déjà installé, installez-le à partir de ici .

Pour vous assurer que nous sommes sur la même page, voici les versions utilisées dans ce tutoriel:

• Noeud 12.12.0
• fil 1.19.1
• Puppeteer 2.0.0

Installation

Pour utiliser Puppeteer dans votre projet, exécutez la commande suivante dans le terminal:

 $ yarn add puppeteer

Remarque: lorsque vous installez Puppeteer, il télécharge une version récente de Chromium (~ 170 Mo macOS, ~ 282 Mo sous Linux, ~ 280 Mo sous Windows) qui fonctionnera avec l'API. Pour ignorer le téléchargement, voir Variables d'environnement .

Si vous n'avez pas besoin de télécharger Chromium, vous pouvez installer puppeteer-core :

 $ yarn. ajouter un noyau de marionnettiste

puppeteer-core est destiné à être une version allégée de Puppeteer permettant de lancer une installation de navigateur existante ou de se connecter à une autre. Assurez-vous que la version de puppeteer-core que vous installez est compatible avec le navigateur auquel vous souhaitez vous connecter.

Note: puppeteer-core n'est publié qu'à partir de la version 1.7.0. [19659034] Utilisation

Puppeteer nécessite au moins Node v6.4.0, mais nous allons utiliser async / wait, qui est uniquement pris en charge par Node v7.6.0 ou version ultérieure. Veillez donc à mettre à jour votre Node.js vers la dernière version. pour avoir tous les cadeaux.

Intéressons-nous à quelques exemples pratiques avec Puppeteer. Dans ce didacticiel, nous allons:

1. générer une capture d’écran de Unsplash utilisant Puppeteer
2. créant un fichier PDF de Hacker News utilisant Puppeteer
3. se connectant à Facebook à l'aide de Puppeteer

1. Générez une capture d’écran de Unsplash à l’aide de Puppeteer

C’est très facile de le faire avec Puppeteer. Continuez et créez un fichier screenshot.js à la racine de votre projet. Collez ensuite le code suivant:

 const puppeteer = require ('puppeteer')

const main = async () => {
  navigateur const = wait puppeteer.launch ()
  const page = wait browser.newPage ()
  wait page.goto ('https://unsplash.com')
  wait page.screenshot ({path: 'unsplash.png'})

  attendez browser.close ()
}

principale()

Premièrement, nous avons besoin du paquet puppeteer . Nous appelons ensuite la méthode launch qui initialise l’instance. Cette méthode est asynchrone car elle renvoie une Promise . Donc, nous attendons qu'il récupère l'instance de navigateur .

Ensuite, nous appelons newPage et accédons à Unsplash et prenons une capture d'écran de celle-ci et enregistrez-la sous le nom unsplash.png .

Maintenant, lancez le code ci-dessus dans le terminal en tapant:

 $ node screenshot

Maintenant, après 5 à 10 secondes, vous verrez un fichier unsplash.png dans votre projet contenant la capture d'écran de Unsplash. Notez que la fenêtre d'affichage est définie sur 800px x 600px car Puppeteer la définit comme taille initiale de la page, qui définit la taille de la capture d'écran. La taille de la page peut être personnalisée avec Page.setViewport () .

Modifions la fenêtre d'affichage en 1920px x 1080px. Insérez le code suivant avant la méthode goto :

 wait page.setViewport ({
  largeur: 1920,
  hauteur: 1080,
  deviceScaleFactor: 1,
})

Maintenant, changez le nom du fichier unsplash.png en unsplash2.png dans la méthode screenshot ainsi:

 à attendre. capture d'écran ({chemin: 'unsplash2.png'})

L'ensemble du fichier screenshot.js devrait maintenant ressembler à ceci:

 const puppeteer = require ('puppeteer')

const main = async () => {
  navigateur const = wait puppeteer.launch ()
  const page = wait browser.newPage ()
  wait page.setViewport ({
    largeur: 1920,
    hauteur: 1080,
    deviceScaleFactor: 1,
  })
  wait page.goto ('https://unsplash.com')
  wait page.screenshot ({chemin: 'unsplash2.png'})

  attendez browser.close ()
}

principale()

2. Créer un fichier PDF de Hacker News à l'aide de Puppeteer

Créez maintenant un fichier nommé pdf.js et collez-y le code suivant:

 const puppeteer = require ('puppeteer')

const main = async () => {
  navigateur const = wait puppeteer.launch ()
  const page = wait browser.newPage ()
  wait page.goto ('https://news.ycombinator.com', {waitUntil: 'networkidle2'})
  wait page.pdf ({chemin: 'hn.pdf', format: 'A4'})

  attendez browser.close ()
}

principale()

Nous n'avons modifié que deux lignes du code de la capture d'écran .

Premièrement, nous avons remplacé l'URL par Hacker News puis nous avons ajouté networkidle2 :

 wait page.goto ('https://news.ycombinator.com', {waitUntil: 'networkidle2'})

networkidle2 est pratique pour les pages qui effectuent des interrogations longues ou toute autre activité parallèle et considère que la navigation est terminée lorsqu'il n'y a pas plus de deux connexions réseau pendant au moins 500 ms.

Nous avons ensuite appelé le . ] pdf méthode pour créer un fichier PDf et l'a appelée hn.pdf et nous l'avons formatée comme suit: A4 taille:

 wait page.pdf ({chemin: 'hn .pdf ', format:' A4 '})

C’est tout. Nous pouvons maintenant exécuter le fichier pour générer un fichier PDF de Hacker News. Continuons et exécutons la commande suivante dans le terminal:

 $ node pdf

Ceci générera un fichier PDF appelé hn.pdf dans le répertoire racine du projet au format A4.

3. Connectez-vous à Facebook en utilisant Puppeteer

Créez un nouveau fichier appelé signin.js avec le code suivant:

 const puppeteer = require ('puppeteer')

const SECRET_EMAIL = 'exemple@gmail.com'
const SECRET_PASSWORD = 'secretpass123'

const main = async () => {
  navigateur const = wait puppeteer.launch ({
    sans tête: faux,
  })
  const page = wait browser.newPage ()
  wait page.goto ('https://facebook.com', {waitUntil: 'networkidle2'})
  wait page.waitForSelector ('# login_form')
  wait page.type ('input # email', SECRET_EMAIL)
  wait page.type ('input # pass', SECRET_PASSWORD)
  wait page.click ('# loginbutton')
  // wait browser.close ()
}

principale()

Nous avons créé deux variables, SECRET_EMAIL et SECRET_PASSWORD qui devraient être remplacées par votre adresse électronique et votre mot de passe Facebook.

Nous lançons ensuite . le navigateur et réglez le mode sans tête sur false pour lancer une version complète du navigateur Chromium.

Ensuite, nous allons sur Facebook et attendons que tout soit chargé.

Sur Facebook, il existe un sélecteur #login_form accessible via DevTools. Ce sélecteur contient le formulaire de connexion, nous l'attendons donc avec la méthode waitForSelector .

Nous devons ensuite saisir notre adresse électronique et notre mot de passe . les sélecteurs entrée # email et entrée # pass de DevTools et passez dans notre SECRET_EMAIL et SECRET_PASSWORD .

Après cela, nous Cliquez sur le bouton #login pour vous connecter à Facebook.

La dernière ligne est commentée afin que l'ensemble du processus de frappe soit saisi email et mot de passe puis en cliquant sur le bouton de connexion.

Continuez et exécutez le code en tapant ce qui suit dans le terminal:

 $ node signin

Ceci lancera un navigateur Chromium complet, puis se connectera à Facebook.

Conclusion

Dans ce tutoriel, nous avons créé un projet qui crée une capture d'écran d'une page donnée dans une fenêtre spécifiée. Nous avons également construit un projet permettant de créer un PDF de n’importe quel site Web. Par programme, nous avons ensuite réussi à nous connecter à Facebook.

Puppeteer a récemment publié la version 2 et constitue un bon logiciel pour automatiser des tâches triviales avec une API simple et conviviale.

Vous pouvez en apprendre davantage sur Puppeteer. sur son site officiel . La documentation est très bonne, avec des tonnes d'exemples et tout est bien documenté.

Maintenant, automatisez les tâches ennuyeuses dans votre vie quotidienne avec Puppeteer.

Akshay est un créateur, un artiste informatique et un micropreneur. de Mumbai.