node puppeteer(headless chrome)实现网站登录


Posted in Javascript onMay 09, 2018

puppeteer简介

puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等。有了这个神器,写个爬虫,自动签到,网页截图,生成pdf,自动化测试什么的,都不在话下。

puppeteer的简单例子

代码来自官网:

const puppeteer = require('puppeteer');
 
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://example.com');//在地址栏输入网址并等待加载
 await page.screenshot({path: 'example.png'});//截个图
 
 await browser.close();//关掉浏览器
})();

阅读上述代码,我们可以发现,1,代码中每一步都是异步操作,2,每一步操作都对应实际使用浏览器的一个行为。理解这两点对使用这个库有很大帮助。另外,比较常用的两个对象就是browser和page对象,对象上有一堆用来操作两个对象的方法。接下来,我们就写一个登录网站的小demo。

没有验证码的网站

对于没有验证码的网站,基本上就是输入账号,输入密码,点击登录这三步,需要用到page对象的两个方法:type用来在输入框中输入信息,click用来点击登录。下面以登录豆瓣为例来举个例子:

const puppeteer = require('puppeteer');
const account = `123456@qq.com`;
const password = `123456`;
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://www.douban.com/');//打开豆瓣网站
 await page.type('#form_email', account);  
 await page.type('#form_password', password);
 await page.click('.bn-submit');
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来,等同于window.onload
 await page.screenshot({path: 'example.png'});//截个图
 await browser.close();//关掉浏览器
})();

有人说,我怎么知道到底有没有登录成功呢,一种调试的办法就是使用screenshot,如果你看到的是一个验证码页面,说明没有登录成功,还有一种办法像下面这样:

const browser = await puppeteer.launch({headless: false});//打开有界面的浏览器

传入headless:false后会真的打开一个浏览器的界面,这样你就可以实时看到代码执行到什么地方了。接下来我们说说碰到验证码时怎么办。

有验证码的网站

node puppeteer(headless chrome)实现网站登录

碰到有验证码的网站,可以将headless设成false,借助界面输入验证码,同时监听页面加载事件,实现登录,代码如下:

...

 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来,等同于window.onload


//代码中监听跳转事件
if(page.url() === 'https://www.douban.com/accounts/login'){ 
   //登录不成功
  console.log('需要输入验证码');
  //等待再一次跳转
  while(true){
    await page.waitForNavigation({
      waitUntil: 'load'
    })
    console.log(page.url())
    if(page.url() === 'https://www.douban.com/'){
      console.log('登录成功');
      break;
    }
  }
 }

整体思路就是写也个循环,不断监听页面跳转,直到浏览器登录成功后跳转到首页为止。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
JS中移除非数字最多保留一位小数
May 09 #Javascript
JS关于刷新页面的相关总结
May 09 #Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
webstorm中vue语法的支持详解
May 09 #Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 #Javascript
Vue中使用vee-validate表单验证的方法
May 09 #Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
两种php调用Java对象的方法
2006/10/09 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php实现短信发送代码
2015/07/05 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
javaScript对象和属性的创建方法
2007/01/15 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JAVASCRIPT keycode总结
2009/02/04 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
理解JavaScript的变量的入门教程
2015/07/07 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
在django中,关于session的通用设置方法
2019/08/06 Python
django正续或者倒序查库实例
2020/05/19 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python 串口通信的实现
2020/09/29 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
局域网定义和特性
2016/01/23 面试题
优秀教师先进事迹
2014/01/22 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
合同审查法律意见书
2015/06/04 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android