首页前端开发JavaScript浅析Node.js中怎么使用Puppeteer库

浅析Node.js中怎么使用Puppeteer库

时间2024-01-31 01:10:03发布访客分类JavaScript浏览980
导读:收集整理的这篇文章主要介绍了浅析Node.js中怎么使用Puppeteer库,觉得挺不错的,现在分享给大家,也给大家做个参考。什么是Puppeteer库?能做什么?怎么使用?下面本篇文章就来给大家介绍一下PupPEteer库,了解一下Nod...
收集整理的这篇文章主要介绍了浅析Node.js中怎么使用Puppeteer库,觉得挺不错的,现在分享给大家,也给大家做个参考。什么是Puppeteer库?能做什么?怎么使用?下面本篇文章就来给大家介绍一下PupPEteer库,了解一下Node.js中使用Puppeteer库的方法,希望对大家有所帮助!

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless ChromeNode库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI test或者作为爬虫访问页面来收集数据。

中文文档

https://zhaoqize.gIThub.io/puppeteer-api-zh_CN/#/

作用:

能做什么?

  • 生成页面 PDF。
  • 抓取 SPA(单页应用)并生成预渲染内容。
  • 自动提交表单,进行 UI 测试,键盘输入等。
  • 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
  • 捕获网站的 timeline trace,用来帮助分析性能问题。
  • 测试浏览器扩展。

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

npm i puppeteer

或者

yarn add puppeteer

如何使用:

// 引入 Puppeteer 模块let puppeteer = require('puppeteer')//puppeteer.launch实例化开启浏览器async function test() {
    //可以传入一个options对象({
headless: false}
),可以配置为无界面浏览器,也可以配置有界面浏览器    //无界面浏览器性能更高更快,有界面一般用于调试开发    let options = {
        //设置视窗的宽高        defaultViewport:{
            width:1400,            height:800        }
,        //设置为有界面,如果为true,即为无界面        headless:false,        //设置放慢每个步骤的毫秒数        slowMo:250    }
        let browser = await puppeteer.launch(options);
        // 打来新页面    let page = await browser.newPage();
    // 配置需要访问网址    await page.goto('http://www.baidu.COM')        // 截图    await page.screenshot({
path: 'test.png'}
    );
    //打印pdf    await page.pdf({
path: 'example.pdf', format: 'A4'}
    );
       // 结束关闭    await browser.close();
}
    test()

// 获取页面内容//$$eval函数,使回调函数可以运行在浏览器中,并且可以通过浏览器的方式进行输出    await page.$$eval('#head #s-top-left a',(res) =>
{
            //console.LOG(res);
            res.foreach((item,index) =>
 {
                console.log($(item).attr('href'));
        }
)    }
    )// 监听console.log事件page.on('console',(...args) =>
 {
        console.log(args);
}
    )// 获取页面对象,添加点击事件   ElementHandle = await page.$$('#head #s-top-left a')   ElementHandle[0].click();
    

// 通过表单输入进行搜索    inputBox = await page.$('#form .s_ipt_wr #kw')    await inputBox.focus() //光标定位在输入框    await page.keyboard.type('Node.js') //向输入框输入内容    seArch = await page.$('.s_BTn_wr input[type=submit]')    search.click() //点击搜索按钮

爬虫实践

很多网页通过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访问某网站,其中devicespuppeteer内置的一些常见设备的模拟参数。

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

  • 让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访问跳过扫码。

更多强大功能参考官方文档:https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

更多node相关知识,请访问:nodejs 教程!!

以上就是浅析Node.js中怎么使用Puppeteer库的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: jquery中eq的意思是什么下一篇:node.js 显示乱码怎么办猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处: 浅析Node.js中怎么使用Puppeteer库
本文地址: https://pptw.com/jishu/593282.html
C++引用的意义与引用的本质 node中怎么判断是文件还是文件夹

游客 回复需填写必要信息