1. 打开前端网，点击登录。
2. 填写账号，密码。
3. 点解验证按钮，通过滑动验证，最后成功登陆。
{
setTimeout(() =>
{
try
{
resolve
(1)
} catch (
E) {
re
ject(0)
}
},delay
);
})
}
let page = null
let btn_position = null
let times = 0 // 执行重新滑动的次数
const distanceError = [-10,2,3,
5] // 距离误差
async function run()
{
const browser = await puppeteer.launch(
{
headless:
false //这里我设置成
false主要是为了让大家看到效果，设置为true就不会打开浏览器
}
);
page = await browser.newPage(
);
// 1.打开前端网
await page.emulate(iPhon
E);
await page.goto('
https://www.qdfun
s.com/'
);
await timeout(1000
);
// 2.打开登录页面
page.click('a[data-type=login]')
await timeout(1000
);
// 3.输入账号密码
page.type('input[data-type=email]','
你的账号')
await timeout(500
);
page.type('input[placeholder=密码]','
你的密码')
await timeout(1000
);
// 4.点击验证
page.click('.gee
test_radar_tip')
await timeout(1000
);
btn_position = await getBtnPosition(
);
// 5.滑动
drag(null)
}
/
**
* 计算按钮需要滑动的距离
* */
async function calculateDistance()
{
const distance = await page.evaluate(() =>
{
// 比较像素,找到缺口的大概位置
function compare(document)
{
const ctx1 = document.query@R_
616_10288@ctor('.gee
test_canvas_fullbg'
); // 完成图片
const ctx2 = document.query@R_
616_10288@ctor('.gee
test_canvas_bg'
); // 带缺口图片
const pixelDifference = 30; // 像素差
let res = []; // 保存像素差较大的x坐标
// 对比像素
for(let i=57;i<260;i++)
{
for(let j=1;j<160;j++)
{
const imgData1 = ctx1.getCo
ntext("2d").getImageData(1*i,1*j,1,1)
const imgData2 = ctx2.getCo
ntext("2d").getImageData(1*i,1)
const data1 = imgData1.data;
const data2 = imgData2.data;
const res1=Math.abs(data1
[0]-data2
[0]);
const res2=Math.abs(data1[1]-data2[1]
);
const res3=Math.abs(data1[2]-data2[2]
);
if(!(res1 < pixelDifference && res2 < pixelDifference && res3 < pixelDifference)) {
if(!res.includes(i)) {
res.push(i);
}
}
}
}
// 返回像素差最大值跟最小值，经过调试最小值往左小7像素，最大值往左54像素
return {min:res[0]-7,max:res[res.length-1]-54}
}
return compare(document)
})
return distance;
}
/**
* 计算滑块位置
*/
async function getBtnPosition() {
const btn_position = await page.evaluate(() =>
{
const
{ClientWidth,clientHeight} = document.query@R_
616_10288@ctor('.gee
test_popup_ghost')
return
{Btn_left:clientWidth/2-104,btn_top:clientHeight/2+5
9}
})
return btn_position;
}
/
**
* 尝试滑动按钮
* @param distance 滑动距离
* */
async function tryValidation(distanc
E) {
//将距离拆分成两段，模拟正常人的行为
const distance1 = distance - 10
const distance2 = 10
page.mouse.click(btn_position
.btn_left,btn_position
.btn_top,
{delay:2000})
page.mouse.down(btn_position
.btn_left,btn_position
.btn_to
p)
page.mouse.move(btn_position
.btn_left+distance1,
{steps:30})
await timeout(800
);
page.mouse.move(btn_position
.btn_left+distance1+distance2,
{steps:20})
await timeout(800
);
page.mouse.up()
await timeout(4000
);
// 判断是否验证成功
const is
success = await page.evaluate(() =>
{
return document.query@R_
616_10288@ctor('.gee
test_success_radar_tip_content') && document.query@R_
616_10288@ctor('.gee
test_success_radar_tip_content').innerHTML
})
await timeout(1000
);
// 判断是否需要重新计算距离
const
redistance = await page.evaluate(() =>
{
return document.query@R_
616_10288@ctor('.gee
test_result_content') && document.query@R_
616_10288@ctor('.gee
test_result_content').innerHTML
})
await timeout(1000
);
return
{is
success:is
success==='验证成功',
redistance:
redistance.includes('怪物吃了拼图')}
}
/
**
* 拖动滑块
* @param distance 滑动距离
* */
async function drag(distanc
E) {
distance = distance || await calculateDistance(
);
const result = await tryValidation(distance.min)
if(result.is
success)
{
await timeout(1000
);
//登录
console.log('验证成功')
page.click('#modal-member-login button')
}else if(result.
redistanc
E) {
console.log('重新计算滑距离录，重新滑动')
times = 0
await drag(null)
} else
{
if(distanceError[times])
{
times ++
console.log('重新滑动')
await drag(
{min:distance.max,max:distance.max+distanceError[times]})
} else
{
console.log('滑动失败')
times = 0
run()
}
}
}
run()
package.json
{
"name": "demo","version": "1.0.0","dependencies":
{
"puppeteer": "^1.0.0"
}
}
@H_
673_24@
运行
1. 将这个两个文件保存到文件夹下面，终端切换到当前路径下
2. npm i
3. 补上前端网的账号，密码
4. node run
演示
下图演示可以分为四步：
1. 打开登陆页面，输入事先写好的账号密码。
2. 第一次拖动滑块提示“被怪兽吃了”，所以重新计算了新的图片的缺口距离。
3. 第二，三次拖动提示“没正确合拼”，所以重新拖动。
4. 验证成功，登录。
（请将鼠标放到gif上查看演示效果，或者请拖到新窗口打开gif）
说明
1. 滑动验证有三个canvas，其中只需要 classname为‘geetest_canvas_fullbg'以及‘geetest_canvas_bg'的进行像素差对比。ps:前者是完整图片，后者是带缺口的图片。
2. 每个带缺口的图片都有一块误导的阴影，所以对比像素差的时候，计算出的距离分别是误导阴影以及缺口的。因此，滑动距离的取值，我取‘{min:res[0]-7,max:res[res.length-1]-54}'。当缺口比误导阴影靠左时， min（距离最小值） 值就是滑动距离，否则就是 max（距离最大值）减去滑块宽度 。
3. 滑动结果分三种情况：验证成功，被吃了，失败。 “被吃了” 会重新请求图片，所以重新计算了距离再滑动； “失败” 则重新滑动，如果执行 4 次依然失败，则重新run整个流程。
总结
以上所述是小编给大家介绍的使用puppeteer破解极验的滑动验证码。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。
大佬总结
以上是大佬教程为你收集整理的使用puppeteer破解极验的滑动验证码全部内容，希望文章能够帮你解决使用puppeteer破解极验的滑动验证码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
