使用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'
}

或當前溫度如何。



在線技術維基！