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

或当前温度如何。