puppeteer的原理和作用

這篇文章主要介紹“puppeteer是什么”，在日常操作中，相信很多人在puppeteer是什么問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”puppeteer是什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、Puppeteer簡(jiǎn)介

Puppeteer 是一個(gè) Node 庫，它提供了一個(gè)高級(jí) API 來通過 DevTools 協(xié)議控制 Chromium 或 Chrome，利用Puppeteer可以獲取頁面DOM節(jié)點(diǎn)、網(wǎng)絡(luò)請(qǐng)求和響應(yīng)、程序化操作頁面行為、進(jìn)行頁面的性能監(jiān)控和優(yōu)化、獲取頁面截圖和PDF等，利用該神器就可以操作Chrome瀏覽器玩出各種花樣。

二、Puppeteer核心組成結(jié)構(gòu)

Puppeteer的結(jié)構(gòu)也反映了瀏覽器的結(jié)構(gòu)，其核心結(jié)構(gòu)如下所示：

圖片

Browser：這是一個(gè)瀏覽器實(shí)例，可以擁有瀏覽器上下文，可通過 puppeteer.launch 或 puppeteer.connect 創(chuàng)建一個(gè) Browser 對(duì)象。

BrowserContext：該實(shí)例定義了一個(gè)瀏覽器上下文，可擁有多個(gè)頁面，創(chuàng)建瀏覽器實(shí)例時(shí)默認(rèn)會(huì)創(chuàng)建一個(gè)瀏覽器上下文（不能關(guān)閉），此外可以利用 browser.createIncognitoBrowserContext()創(chuàng)建一個(gè)匿名的瀏覽器上下文（不會(huì)與其它瀏覽器上下文共享cookie/cache）.

Page：至少包含一個(gè)主框架，除了主框架外還有可能存在其它框架，例如iframe。

Frame：頁面中的框架，在每個(gè)時(shí)間點(diǎn)，頁面通過page.mainFrame()和frame.childFrames()方法暴露當(dāng)前框架的細(xì)節(jié)。對(duì)于該框架中至少有一個(gè)執(zhí)行上下文

ExecutionCOntext：表示一個(gè)JavaScript的執(zhí)行上下文。

Worker：具有單個(gè)執(zhí)行上下文，便于與 WebWorkers 交互。

三、基本使用和常用功能

該神器整體使用起來比較簡(jiǎn)單，下面就開始我們的使用之路。

3.1 啟動(dòng)Browser

核心函數(shù)就是異步調(diào)用puppeteer.launch()函數(shù)，根據(jù)相應(yīng)的配置參數(shù)創(chuàng)建一個(gè)Browser實(shí)例。

const path = require('path');  const puppeteer = require('puppeteer');  const chromiumPath = path.join(__dirname, '../', 'chromium/chromium/chrome.exe');  async function main() {      // 啟動(dòng)chrome瀏覽器      const browser = await puppeteer.launch({          // 指定該瀏覽器的路徑          executablePath: chromiumPath,          // 是否為無頭瀏覽器模式，默認(rèn)為無頭瀏覽器模式          headless: false      });  }   main();

3.2 訪問頁面

訪問頁面首先需要?jiǎng)?chuàng)建一個(gè)瀏覽器上下文，然后基于該上下文創(chuàng)建一個(gè)新的page，最后指定要訪問的網(wǎng)址。

async function main() {      // 啟動(dòng)chrome瀏覽器      // ……      // 在一個(gè)默認(rèn)的瀏覽器上下文中被創(chuàng)建一個(gè)新頁面      const page1 = await browser.newPage();      // 空白頁訪問該指定網(wǎng)址      await page1.goto('https://51yangsheng.com');      // 創(chuàng)建一個(gè)匿名的瀏覽器上下文      const browserContext = await browser.createIncognitoBrowserContext();      // 在該上下文中創(chuàng)建一個(gè)新頁面      const page2 = await browserContext.newPage();      page2.goto('https://www.baidu.com');  }    main();

3.3 設(shè)備模擬

經(jīng)常需要不同類型的機(jī)型的瀏覽結(jié)果，此時(shí)就可以采用設(shè)備模擬實(shí)現(xiàn)，下面模擬一個(gè)iPhone X的設(shè)備的瀏覽器結(jié)果

async function main() {      // 啟動(dòng)瀏覽器      // 設(shè)備模擬：模擬一個(gè)iPhone X      // user agent      await page1.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1')      // 視口（viewport）模擬      await page1.setViewport({          width: 375,          height: 812      });          // 訪問某頁面  }  main();

3.4 獲取DOM節(jié)點(diǎn)

獲取DOM節(jié)點(diǎn)有兩種方式，一種方式是直接調(diào)用page所帶的原生函數(shù)，另一種是通過執(zhí)行js代碼獲取。

async function main() {      // 啟動(dòng)chrome瀏覽器      const browser = await puppeteer.launch({          // 指定該瀏覽器的路徑          executablePath: chromiumPath,          // 是否為無頭瀏覽器模式，默認(rèn)為無頭瀏覽器模式          headless: false      });      // 在一個(gè)默認(rèn)的瀏覽器上下文中被創(chuàng)建一個(gè)新頁面      const page1 = await browser.newPage();      // 空白頁訪問該指定網(wǎng)址      await page1.goto('https://www.baidu.com');      // 等待title節(jié)點(diǎn)出現(xiàn)      await page1.waitForSelector('title');      // 用page自帶的方法獲取節(jié)點(diǎn)     const titleDomText1 = await page1.$eval('title', el => el.innerText);      console.log(titleDomText1);// 百度一下      // 用js獲取節(jié)點(diǎn)      const titleDomText2 = await page1.evaluate(() => {          const titleDom = document.querySelector('title');          return titleDom.innerText;      });      console.log(titleDomText2);  }  main();

3.5 監(jiān)聽請(qǐng)求和響應(yīng)

下面就來監(jiān)聽一下百度中某一js腳本的請(qǐng)求和響應(yīng),request事件是監(jiān)聽請(qǐng)求，response事件是監(jiān)聽響應(yīng)。

async function main() {      // 啟動(dòng)chrome瀏覽器      const browser = await puppeteer.launch({          // 指定該瀏覽器的路徑          executablePath: chromiumPath,          // 是否為無頭瀏覽器模式，默認(rèn)為無頭瀏覽器模式          headless: false      });      // 在一個(gè)默認(rèn)的瀏覽器上下文中被創(chuàng)建一個(gè)新頁面      const page1 = await browser.newPage();      page1.on('request', request => {          if (request.url() === 'https://s.bdstatic.com/common/openjs/amd/eslx.js') {              console.log(request.resourceType());              console.log(request.method());              console.log(request.headers());          }      });      page1.on('response', response => {          if (response.url() === 'https://s.bdstatic.com/common/openjs/amd/eslx.js') {              console.log(response.status());              console.log(response.headers());         }      })      // 空白頁剛問該指定網(wǎng)址      await page1.goto('https://www.baidu.com');  }  main();

3.6 攔截某一請(qǐng)求

默認(rèn)情況下request事件只有只讀屬性，不能夠攔截請(qǐng)求，若想攔截該請(qǐng)求則需要通過page.setRequestInterception(value)啟動(dòng)請(qǐng)求攔截器，然后利用request.abort, request.continue 和 request.respond 方法決定該請(qǐng)求的下一步操作。

async function main() {      // 啟動(dòng)chrome瀏覽器      const browser = await puppeteer.launch({          // 指定該瀏覽器的路徑          executablePath: chromiumPath,          // 是否為無頭瀏覽器模式，默認(rèn)為無頭瀏覽器模式          headless: false      });      // 在一個(gè)默認(rèn)的瀏覽器上下文中被創(chuàng)建一個(gè)新頁面      const page1 = await browser.newPage();      // 攔截請(qǐng)求開啟      await page1.setRequestInterception(true);// true開啟，false關(guān)閉      page1.on('request', request => {          if (request.url() === 'https://s.bdstatic.com/common/openjs/amd/eslx.js') {              // 終止該請(qǐng)求              request.abort();              console.log('該請(qǐng)求被終止?。?！');          }          else {              // 繼續(xù)該請(qǐng)求              request.continue();          }      });      // 空白頁訪問該指定網(wǎng)址      await page1.goto('https://www.baidu.com');  }  main();

3.7 截圖

截圖是一個(gè)很有用的功能，通過截取就可以保存一份快照，方便后期問題的排查。（注：在無頭模式下進(jìn)行截圖，否則截的圖可能有問題）

async function main() {   // 啟動(dòng)瀏覽器，訪問頁面的操作         // 截屏操作，使用Page.screenshot函數(shù)      // 截取整個(gè)頁面:Page.screenshot函數(shù)默認(rèn)截取整個(gè)頁面，加上fullPage參數(shù)就是全屏截取      await page1.screenshot({          path: '../imgs/fullScreen.png',          fullPage: true      });      // 截取屏幕中一個(gè)區(qū)域的內(nèi)容      await page1.screenshot({          path: '../imgs/partScreen.jpg',          type: 'jpeg',          quality: 80,          clip: {              x: 0,              y: 0,              width: 375,              height: 300          }      });      browser.close();  }  main();

3.8 生成pdf

除了利用截圖保留快照外，還可以使用pdf保留快照。

async function main() {   // 啟動(dòng)瀏覽器，訪問頁面的操作        // 根據(jù)網(wǎng)頁內(nèi)容生成pdf文件,使用Page.pdf——注意：必須在無頭模式下才可以調(diào)用      await page1.pdf({          path: '../pdf/baidu.pdf'      });      browser.close();  }  main();

到此，關(guān)于“puppeteer是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！