之前第一篇爬蟲教程node.js爬蟲入門（一）爬取靜態頁面講解了靜態網頁的爬取，十分簡單，但是遇到一些動態網頁（ajax）的話，直接用之前的方法發送請求就無法獲得我們想要的數據。這時就需要通過爬取動態網頁的方法，selenium和puppeteer都不錯。

這里推薦使用puppeteer，不為別的，只因為他是谷歌親生的，一直在維護更新。下面是翻譯的官方文檔介紹

Puppeteer 是一個提供一系列高級接口通過 DevTools（開發者工具）協議去控制 Chrome 或者 Chromium（谷歌開源）的 Node 庫。它默認運行無頭模式（沒有瀏覽器的UI界面），通過配置也可以運行正常模式。

它能用來：

• 網頁截圖和導出PDF
• 爬取SPA和SSR網站
• 自動化表單提交、界面測試、鍵盤輸入等
• 創建一個最新的自動化測試環境，直接使用最新的chrome版本和JS特性進行測試
• 捕獲網站的時間線軌跡用以幫助診斷性能問題
• 測試谷歌瀏覽器的擴展程序

首先我們還要先安裝再使用，默認安裝的時候會附帶下載一個最新的Chromium，300M左右大小。

npm install puppeteer

如果你本機已經有較新版本的chrome，那么可以僅安裝核心版本，但是啟動puppeteer的時候要配置本地chrome的路徑。

npm install puppeteer-core // 核心版本

假設我們現在要爬取拉勾網前端招聘信息，這個是動態頁面，使用這個例子下面來嘗試爬取。

因為chrome操作全是異步操作，為了避免回調地獄，推薦使用es7的async await，這種語法可讀性高，官方文檔也是如此。

首先使用puppeteer啟動瀏覽器并打開該動態頁面

需要注意這里如果是使用本地瀏覽器的話則需要在啟動瀏覽器配置中傳入本地chrome路徑

const browser = await puppeteer.launch({executablePath: 'C:/Users/Administrator/AppData/Local/Google/Chrome/Application/chrome.exe' })

在chrome環境中執行函數，以獲取所需的數據，然后返回給node的執行環境

上圖可以看到我們所需數據的dom位置，chrome環境執行的函數中我們要獲取并組織所需的數據。

let list = document.querySelectorAll('.s_position_list .item_con_list li') let res = [] for (let i = 0; i < list.length; i++) {res.push({name: list[i].getAttribute('data-positionname'),company: list[i].getAttribute('data-company'),salary: list[i].getAttribute('data-salary'),require: list[i].querySelector('.li_b_l').childNodes[4].textContent.replace(/ |n/g, ''),}) } return res這里有個調試小技巧，獲取數據的函數我們可以直接在chrome的控制臺中寫，以便于調試

最后附上完整的代碼

const puppeteer = require('puppeteer');(async () => {// 啟動瀏覽器const browser = await puppeteer.launch({headless: false, // 默認是無頭模式，這里為了示范所以使用正常模式})// 控制瀏覽器打開新標簽頁面const page = await browser.newPage()// 在新標簽中打開要爬取的網頁await page.goto('https://www.lagou.com/jobs/list_web%E5%89%8D%E7%AB%AF?px=new&city=%E5%B9%BF%E5%B7%9E')// 使用evaluate方法在瀏覽器中執行傳入函數（完全的瀏覽器環境，所以函數內可以直接使用window、document等所有對象和方法）let data = await page.evaluate(() => {let list = document.querySelectorAll('.s_position_list .item_con_list li')let res = []for (let i = 0; i < list.length; i++) {res.push({name: list[i].getAttribute('data-positionname'),company: list[i].getAttribute('data-company'),salary: list[i].getAttribute('data-salary'),require: list[i].querySelector('.li_b_l').childNodes[4].textContent.replace(/ |n/g, ''),})}return res})console.log(data) })()

運行結果

到這里動態網頁的爬取也完成了，但是puppeteer功能遠不止于此，它還有很多強大API可以使用。可以移步官方文檔。

第三期會講講怎么定時執行爬蟲并進行數據庫存儲。

總結

以上是生活随笔為你收集整理的node 没有界面的浏览器_node.js爬虫入门（二）爬取动态页面(puppeteer)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。