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

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

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

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

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

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

首先,通過以下命令安裝它:

npm install puppeteer

在Node.js文件中引入它:

const puppeteer = require('puppeteer');

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

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

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

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

(async () => {
 const browser = await puppeteer.launch()
 const page = await browser.newPage()
})()

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

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

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

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

(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類。這不是一個理想的類名,因為它沒有意義,而且如果他們決定添加一個新的列,類名可能會改變,但這就是我們所得到的:

到目前為止,這是完整的代碼:

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將具有以下值:

{
 temperature: '-9°C'
}

或者是當前的溫度。