Puppeteer 爬取動(dòng)態(tài)生成的網(wǎng)頁(yè)實(shí)戰(zhàn)

更新時(shí)間：2018年11月14日 09:16:34 作者：Alone1469546971808

這篇文章主要介紹了Puppeteer 爬取動(dòng)態(tài)生成的網(wǎng)頁(yè)實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Puppeteer 相關(guān)介紹與安裝不過多介紹，可通過以下鏈接進(jìn)行學(xué)習(xí)

一、Puppeteer

開源地址

英文文檔

中文社區(qū)

二、爬取動(dòng)態(tài)網(wǎng)頁(yè)

1. 需求

首先，了解下我們的需求: 爬取zoomcharts 文檔中 Net Chart 目錄下所有訪問連接對(duì)應(yīng)的頁(yè)面，并保存到本地

2. 研究 ZoomCharts 文檔頁(yè)面結(jié)構(gòu)

首先，我們得研究透 ZoomCharts 頁(yè)面如何加載，以及左側(cè)導(dǎo)航的 DOM 樹結(jié)構(gòu)，才好進(jìn)行下一步操作

頁(yè)面首次加載

頁(yè)面首次加載，左側(cè)導(dǎo)航第一個(gè)目錄 Introduction 高亮，從控制臺(tái)可看出，該元素增加了 active 類，同時(shí) li[data-section="net-chart"] 節(jié)點(diǎn)下只有一個(gè)元素節(jié)點(diǎn) a

點(diǎn)擊 Net Chart 目錄

點(diǎn)擊 Net Chart 目錄, Net Chart 目錄高亮，下拉顯示子目錄，查看控制臺(tái)，其元素節(jié)點(diǎn)增加 active 類，并增加 ul 子元素節(jié)點(diǎn), 此時(shí)，第一個(gè)子目錄節(jié)點(diǎn)也只有一個(gè)子元素節(jié)點(diǎn) a

結(jié)論

不難發(fā)現(xiàn), 左側(cè)目錄是動(dòng)態(tài)生成的，而不是靜態(tài)寫死的，只有點(diǎn)擊父級(jí)目錄，其子目錄才會(huì)生成顯示，同時(shí)，父級(jí)目錄元素上的 drop 類表明存在子級(jí)目錄

3. 編寫主程序

通過上面分析，得出大概流程如下

從上到下，遍歷 Net Chart 目錄的 DOM 樹，當(dāng)找到 a.drop 的元素節(jié)點(diǎn)，模擬鼠標(biāo)點(diǎn)擊事件 click ，生成子目錄節(jié)點(diǎn)
找到 Net Chart 目錄下所有的 a 鏈接，生成一個(gè)數(shù)組
遍歷數(shù)組，訪問每一個(gè)子目錄頁(yè)面，保存頁(yè)面的 html 文件到本地

接下來實(shí)現(xiàn)每個(gè)具體流程

項(xiàng)目初始化

安裝 puppeteer , rimraf (文件夾操作時(shí)需用到)

npm i -S puppeteer rimraf

新建 test.js 文件并引入

const puppeteer = require('puppeteer');
const chalk = require('chalk');
const path = require('path');
const https = require('https');
const fs = require('fs');
const rm = require('rimraf');

const settings = {
 headless: false
}

function resolve(dir, dir2 = '') {
	return path.posix.join(__dirname, './', dir, dir2);
}

async function main () {
 const browser = await puppeteer.launch(settings); // 創(chuàng)建一個(gè)Browser 對(duì)象
 try {
  const page = await browser.newPage(); // 使用 Browser 創(chuàng)建 Page 
  page.setDefaultNavigationTimeout(600000);
  // 監(jiān)聽 console 
  page.on('console', msg => {
   for (let i = 0; i < msg.args().length; ++i) {
    console.log(`${i}: ${msg.args()[i]}`);
   }
  });
  
  <!-- main start -->
  // main 區(qū)域
  
  <!-- end start-->
  console.log('服務(wù)正常結(jié)束')
 } catch (error) {
  console.log('服務(wù)出現(xiàn)錯(cuò)誤：')
  console.log(error)
 } finally {
  
 }
}

main()

接下來所有代碼都在 main 區(qū)域內(nèi)完成，完整代碼可訪問github代碼倉(cāng)庫(kù) 查看，下面僅列出每部分的思路

創(chuàng)建文件夾，用于保存爬取的文件

定義文件輸出路徑
根據(jù)路徑生成文件夾
當(dāng)文件夾已經(jīng)存在，先刪除，再新建

實(shí)現(xiàn) Net Chart 目錄下所有 a.drop 元素的點(diǎn)擊事件

這部分涉及到DOM 操作, 只有在 page.evaluate() 中才能訪問真實(shí)的 DOM 元素，同時(shí)，在 page.evaluate() 中不能直接調(diào)用外面定義的函數(shù)，可將函數(shù)傳遞進(jìn)去，或?qū)⒑瘮?shù)綁定到 window 對(duì)象上

await page.evaluate(async () => {
 const rootNode = document.querySelector('#menu > ul > li:nth-child(5) > ul > li:nth-child(5)');
 await window.walkDOM(rootNode)
})

此時(shí)，綁定到 window 對(duì)象上的 walkDOM 函數(shù)需要在 page.evaluateOnNewDocument 函數(shù)中定義才能生效

await page.evaluateOnNewDocument(() => {
 // 遍歷DOM
 window.walkDOM = (node) => {
  if (node === null) {
   return
  }
  if (node.tagName === 'A' && node.className.indexOf('drop') > -1) {
   node.click() // 點(diǎn)擊事件
  }
  node = node.firstElementChild
  while (node) {
   walkDOM(node)
   node = node.nextElementSibling
  }
 }
})

當(dāng)Net Chart 目錄下所有 a.drop 元素點(diǎn)擊過后， Net Chart 目錄下所有后代子目錄都會(huì)加載生成，接下來操作就簡(jiǎn)單了

獲取Net Chart 目錄下所有 a 元素