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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
全面分析JavaScript 继承
May 30 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
webpack5 联邦模块介绍详解
Jul 08 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下使用以下代码连接并测试
2008/04/09 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
如何用python整理附件
2018/05/13 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
浅析Python requests 模块
2020/10/09 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
网络体系结构及协议的定义
2014/03/13 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
大学生求职信
2014/06/17 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书