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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
JavaScript类型相关的常用操作总结
Feb 14 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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
提问的智慧
2006/10/09 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
angular2实现统一的http请求头方法
2018/08/13 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python创建xml文件示例
2017/03/22 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
python GUI计算器的实现
2020/10/09 Python
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
总经理检讨书范文
2015/02/16 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
深入理解Pytorch微调torchvision模型
2021/11/11 Python