這篇文章主要為大家展示了“node puppeteer如何實(shí)現(xiàn)網(wǎng)站登錄”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“node puppeteer如何實(shí)現(xiàn)網(wǎng)站登錄”這篇文章吧。

十載專注成都網(wǎng)站制作，企業(yè)網(wǎng)站建設(shè)，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對主動防護(hù)網(wǎng)等多個領(lǐng)域，擁有多年建站經(jīng)驗(yàn)。

puppeteer簡介

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

puppeteer的簡單例子

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

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

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

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

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

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/');//打開豆瓣網(wǎng)站
 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();//關(guān)掉瀏覽器
})();

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

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

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

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

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

...

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


//代碼中監(jiān)聽跳轉(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;
    }
  }
 }

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

以上是“node puppeteer如何實(shí)現(xiàn)網(wǎng)站登錄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：nodepuppeteer如何實(shí)現(xiàn)網(wǎng)站登錄-創(chuàng)新互聯(lián)
分享路徑：http://chinadenli.net/article48/dgjsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、App開發(fā)、網(wǎng)站設(shè)計公司、ChatGPT、移動網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)