Explication détaillée des étapes de mise en œuvre de la connexion au site Web avec Node Puppeteer (avec code)

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter la connexion à un site Web avec Node Puppeteer (avec code). Quelles sont les précautions pour implémenter la connexion à un site Web avec Node Puppeteer. cas, jetons un coup d'oeil.

Introduction à Puppeteer

Puppeteer est une bibliothèque de nœuds développée par l'équipe Chrome, qui peut contrôler les comportements du navigateur, tels que les clics et les sauts, via les API Transférer, actualiser, exécuter des scripts js dans la console, etc. Avec cet artefact, il est facile d'écrire un robot d'exploration, de se connecter automatiquement, de prendre des captures d'écran de pages Web, de générer des PDF et d'automatiser les tests.

Un exemple simple de marionnettiste

Le code vient du site officiel :

const puppeteer = require('puppeteer');
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://example.com');//在地址栏输入网址并等待加载
 await page.screenshot({path: 'example.png'});//截个图
 await browser.close();//关掉浏览器
})();

Lecture du code ci-dessus , on peut constater que 1 , Chaque étape du code est une opération asynchrone, 2. Chaque opération correspond à un comportement réel d'utilisation du navigateur. Comprendre ces deux points est d'une grande aide pour utiliser cette bibliothèque. De plus, les deux objets les plus couramment utilisés sont les objets navigateur et page. Il existe de nombreuses méthodes sur les objets utilisés pour faire fonctionner les deux objets. Ensuite, nous rédigerons une petite démo pour vous connecter au site Web.

Sites Web sans Code de vérification

Pour les sites Web sans code de vérification, entrez essentiellement le numéro de compte et entrez le mot de passe, les trois étapes consistant à cliquer pour se connecter nécessitent l'utilisation de deux méthodes de l'objet page : le type est utilisé pour saisir des informations dans la zone de saisie, et le clic est utilisé pour cliquer pour se connecter. Prenons l'exemple de la connexion à Douban :

const puppeteer = require('puppeteer');
const account = `123456@qq.com`;
const password = `123456`;
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://www.douban.com/');//打开豆瓣网站
 await page.type('#form_email', account);  
 await page.type('#form_password', password);
 await page.click('.bn-submit');
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来，等同于window.onload
 await page.screenshot({path: 'example.png'});//截个图
 await browser.close();//关掉浏览器
})();

Certaines personnes demandent : comment puis-je savoir si la connexion a réussi ? Une façon de déboguer est d'utiliser des captures d'écran si ce que vous voyez est une page de codes de vérification ? , indiquant que la connexion n'a pas réussi, il existe une autre méthode comme la suivante :

const browser = await puppeteer.launch({headless: false});//打开有界面的浏览器

Passer en headless: false ouvrira en fait une interface de navigateur, afin que vous puissiez voir l'exécution du code en temps réel quelque part . Parlons ensuite de ce qu'il faut faire lorsque vous rencontrez un code de vérification.

Sites Web avec codes de vérification

Lorsque vous rencontrez des sites Web avec des codes de vérification, vous pouvez définir headless sur faux, utiliser l'interface pour saisir le code de vérification et surveiller la page en même temps Loading event implémente la connexion. Le code est le suivant :

...
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来，等同于window.onload
//代码中监听跳转事件
if(page.url() === 'https://www.douban.com/accounts/login'){ 
   //登录不成功
  console.log('需要输入验证码');
  //等待再一次跳转
  while(true){
    await page.waitForNavigation({
      waitUntil: 'load'
    })
    console.log(page.url())
    if(page.url() === 'https://www.douban.com/'){
      console.log('登录成功');
      break;
    }
  }
 }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

JS obtient les paramètres d'URL et envoie les étapes POST au format json en détail

js transmet les paramètres json à Analyse des étapes du contrôleur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!