使用Node.js和Puppeteer進行Web爬取

Web Scraping的簡短入門教程

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

我最近用一個帶有LCD顯示屏的Arduino板做了一個小項目。使用Johnny-Five,我們可以使用Node.js對Arduino進行編程,我想獲取在山頂測得的溫度,並將其顯示在Arduino板上。

我用了木偶戲做刮of的任務。 Puppeteer是Google打造的出色工具。這是一個Node庫,我們可以用來控制無頭Chrome實例。

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

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

首先使用安裝

npm install puppeteer

在Node.js文件中,要求它:

const puppeteer = require('puppeteer');

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

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

我們用await,因此我們必須將此方法調用包裝在異步功能,我們立即調用

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

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

接下來,我們稱goto()上的方法page加載該頁面的對象:

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

最後,我們可以得到頁面內容稱呼evaluate()的方法page。該方法具有一個回調函數,我們可以在其中添加檢索所需頁面元素所需的代碼。該函數在頁面上下文中執行,因此我們可以訪問document以及所有瀏覽器API。我們返回一個新對象,這將是我們的結果evaluate()方法調用。

我們可以使用選擇器API並從頁面中檢索數據。

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://website.com')
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">result</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">page</span>.<span style="color:#a6e22e">evaluate</span>(() =&gt; {
<span style="color:#75715e">//...

}) })()

讓我們來解決我遇到的特定問題。這是主持氣象站的頁面,位於3315m的山頂上: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/)

<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">result</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">page</span>.<span style="color:#a6e22e">evaluate</span>(() =&gt; {
  <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">temperature</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">'.column-4'</span>).<span style="color:#a6e22e">innerText</span>
<span style="color:#66d9ef">return</span> {
    <span style="color:#a6e22e">temperature</span>
  }

})

console.log(result)

browser.close() })()

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

{
  temperature: '-9°C'
}

或當前溫度如何。