最新公告
  • 欢迎您访问爱上源码网,分享精品整站源码,网站模板,游戏源码,APP小程序源码以及视频教程免费下载;服务永无止境!立即加入我们
  • Chrome+Puppeteer+Node.js爬取网站教程分享

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图

    我们将学到什么?

    在本教程中,您将学习如何使用 JavaScript 自动化和清理 web 。要做到这一点,我们将使用 Puppeteer 。Puppeteer是一个允许我们控制无头Chrome 的 Node 库 API。Headless Chrome是一种在不真实运行 Chrome 的情况下运行 Chrome 浏览器的方法。

    【视频教程推荐:nodejs 教程 】

    如果这一切都没有意义,您真正需要知道的是,我们将编写 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

    这是生成的屏幕截图:

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图1
    太棒了!为了增加乐趣(并简化调试),我们可以不以无头方式运行代码。

    这到底是什么意思?自己尝试一下,看看吧。更改代码的第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})

    这个屏幕截图更好看点:

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图2

    这是本示例的最终代码:

    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 拥有大量的真实书籍和这些书籍的伪造数据。我们要做的是选择页面上的第一本书,然后返回该书的标题和价格。这是要抓取的图书的主页。我有兴趣点第一本书(下面红色标记)
    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图3

    查看 Puppeteer API,我们可以找到单击页面的方法:

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

    幸运的是,使用 Google Chrome 开发者工具可以非常轻松地确定特定元素的选择器。只需右键单击图像并选择检查:
    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图4

    这将打开元素面板,突出显示该元素。现在,您可以单击左侧的三个点,选择复制,然后选择复制选择器:

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图5

    太棒了!现在,我们复制了选择器,并且可以将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');

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

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

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图6
    为了检索这些值,我们将使用page.evaluate()方法。此方法使我们可以使用内置的 DOM 选择器,例如querySelector()

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

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

    在函数里,我们可以选择所需的元素。我们将使用 Google Developers 工具再次解决这一问题。右键单击标题,然后选择检查:

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图7

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

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

    由于我们希望文本包含在此元素中,因此我们需要添加.innerText-最终代码如下所示:

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

    同样,我们可以通过单击右键检查元素来选择价格:

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图8

    如您所见,我们的价格有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 ——完善它

    现在您可能会问自己,当标题和价格都显示在主页上时,为什么我们要点击书?为什么不从那里抓取呢?而在我们尝试时,为什么不抓紧所有书籍的标题和价格呢?

    因为有很多方法可以抓取网站! (此外,如果我们留在首页上,我们的标题将被删掉)。但是,这为您提供了练习新的抓取技能的绝好机会!

    挑战
    目标 ——从首页抓取所有书名和价格,并以数组形式返回。这是我最终的输出结果:

    爱上源码网文章Chrome+Puppeteer+Node.js爬取网站教程分享的内容插图9
    开始!看看您是否可以自己完成此任务。与我们刚创建的上述程序非常相似,如果卡住,请向下滚动…
    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-automati…

    译文地址:https://learnku.com/nodejs/t/44845

    更多编程相关知识,可访问:编程入门!!

    以上就是Chrome+Puppeteer+Node.js爬取网站教程分享的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:node puppeteer chrome Node.js
  • 本文转载于:learnku,如有侵犯,请联系916990011@qq.com删除
    • 上一篇:ajax如何实现excel报表导出
    • 下一篇:谈谈Node.js热更新的配置和vscode断点调试

    相关文章

    相关视频

    • 深入了解Node.js多线程(指南)
    • 深入理解Node.js 中的流(Stream)
    • nodejs安装和配置环境的方法介绍
    • 了解一下Node.js Casbin
    • Chrome+Puppeteer+Node.js爬…
    • Nodejs安装
    • Nodejs 核心模块
    • Node.js 自定义模块
    • Node.js 图片操作
    • Node.js 路径模块

    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
    本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~

    重要声明:
    1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负!
    2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理!给予奖励!
    3.本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!本站提供有偿服务!如有侵权请联系在线客服!
    4.如您手中有优质资源或教程,可以自助投稿发布,成功分享后有奖励和额外收入!
    5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理!
    6.400电话/软著/ICP,EDI许可证/商标特价办理中!
    爱上源码下载网 » Chrome+Puppeteer+Node.js爬取网站教程分享

    常见问题FAQ

    从网站下载的源码都有安装教程么?不会安装怎么办?
    本站发布的网站源码和模板资源大部分在压缩包内都有教程,如您不会安装可以联系本站在线技术进行付费安装。
    爱上源码的所有源码都是亲测能正常运行的么?
    本站目前拥有资源10w+,包含整站源码,网站模板,游戏源码,小程序源码,视频教程,破解软件等,每天也在测试更新;因时间和精力有限我们无法对资源进行一一测试,只能保证所分享资源内容无误,希望理解。
    我手中的优质资源可以在你这换钱或者VIP么?
    爱上源码支持投稿,欢迎发布您手中的优质资源进行售卖;本站VIP支持免费获取,目前邀请10人注册爱上源码即可免费获取VIP。
    爱上源码除了资源分享还有其他业务没?
    【价值30W+微擎模块出售正版商业微擎坑位及招收代理,详情咨询本站客服!】我们团队目前运营并推广几套商业化saas智能小程序系统能满足大部分小程序开发需求,并由SaaS和独立部署版商城小程序系统;另外销售400电话,各种ICP/EDI资质证书办理,软著和商标注册服务等。

    发表评论

    • 28会员总数(位)
    • 35644资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 539稳定运行(天)

    提供最优质的资源集合

    开通VIP 源码下载