Utilisation de Node Puppeteer pour mettre en œuvre l'analyse du code de connexion au site Web

Cette fois, je vais vous apporter l'analyse du code pour la connexion à un site Web à l'aide de Node Puppeteer, et quelles sont les précautions pour utiliser Node Puppeteer pour implémenter la connexion à un site Web. Ce qui suit est un cas pratique, jetons un coup d'œil. .

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 Événement de chargement 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;
    }
  }
 }

L'idée générale est d'écrire une boucle et de surveiller en permanence les sauts de page jusqu'à ce que le navigateur passe à la page d'accueil après une connexion réussie.

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

Lecture recommandée :

Analyse du code de cas JS Promise

Propriétés calculées Vue et analyse du code de cas d'auditeur

Comment gérer la soumission répétée de données en cliquant plusieurs fois sur le bouton vue

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!