Using node puppeteer to implement website login code analysis

This time I will bring you the use of node puppeteer to implement website login code analysis, and the precautions for using node puppeteer to implement website login. The following is a practical case, let's take a look.

puppeteer introduction

puppeteer is a node library developed by the Chrome team. It can control browser behavior through APIs, such as clicks and jumps. Transfer, refresh, execute js scripts in the console, etc. With this artifact, it is easy to write a crawler, automatically sign in, take screenshots of web pages, generate PDFs, and automate testing.

Simple example of puppeteer

The code comes from the official website:

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();//关掉浏览器
})();

Reading the above code, we can find that, 1. Code Each step in is an asynchronous operation, 2. Each step corresponds to an actual behavior of using the browser. Understanding these two points is of great help in using this library. In addition, the two most commonly used objects are the browser and page objects. There are a bunch of methods on the objects used to operate the two objects. Next, we will write a small demo for logging into the website.

Websites without verification code

For websites without verification code, basically enter the account number and password , the three steps of clicking to log in require the use of two methods of the page object: type is used to enter information in the input box, and click is used to click to log in. Let's take logging into Douban as an example:

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();//关掉浏览器
})();

Some people say, how do I know whether the login is successful? One way to debug is to use screenshots. If what you see is a verification code page , indicating that the login is not successful, there is another way like the following:

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

After passing in headless: false, a browser interface will actually be opened, so that you can see where the code is executed in real time. . Next, let’s talk about what to do when you encounter a verification code.

Websites with verification codes

#When encountering websites with verification codes, you can set headless to false, use the interface to enter the verification code, and monitor the page at the same time Loading event, to achieve login, the code is as follows:

...
 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;
    }
  }
 }

The overall idea is to write a loop, constantly monitor page jumps, until the browser jumps to the home page after successful login.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS Promise case code analysis

vue computed properties and listener case code analysis

How to handle repeated submission of data after multiple clicks on the vue button

The above is the detailed content of Using node puppeteer to implement website login code analysis. For more information, please follow other related articles on the PHP Chinese website!