【Nodejs】Puppeteer\爬虫实践

这篇具有很好参考价值的文章主要介绍了【Nodejs】Puppeteer\爬虫实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Nodejs】Puppeteer\爬虫实践,# Node.js,爬虫,arcgis,node.js,npm,前端

puppeteer

文档:puppeteer.js中文文档|puppeteerjs中文网|puppeteer爬虫教程

Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高,centos服务器依赖偏稳定,v6很难使用headless Chrome,提升依赖版本可能出现各种服务器问题(包括且不限于无法使用ssh),最好使用高版本服务器。

Puppeteer因为是一个npm的包,所以安装很简单:

pnpm i puppeteer-core

puppeteer会自动安装一个谷歌浏览器的安装包,所以选择core版,但是得指定启动路径

使用和例子

Puppeteer类似其他框架,通过操作Browser实例来操作浏览器作出相应的反应。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');
  await page.screenshot({path: 'example.png'});
  await page.pdf({path: 'example.pdf', format: 'A4'});
  await browser.close();
})();

上述代码通过puppeteer的launch方法生成了一个browser的实例,对应于浏览器,launch方法可以传入配置项,比较有用的是在本地调试时传入{headless:false}可以关闭headless模式。

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

browser.newPage方法可以打开一个新选项卡并返回选项卡的实例page,通过page上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印pdf的操作。

一个很强大的方法是page.evaluate(pageFunction, ...args),可以向页面注入我们的函数,这样就有了无限可能

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);
  await browser.close();
})();

需要注意的是evaluate方法中是无法直接使用外部的变量的,需要作为参数传入,想要获得执行的结果也需要return出来。因为是一个开源一个多月的项目,现在项目很活跃,所以使用时自行查找api才能保证参数、使用方法不会错。

调试技巧

① 关掉无界面模式,有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器:

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

② 减慢速度,slowMo选项以指定的毫秒减慢Puppeteer的操作。这是另一个看到发生了什么的方法:

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

③捕获console的输出,通过监听console事件。在page.evaluate里调试代码时这也很方便:

page.on('console', msg => console.log('PAGE LOG:', ...msg.args));
await page.evaluate(() => console.log(`url is ${location.href}`));

爬虫实践

很多网页通过user-agent来判断设备,可以通过page.emulate(options)来进行模拟。options有两个配置项,一个为userAgent,另一个为viewport可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无touch事件(hasTouch)。

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  // other actions...
  await browser.close();
});

上述代码则模拟了iPhone6访问某网站,其中devices是puppeteer内置的一些常见设备的模拟参数。

很多网页需要登录,有两种解决方案:

让puppeteer去输入账号密码 常用方法:点击可以使用page.click(selector[, options])方法,也可以选择聚焦page.focus(selector)。 输入可以使用page.type(selector, text[, options])输入指定的字符串,还可以在options中设置delay缓慢输入更像真人一些。也可以使用keyboard.down(key[, options])来一个字符一个字符的输入。 如果是通过cookie判断登录状态的可以通过page.setCookie(...cookies),想要维持cookie可以定时访问。
Tip:有些网站需要扫码,但是相同域名的其他网页却有登录,就可以尝试去可以登录的网页登录完利用cookie访问跳过扫码。

简单例子

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://baidu.com');
  await page.type('#kw', 'puppeteer', {delay: 100});
  page.click('#su')
  await page.waitFor(1000);
  const targetLink = await page.evaluate(() => {
    return [...document.querySelectorAll('.result a')].filter(item => {
      return item.innerText && item.innerText.includes('Puppeteer的入门和实践')
    }).toString()
  });
  await page.goto(targetLink);
  await page.waitFor(1000);
  browser.close();
})()

【Nodejs】Puppeteer\爬虫实践,# Node.js,爬虫,arcgis,node.js,npm,前端文章来源地址https://www.toymoban.com/news/detail-609329.html

多元素处理

const puppeteer = require('puppeteer-core');

(async function () {
  //puppeteer.launch实例开启浏览器,
  //可以传入一个options对象,可以配置为无界面浏览器,也可以配置为有界面浏览器
  //无界面浏览器性能更高更快,有界面一般用于调试开式

  let options = {
    //设置视窗的宽高
    defaultViewport: {
      width: 1400,
      height: 800,
    },
    //设置为有界面,如果为true,即为无界面
    // headless: false,
    args: ['--window-size=1400,700'],
    //指定浏览器路径
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
  };
  let browser = await puppeteer.launch(options);
  //打开新页面
  let page = await browser.newPage();
  //访问页面
  await page.goto('https://www.jd.com/');
  //截屏
  //   await page.screenshot({ path: 'example.png', fullPage: true });
  //获取页面内容
  // page.$eval相当于querySelector,然后在对这个元素进行dom操作
  // page.$$eval相当于querySelectorAll,然后在对这个元素进行dom操作
  let input = await page.$('#key');
  await input.type('手机');
  await page.keyboard.press('Enter');
  await page.waitForSelector('.gl-warp>.gl-item:last-child');
  const lis = await page.$$eval('.gl-warp>.gl-item', els =>
    //这个el就是获取到的对象
    //这里可以使用dom操作
    // console.log(el);
    els.map(item => item.innerText)
  );
  //这个lis就是上面回调函数的返回值
  console.log(lis);

  //关闭浏览器
  await browser.close();
})();

输入文本与元素点击

const puppeteer = require('puppeteer-core');
(async function () {
  let options = {
    defaultViewport: {
      width: 1400,
      height: 800,
    },
    headless: false,
    args: ['--window-size=1400,700'],
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
  };
  let browser = await puppeteer.launch(options);
  let page = await browser.newPage();
  await page.goto('https://www.ygdy8.com/index.html');
  //获取页面内容
  //  page.$相当于querySelector
  //  page.$$相当于querySelectorAll
  //这些返回的是一个elementHandle对象
  const input = await page.$('input[name="keyword"]'); // 定位输入框
  /*  1
  input.focus()
  page.keyboard.type("电影") */
  //2
  await input.type('电影');

  /* 1  
 elementHandle.click()
  const search = await page.$('input[name="Submit"]'); // 定位搜索按钮
  await search.click();  // 点击 */
  //2
  await page.click('input[name="Submit"]');
})();

获取元素的文本值

const puppeteer = require('puppeteer-core');
(async function () {
  let options = {
    defaultViewport: {
      width: 1400,
      height: 700,
    },
    args: ['--window-size=1400,700'],
    headless: false,
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
  };
  let browser = await puppeteer.launch(options);
  let page = await browser.newPage();
  await page.goto('https://www.baidu.com/');
  let input = await page.waitForSelector('#kw');
  await input.type('hello world');
  let btn = await page.$('#su');
  btn.click();
  /* 等待指定的选择器匹配的元素出现在页面中,如果调用此方法时已经有匹配的元素,
  那么此方法立即返回。如果指定的选择器在超时时间后扔不出现,此方法会报错。 
  返回: <Promise<ElementHandle>>*/
  await page.waitForSelector('div#content_left > div.result-op.c-container.xpath-log');
  let text = await page.$eval(
    'div#content_left > div.result-op.c-container.xpath-log',
    el => el.innerText
  );
  console.log(text);
})();

处理js方法

const puppeteer = require('puppeteer-core');
(async function () {
  let options = {
    defaultViewport: {
      width: 1400,
      height: 700,
    },
    args: ['--window-size=1400,700'],
    // headless: false,
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
  };
  let browser = await puppeteer.launch(options);
  let page = await browser.newPage();
  await page.goto('https://www.baidu.com/');
  let input = await page.waitForSelector('#kw');
  await input.type('hello world');
  let btn = await page.$('#su');
  btn.click();
  await page.waitForSelector('div#content_left > div.result-op.c-container.xpath-log');
  //里面可以直接写js代码
  let text = await page.evaluate(() => {
    let div = document.querySelector('div#content_left > div.result-op.c-container.xpath-log');
    return div.innerText;
  });
  console.log(text);
})();

到了这里,关于【Nodejs】Puppeteer\爬虫实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • npm安装报错:npm ERR! code EPERMnpm ERR! syscall mkdirnpm ERR! path D:\nodejs\node_cache\_cacachenpm ERR

    安装node.js配置完成后,安装测试报错以下内容: npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:nodejsnode_cache_cacache npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, mkdir \\\'D:nodejsnode_cache_cacache\\\' npm ERR!  [Error: EPERM: operation not permitted, mkdir \\\'D:nodejsnode_cache_cacache\\\'] { npm ERR!  

    2024年03月19日
    浏览(51)
  • 如何解决使用npm出现Cannot find module ‘XXX\node_modules\npm\bin\npm-cli.js’错误

    遇到问题:用npm下载组件时出现 Cannot find module ‘D:softwarenode_modulesnpmbinnpm-cli.js’ 问题,导致下载组件不能完成。 解决方法:下载缺少的npm文件即可解决放到指定node_modules目录下即可解决。 分析问题: 我们找到提示路径去看发现,在node_modules下没有npm目录 可以看到,存

    2024年02月12日
    浏览(88)
  • 最新版 nodejs和npm版本不匹配问题解决:ERROR: npm v9.5.1 is known not to run on Node.js

    最近项目用到了node和npm ,查看一下当前版本,发现有报错   ERROR: npm v9.6.2 is known not to run on Node.js v12.13.1. You\\\'ll need to upgrade to a newer Node.js version in order to use this version of npm. This version of npm supports the following node versions: `^14.17.0 || ^16.13.0 || =18.0.0`. You can find the latest version at https

    2023年04月16日
    浏览(95)
  • Puppeteer+RabbitMQ:Node.js 批量加工pdf服务架构设计与落地

    智慧作业最近上线「 个性化手册 」(简称个册)功能,一份完整的个性化手册分为 三部分 : 学情分析 :根据学生阶段性的学习和考试情况进行学情分析、归纳、总结,汇总学情数据; 精准推荐 :推荐算法基于学情数据结合知识图谱进行精准练习题推荐; 错题回顾 :错题

    2023年04月19日
    浏览(41)
  • 解决npm install报错 npm ERR! gyp ERR! cwd D:\Projec\xxx\node_modules\node-sass (node-sass版本问题)

    vue项目换电脑后npm install发现一直报如下的错误: node-sass版本不兼容,比较老。还出现找不到python路径的错误。node-sass 需要 node-gyp安装时需要进行转译所以可能会出现各种按安装问题。且node-sass 本身就已经是deprecated状态了。如果不是维护老项目不建议再使用 由于它只用于开

    2024年02月09日
    浏览(67)
  • vue-cli安装后vue -V报错:C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

    运行 vue -V 一直报错, 网上常识各种办法无效。 包括: 卸载: npm uninstall -g @vue/cli 和 npm uninstall -g vue-cli 重新安装: npm install -g vue-cli 和 npm install -g @vue/cli 清理缓存: npm cache clean --force 更新: npm update 关机重启 N次 依然报错: C:UsersadminAppDataRoamingnpmnode_modules@vueclibin

    2024年02月03日
    浏览(39)
  • 解决npm ERR! path E:\XXX\node_modules\node-sass的问题

    在Node.js项目中,我们经常使用npm来安装和管理各种依赖包。然而,有时候我们可能会遇到一些关于npm的错误,其中最常见的就是\\\"npm ERR! path E:XXXnode_modulesnode-sass\\\"。这个错误通常是由于node-sass的路径问题导致的。下面我将详细介绍如何解决这个问题。 首先,我们需要确定问

    2024年02月20日
    浏览(54)
  • npm ERR! path E:node_modules\node-sass

    分析报错发现有关 python2 环境相关报错 解决办法: 需要再电脑中安装python 2.X版本的环境 因为我本地电脑有python 3.9的环境,所以我 使用 Anaconda安装python环境 1、安装 python 2.7 2、激活虚拟环境 3、找到环境位置 4、使用 node配置python环境 到此结束 重新安装node依赖就可以了

    2024年04月08日
    浏览(82)
  • 【Nodejs】Node.js简介

    Node 的重要性已经不言而喻,很多互联网公司都已经有大量的高性能系统运行在 Node 之上。Node 凭借其单线程、异步等举措实现了极高的性能基准。此外,目前最为流行的 Web 开发模式是前后端分离的形式,即前端开发者与后端开发者在自己喜欢的 IDE 上独立进行开发,然后通

    2024年02月12日
    浏览(57)
  • Node js 升级更新后 npm用不了 npm npm does not support Node.js 或者node版本太低

    一开始是出现node版本太低,然后升级了node发现升级后npm不支持,发现是node的版本需要与npm对应,而npm没法跨级升,下面教大家解决办法: 一、检查你的nodejs和npm的版本能否对应得上 (注:如果npm版本查询显示空也可以用下面的方法) 这里附上 npm和node版本对照官网 : 以往的

    2024年02月02日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包