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中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
详解React-Todos入门例子
Nov 08 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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禁用cookie后session设置方法分析
2016/10/19 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
详解VUE 数组更新
2017/12/16 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
详解node.js 事件循环
2020/07/22 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python入门篇之条件、循环
2014/10/17 Python
python与php实现分割文件代码
2017/03/06 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python做反被爬保护的方法
2019/07/01 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python tornado修改log输出方式
2019/11/18 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
秘书英文求职信
2014/04/16 职场文书
合伙协议书范本
2014/04/21 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
大学生村官个人总结
2015/02/15 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers