快捷導(dǎo)航

node puppeteer(headless chrome)實(shí)現(xiàn)網(wǎng)站登錄

更新時(shí)間：2018年05月09日 14:22:33 作者：nobody-junior

這篇文章主要介紹了node puppeteer(headless chrome)實(shí)現(xiàn)網(wǎng)站登錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

puppeteer簡(jiǎn)介

puppeteer是Chrome團(tuán)隊(duì)開發(fā)的一個(gè)node庫(kù)，可以通過(guò)api來(lái)控制瀏覽器的行為，比如點(diǎn)擊，跳轉(zhuǎn)，刷新，在控制臺(tái)執(zhí)行js腳本等等。有了這個(gè)神器，寫個(gè)爬蟲，自動(dòng)簽到，網(wǎng)頁(yè)截圖，生成pdf，自動(dòng)化測(cè)試什么的，都不在話下。

puppeteer的簡(jiǎn)單例子

代碼來(lái)自官網(wǎng)：

const puppeteer = require('puppeteer');
 
(async () => {
 const browser = await puppeteer.launch();//打開瀏覽器
 const page = await browser.newPage();//打開一個(gè)空白頁(yè)
 await page.goto('https://example.com');//在地址欄輸入網(wǎng)址并等待加載
 await page.screenshot({path: 'example.png'});//截個(gè)圖
 
 await browser.close();//關(guān)掉瀏覽器
})();

閱讀上述代碼，我們可以發(fā)現(xiàn)，1，代碼中每一步都是異步操作，2，每一步操作都對(duì)應(yīng)實(shí)際使用瀏覽器的一個(gè)行為。理解這兩點(diǎn)對(duì)使用這個(gè)庫(kù)有很大幫助。另外，比較常用的兩個(gè)對(duì)象就是browser和page對(duì)象，對(duì)象上有一堆用來(lái)操作兩個(gè)對(duì)象的方法。接下來(lái)，我們就寫一個(gè)登錄網(wǎng)站的小demo。

沒(méi)有驗(yàn)證碼的網(wǎng)站

對(duì)于沒(méi)有驗(yàn)證碼的網(wǎng)站，基本上就是輸入賬號(hào)，輸入密碼，點(diǎn)擊登錄這三步，需要用到page對(duì)象的兩個(gè)方法：type用來(lái)在輸入框中輸入信息，click用來(lái)點(diǎn)擊登錄。下面以登錄豆瓣為例來(lái)舉個(gè)例子：

const puppeteer = require('puppeteer');
const account = `123456@qq.com`;
const password = `123456`;
(async () => {
 const browser = await puppeteer.launch();//打開瀏覽器
 const page = await browser.newPage();//打開一個(gè)空白頁(yè)
 await page.goto('https://www.douban.com/');//打開豆瓣網(wǎng)站
 await page.type('#form_email', account);  
 await page.type('#form_password', password);
 await page.click('.bn-submit');
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待頁(yè)面加載出來(lái)，等同于window.onload
 await page.screenshot({path: 'example.png'});//截個(gè)圖
 await browser.close();//關(guān)掉瀏覽器
})();

有人說(shuō)，我怎么知道到底有沒(méi)有登錄成功呢，一種調(diào)試的辦法就是使用screenshot,如果你看到的是一個(gè)驗(yàn)證碼頁(yè)面，說(shuō)明沒(méi)有登錄成功，還有一種辦法像下面這樣：

const browser = await puppeteer.launch({headless: false});//打開有界面的瀏覽器

傳入headless：false后會(huì)真的打開一個(gè)瀏覽器的界面，這樣你就可以實(shí)時(shí)看到代碼執(zhí)行到什么地方了。接下來(lái)我們說(shuō)說(shuō)碰到驗(yàn)證碼時(shí)怎么辦。

有驗(yàn)證碼的網(wǎng)站

碰到有驗(yàn)證碼的網(wǎng)站，可以將headless設(shè)成false，借助界面輸入驗(yàn)證碼,同時(shí)監(jiān)聽(tīng)頁(yè)面加載事件，實(shí)現(xiàn)登錄，代碼如下：

...

 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待頁(yè)面加載出來(lái)，等同于window.onload


//代碼中監(jiān)聽(tīng)跳轉(zhuǎn)事件
if(page.url() === 'https://www.douban.com/accounts/login'){ 
   //登錄不成功
  console.log('需要輸入驗(yàn)證碼');
  //等待再一次跳轉(zhuǎn)
  while(true){
    await page.waitForNavigation({
      waitUntil: 'load'
    })
    console.log(page.url())
    if(page.url() === 'https://www.douban.com/'){
      console.log('登錄成功');
      break;
    }
  }
 }

整體思路就是寫也個(gè)循環(huán)，不斷監(jiān)聽(tīng)頁(yè)面跳轉(zhuǎn)，直到瀏覽器登錄成功后跳轉(zhuǎn)到首頁(yè)為止。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: