/

使用Node.js和Puppeteer進行網頁爬蟲

使用Node.js和Puppeteer進行網頁爬蟲

一個關於網頁爬蟲的簡短入門教程

網頁爬蟲的任務是下載網頁並從中提取某種信息。

我最近使用了一個附帶LCD顯示器的Arduino板製作了一個小項目。使用Johnny-Five，可以使用Node.js來編程Arduino，我想要從山頂上測量的溫度，並在Arduino板上顯示出來。

我使用了Google開發的Puppeteer來進行爬蟲任務。Puppeteer是一個很棒的工具，它是一個可以用來控制無頭Chrome實例的Node.js庫。

這意味著我們基本上是使用Chrome，只是以編程的方式操作。

Puppeteer有很多實際的用途，包括自動化測試，製作屏幕截圖，創建單頁面應用程序的服務器端渲染版本等等。

首先，通過以下命令安裝它：

1
npm install puppeteer

在Node.js文件中引入它：

1
const puppeteer = require('puppeteer');

然後，我們可以使用launch()方法創建一個瀏覽器實例：

1
2
3
(async () => {
 const browser = await puppeteer.launch()
})()

我們使用了await，所以我們必須將這個方法調用包裹在一個async函數中，然後立即調用這個函數。

接下來，我們可以使用browser對象上的newPage()方法來獲取page對象：

1
2
3
4
(async () => {
 const browser = await puppeteer.launch()
 const page = await browser.newPage()
})()

接下來，我們在page對象上調用goto()方法來加載頁面：

1
2
3
4
5
(async () => {
 const browser = await puppeteer.launch()
 const page = await browser.newPage()
 await page.goto('https://website.com')
})()

最後，我們可以通過調用page的evaluate()方法來獲取頁面的內容。該方法接受一個回調函數，其中我們可以添加檢索所需頁面元素的代碼。該函數在頁面的上下文中執行，所以我們可以訪問document和所有瀏覽器API。我們返回一個新的對象，這將是我們的evaluate()方法調用的結果。

我們可以使用Selectors API從頁面中檢索數據。

1
2
3
4
5
6
7
8
9
(async () => {
 const browser = await puppeteer.launch()
 const page = await browser.newPage()
 await page.goto('https://website.com')

 const result = await page.evaluate(() => {
 //...
 })
})()

現在讓我們來解決我遇到的具體問題。以下是一個托管在山頂上的氣象站的頁面，海拔3315米: http://www.meteocentrale.ch/it/europa/svizzera/meteo-corvatsch/details/S067910/

我想要獲取那個-9°C的文本。使用瀏覽器檢查器，我可以看到它附有一個column-4類。這不是一個理想的類名，因為它沒有意義，而且如果他們決定添加一個新的列，類名可能會改變，但這就是我們所得到的：

到目前為止，這是完整的代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch()
 const page = await browser.newPage()
 await page.goto('http://www.meteocentrale.ch/it/europa/svizzera/meteo-corvatsch/details/S067910/')

 const result = await page.evaluate(() => {
 let temperature = document.querySelector('.column-4').innerText
 return {
 temperature
 }
 })

 console.log(result)

 browser.close()
})()

如果我們運行這段代碼，result將具有以下值：

1
2
3
{
 temperature: '-9°C'
}

或者是當前的溫度。