hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

运用Node.js+Chrome+Puppeteer完成网站的爬取_WEB前端开发

2020-09-16前端开发搜奇网5°c
A+ A-

视频教程引荐:nodejs 教程

我们将学到什么?

在本教程中,您将进修怎样运用 JavaScript 自动化和清算 web 。要做到这一点,我们将运用 Puppeteer 。Puppeteer是一个许可我们掌握无头Chrome 的 Node 库 API。Headless Chrome是一种在不实在运转 Chrome 的情况下运转 Chrome 浏览器的要领。

假如这一切都没有意义,您真正须要晓得的是,我们将编写 JavaScript 代码,使 Google Chrome 完成自动化。

入手下手之前

入手下手之前,您须要在盘算机上装置 Node 8+。您能够在此处举行装置。确保挑选「当前」版本 8+ 版本。

假如您之前从未运用过 Node 并想进修,请检察:进修 Node JS 3 种最好在线 Node JS 课程

装置完 Node 后,建立一个新的项目文件夹并装置 Puppeteer。 Puppeteer 附带了 Chromium 的最新版本,该版本能够与 API 一同运用:

npm install --save puppeteer

例 #1 — 截图

装置完 Puppeteer 今后,我们将起首引见一个简朴的示例。此示例来自Puppeteer 文档(举行了少许变动)。我们将经由过程代码逐渐引见对您接见的网站怎样截图。

起首,建立一个名为test.js的文件,然后复制以下代码:

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

让我们逐行浏览这个例子。

  • 第1行: 我们须要我们先前装置的 Puppeteer 依靠项
  • 第3-10行:这是我们的主函数getPic()。该函数将保留我们一切的自动化代码。
  • 第12行:在第12行上,我们挪用getPic()函数。

须要注重的是,getPic()函数是一个异步函数,并利用了新的ES 2017async/await功用。由于这个函数是异步的,所以当挪用时它返回一个Promise。当Async函数终究返回值时,Promise将被剖析(假如存在毛病,则Reject)。

由于我们运用的是async函数,因而我们能够运用await表达式,该表达式将停息函数实行并守候Promise剖析后再继承。 假如如今一切这些都没有意义,那也没紧要。跟着我们继承进修教程,它将变得越发清楚。

如今,我们概述了主函数,让我们深切相识其内部功用:

  • 第4行:
const browser = await puppeteer.launch();

这是我们现实启动 puppeteer 的处所。现实上,我们正在启动 Chrome 实例,并将其设置为即是我们新建立的browser变量。由于我们运用了await关键字,因而该函数将在此处停息,直到Promise剖析(直到我们胜利建立 Chrome 实例或失足)为止。

  • 第5行:
const page = await browser.newPage();

在这里,我们在自动浏览器中建立一个新页面。我们守候新页面翻开并将其保留到我们的page变量中。

  • 第6行:
await page.goto('https://google.com');

运用我们在代码的末了一行中建立的page,如今能够关照page导航到URL。在此示例中,导航到 google。我们的代码将停息,直到页面加载终了。

  • 第7行:
await page.screenshot({path: 'google.png'});

如今,我们关照 Puppeteer 截取当前页面的屏幕。screenshot()要领将自定义的.png屏幕截图的保留位置的对象作为参数。一样,我们运用了await关键字,因而在实行操纵时我们的代码会停息。

  • 第9行:
await browser.close();

末了,我们到了getPic()函数的末端,而且封闭了browser

运转示例

您能够运用 Node 运转上面的示例代码:

node test.js

这是生成的屏幕截图:


太棒了!为了增添兴致(并简化调试),我们能够不以无头体式格局运转代码。

这究竟是什么意思?本身尝试一下,看看吧。变动代码的第4行从:

const browser = await puppeteer.launch();

改成:

const browser = await puppeteer.launch({headless: false});

然后运用 Node 再次运转:

node test.js

太酷了吧?当我们运用{headless:false}运转时,您能够实在看到 Google Chrome 根据您的代码事情。

在继承之前,我们将对这段代码做末了一件事。还记得我们的屏幕截图有点偏离中间吗?那是由于我们的页面有点小。我们能够经由过程增加以下代码行来变动页面的大小:

await page.setViewport({width: 1000, height: 500})

这个屏幕截图更好看点:

这是本示例的终究代码:

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.setViewport({width: 1000, height: 500})
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

示例 #2-让我们抓取一些数据

既然您已相识了 Headless Chrome 和 Puppeteer 的事情道理,那末让我们看一个更庞杂的示例,在该示例中我们事实上能够抓取一些数据。

起首, 在此处检察 Puppeteer 的 API 文档。 如您所见,我们有许多要领能够运用, 不仅能够点击网站,还能够填写表格,输入内容和读取数据。

在本教程中,我们将抓取 Books To Scrape ,这是一家特地设置的假书店,旨在协助人们演习抓取。

在统一目次中,建立一个名为scrape.js的文件,并插进去以下榜样代码:

const puppeteer = require('puppeteer');

let scrape = async () => {
  // 现实的抓取从这里入手下手...

  // 返回值
};

scrape().then((value) => {
    console.log(value); // 胜利!
});

抱负情况下,在看完第一个示例今后,上面的代码对您有意义。假如没有,那没紧要!

我们上面所做的须要之前装置的puppeteer依靠关联。然后我们有scraping()函数,我们将在个中填入抓取代码。此函数将返回值。末了,我们挪用scraping函数并处置惩罚返回值(将其记录到掌握台)。

我们能够经由过程在scrape函数中增加一行代码来测试以上代码。碰运气:

let scrape = async () => {
  return 'test';
};

如今,在掌握台中运转node scrape.js。您应当返回test!圆满,我们返回的值正在记录到掌握台。如今我们能够入手下手补充我们的scrape函数。

步骤1:设置

我们须要做的第一件事是建立浏览器实例,翻开一个新页面,然后导航到URL。我们的操纵要领以下:

let scrape = async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('http://books.toscrape.com/');
  await page.waitFor(1000); // Scrape browser.close();
  return result;};

太棒了!让我们逐行进修它:

起首,我们建立浏览器,并将headless情势设置为false。这使我们能够正确地视察发生了什么:

const browser = await puppeteer.launch({headless: false});

然后,我们在浏览器中建立一个新页面:

const page = await browser.newPage();

接下来,我们转到books.toscrape.com URL:

await page.goto('http://books.toscrape.com/');

我挑选性地增加了1000毫秒的耽误。只管一般没有必要,但这将确保页面上的一切内容都加载:

await page.waitFor(1000);

末了,完成一切操纵后,我们将封闭浏览器并返回效果。

browser.close();
return result;

步骤2:抓取

正如您如今大概已肯定的那样,Books to Scrape 具有大批的实在书本和这些书本的捏造数据。我们要做的是挑选页面上的第一本书,然后返回该书的标题和价钱。这是要抓取的图书的主页。我有兴致点第一本书(下面赤色标记)

检察 Puppeteer API,我们能够找到单击页面的要领:

page.click(selector[, options])
  • selector 用于挑选要单击的元素的挑选器,假如有多个满足挑选器的元素,则将单击第一个。

荣幸的是,运用 Google Chrome 开发者东西能够异常轻松地肯定特定元素的挑选器。只需右键单击图象并挑选搜检:

这将翻开元素面板,凸起显现该元素。如今,您能够单击左边的三个点,挑选复制,然后挑选复制挑选器:

太棒了!如今,我们复制了挑选器,而且能够将click要领插进去程序。像如许:

await page.click('#default > p > p > p > p > section > p:nth-child(2) > ol > li:nth-child(1) > article > p.image_container > a > img');

我们的窗口将单击第一个产物图象并导航到该产物页面!

在新页面上,我们对商品名称和商品价钱均感兴致(以下以赤色概述)


为了检索这些值,我们将运用page.evaluate()要领。此要领使我们能够运用内置的 DOM 挑选器,比方querySelector()

我们要做的第一件事是建立page.evaluate()函数,并将返回值保留到变量result中:

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

在函数里,我们能够挑选所需的元素。我们将运用 Google Developers 东西再次处理这一问题。右键单击标题,然后挑选搜检:

正如您将在 elements 面板中看到的那样,标题只是一个h1元素。我们能够运用以下代码挑选此元素:

let title = document.querySelector('h1');

由于我们愿望文本包括在此元素中,因而我们须要增加.innerText-终究代码以下所示:

let title = document.querySelector('h1').innerText;

一样,我们能够经由过程单击右键搜检元夙来挑选价钱:

如您所见,我们的价钱有price_color类,我们能够运用此类挑选元素及其内部文本。这是代码:

let price = document.querySelector('.price_color').innerText;

如今我们有了所需的文本,能够将其返回到一个对象中:

return {
  title,
  price
}

太棒了!我们挑选标题和价钱,将其保留到一个对象中,然后将该对象的值返回给result变量。放在一同是如许的:

const result = await page.evaluate(() => {
  let title = document.querySelector('h1').innerText;
  let price = document.querySelector('.price_color').innerText;
  return {
     title,
     price
}});

剩下要做的唯一一件事就是返回result,以便能够将其记录到掌握台:

return result;

您的终究代码应以下所示:

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    await page.goto('http://books.toscrape.com/');
    await page.click('#default > p > p > p > p > section > p:nth-child(2) > ol > li:nth-child(1) > article > p.image_container > a > img');
    await page.waitFor(1000);

    const result = await page.evaluate(() => {
        let title = document.querySelector('h1').innerText;
        let price = document.querySelector('.price_color').innerText;

        return {
            title,
            price
        }

    });

    browser.close();
    return result;
};

scrape().then((value) => {
    console.log(value); // 胜利!
});

您能够经由过程在掌握台中键入以下内容来运转 Node 文件:

node scrape.js // { 书名: 'A Light in the Attic', 价钱: '£51.77' }

您应当看到所选图书的标题和价钱返回到屏幕上!您方才抓取了网页!

示例 #3 ——完美它

如今您大概会问本身,当标题和价钱都显现在主页上时,为何我们要点击书?为何不从那边抓取呢?而在我们尝试时,为何不抓紧一切书本的标题和价钱呢?

由于有许多要领能够抓取网站! (另外,假如我们留在首页上,我们的标题将被删掉)。然则,这为您供应了演习新的抓取妙技的绝好时机!

应战
目的 ——从首页抓取一切书名和价钱,并以数组情势返回。这是我终究的输出效果:


入手下手!看看您是不是能够本身完成此使命。与我们刚建立的上述程序异常类似,假如卡住,请向下转动…
GO! See if you can accomplish this on your own. It’s very similar to the above program we just created. Scroll down if you get stuck…

提醒:
此应战与上一个示例之间的重要区别是须要遍历大批效果。您能够根据以下要领设置代码来做到这一点:

const result = await page.evaluate(() => {
  let data = []; // 建立一个空数组
  let elements = document.querySelectorAll('xxx'); // 挑选悉数   
    // 遍历每一个产物
    // 挑选标题
    // 挑选价钱
    data.push({title, price}); // 将数据放到数组里, 返回数据; 
    // 返回数据数组
});

假如您不明白,没事!这是一个辣手的问题…… 这是一种大概的处理计划。在今后的文章中,我将深切研究此代码及其事情体式格局,我们还将引见更高等的抓取手艺。假如您想收到关照,请务必 在此处输入您的电子邮件

计划:

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    await page.goto('http://books.toscrape.com/');

    const result = await page.evaluate(() => {
        let data = []; // 建立一个空数组, 用来存储数据
        let elements = document.querySelectorAll('.product_pod'); // 挑选一切产物

        for (var element of elements){ // 遍历每一个产物
            let title = element.childNodes[5].innerText; // 挑选标题
            let price = element.childNodes[7].children[0].innerText; // 挑选价钱

            data.push({title, price}); // 将对象放进数组 data 
        }

        return data; // 返回数组 data
    });

    browser.close();
    return result; //  返回数据
};

scrape().then((value) => {
    console.log(value); // 胜利!
});

结束语:

感谢您的浏览!

英文原文地点:https://codeburst.io/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js-b18efb9e9921

更多编程相干学问,请接见:编程入门!!

以上就是运用Node.js+Chrome+Puppeteer完成网站的爬取的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
运用Node.js+Chrome+Puppeteer完成网站的爬取_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300751.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。