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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
js事件触发操作实例分析
Jun 21 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 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
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
python 爬取微信文章
2016/01/30 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
pymysql的简单封装代码实例
2020/01/08 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
python关于倒排列的知识点总结
2020/10/13 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
仓库主管岗位职责
2014/03/02 职场文书
经典禁毒标语
2014/06/16 职场文书
毕业设计致谢语
2015/05/14 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书