playwright--自动化（二）：过滑块验证码 验证码缺口识别
前两天需要自动化登录一个商城的后台 用的是playwright 没有用selenium 中间出了一个滑块验证 现阶段playwright教程不是太多，自己做移动的时候各种找，费劲巴拉的。现在自己整出来了就记录一下吧！
如过帮助到了可否关注推荐分享 来个三连？
样式~大概这个样子
上流程，首先缺口获取
#没有用过opencv的cv2导入报错的 可以安装
#pip install opencv-python
import cv2
def get_notch_location(hx, bg):
'''
根据文件进行识别
:param hx: 滑块图片的文件路径
:param bg: 背景图片的文件路径
:return:
'''
bg_img = cv2.imread(hx,0)
tp_img = cv2.imread(bg,0) # 读取到两个图片，进行灰值化处理
img = cv2.imread(bg) # 读取图片画框直观可以看到，上边是灰度的所以重新打开一个原图
res = cv2.matchTemplate(_tran_canny(bg_img), _tran_canny(tp_img), cv2.TM_CCOEFF_NORMED)
min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(res)
top_left = max_loc[0] # 横坐标
# 展示圈出来的区域
x, y = max_loc # 获取x,y位置坐标
w, h = bg_img.shape[::-1] # 宽高
#矩形画图
cv2.rectangle(img, (x, y), (x + w, y + h), (0,0,255), 2)
#显示
cv2.imshow('Show', name)
cv2.waitKey(0)
cv2.destroyAllWindows()
#这个是滑块要移动的距离
return top_left
测试一下(包括肉眼看不太清楚的同样可以不得不说opencv的强大)
测试图片
https://img2020.cnblogs.com/blog/1776613/202201/1776613-20220104104600734-2080308296.jpg
https://img2020.cnblogs.com/blog/1776613/202201/1776613-20220104110557885-1084215972.jpg
下边轨迹移动(其实就是移动距离分了好多步)
#有的检测移动速度的 如果匀速移动会被识别出来，来个简单点的 渐进
def get_track(distance): # distance为传入的总距离
# 移动轨迹
track = []
# 当前位移
current = 0
# 减速阈值
mid = distance * 4 / 5
# 计算间隔
t = 0.2
# 初速度
v = 1
while current < distance:
if current < mid:
# 加速度为2
a = 4
else:
# 加速度为-2
a = -3
v0 = v
# 当前速度
v = v0 + a * t
# 移动距离
move = v0 * t + 1 / 2 * a * t * t
# 当前位移
current += move
# 加入轨迹
track.append(round(move))
return track
接下来就是重点了(说是重点简单的雅痞)
#移动滑块
#首先咱们的找到要移动的东西吧
s = self.page.wait_for_selector('//div[@class="_3CvVPX _3gznAC _3BUN_s"]',strict=True)
#找到这个元素再当前页面的坐标（这个会返回一个字典里边四个数字）
box = s.bounding_box()
#移动鼠标到上边元素的中心（上边四个参数用途来了）
self.page.mouse.move(box["x"] + box["width"] / 2, box["y"] + box["height"] / 2)
#按下鼠标（这个不多说）
self.page.mouse.down()
#这里获取到x坐标中心点位置
x = box["x"] + box["width"] / 2
#这个把缺口获取到的长度放到轨迹加工一下得到一个轨迹
tracks = get_track(top_left)
for track in tracks:
#循环鼠标按照轨迹移动
#strps 是控制单次移动速度的比例是1/10 默认是1 相当于 传入的这个距离不管多远0.1秒钟移动完 越大越慢
self.page.mouse.move(x + track, 0,steps=10)
x += track
#移动结束鼠标抬起
self.page.mouse.up()
当鼠标抬起呢一刻 你就可以心里石头落地了，他过了
控制好速度 反正我这基本都能过
下边给一个html 可以自己测试的页面（其实扒拉别人的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<div class="btn">>></div>
<p class="text">拖动滑块验证</p>
<div class="bg"></div>
</div>
<style>
* {
margin: 0;
padding: 0;
background-color: #ffffff;
}
.box {
width: 500px;
height: 60px;
position: relative;
left: 50%;
margin-left: -250px;
margin-top: 50px;
background: #eae4e4;
display: flex;
align-items: center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.btn {
height: 100%;
width: 60px;
background: #fbf5f5;
box-sizing: border-box;
border: 2px solid #cecaca;
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: #d5d4d4;
z-index: 999;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.btn:hover {
cursor:pointer;
}
.text {
font-size: 20px;
position: absolute;
left: 50%;
margin-left: -60px;
background-color: transparent;
z-index: 2;
}
.bg {
height: 100%;
position: absolute;
background-color: #4cbb42;
z-index: 1;
}
</style>
<script>
window.onload = function () {
// 封装-选择器,内部可以做兼容性
function querySelect(name) {
return document.querySelector(name)
}
// 验证成功
// 验证失败
// 触发事件 onmousedown按下 onmousemove移动 onmouseup松开
let btn = querySelect('.btn') // 滑块 对IE6/7 有兼容性问题
let box = querySelect('.box') // box
let text = querySelect('.text') // 文字
let bg = querySelect('.bg') // 背景
btn.onmousedown = (eventDown) => {
// event.clientX;clientY 鼠标当前X轴Y轴坐标
let downX = eventDown.clientX
console.log(downX)
document.onmousemove = (eventMove) => {
// 移动的X坐标 - 按下的X坐标
let moveX = eventMove.clientX - downX
console.log(eventDown.clientX)
console.log(moveX)
let boxWidth = box.offsetWidth
let btnWidth = btn.offsetWidth
if (moveX >= 0 && moveX <= (boxWidth - btnWidth)) { // 可移动的范围
btn.style.left = moveX + 'px' // 滑块绝对定位
bg.style.width = moveX + 'px' // 设备背景的宽度
}
if (moveX >= (boxWidth - btnWidth)) {
btn.style.left = (boxWidth - btnWidth) + 'px' // 滑块绝对定位
bg.style.width = (boxWidth - btnWidth) + 'px' // 设备背景的宽度
// 文字提醒
text.innerText = '验证成功'
text.style.color = '#fff'
// 事件清除-按下、移动
btn.onmousedown = null
document.onmousemove = null
btn.onmouseup = null
}
}
}
btn.onmouseup = (eventUp) => {
// 松开后回到原点
// 清除移动事件
console.log('鼠标抬起')
btn.style.left = 0 + 'px'
bg.style.width = 0 + 'px'
document.onmousemove = null
}
}
</script>
</body>
</html>
playwright--自动化（二）：过滑块验证码 验证码缺口识别的更多相关文章
- python3 使用OpenCV计算滑块拼图验证码缺口位置
前言 滑块拼图验证码的失败难度在于每次图片上缺口位置不一样,需识别图片上拼图的缺口位置,使用python的OpenCV库来识别到 环境准备 pip 安装 opencv-python pip insta ...
- uu云验证码识别平台,验证码,验证码识别,全自动验证码识别技术,优优云全自动打码,代答题系统,优优云远程打码平台,uu云打码
uu云验证码识别平台,验证码,验证码识别,全自动验证码识别技术,优优云全自动打码,代答题系统,优优云远程打码平台,uu云打码 优优云验证码识别答题平台介绍 优优云|UU云(中国公司)是全球唯一领先的智 ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- Qt Qgis 二次开发——鼠标点击识别矢量要素
Qt Qgis 二次开发--鼠标点击识别矢量要素 介绍: 识别矢量要素需要用到QGis的一个工具类:QgsMapToolIdentifyFeature 一个QgsMapTool的子类的子类,官方文档描 ...
- Selenium+Java自动化之如何优雅绕过验证码
前言: 验证码问题对于每个ui自动化的同学而言,相信都是个蛋疼的问题,对于验证码的处理我个人不提倡破解,不要去想破解方法,这个验证码本来就是为了防止别人自动化登录的.如果你们公司的验证码很容易被你破解 ...
- python接口自动化三（登录绕开验证码及发帖）
前言 有些登录的接口会有验证码:短信验证码,图形验证码等,这种登录的话验证码参数可以从后台获取的(或者查数据库最直接). 获取不到也没关系,可以通过添加cookie的方式绕过验证码. 但是这里需要明确 ...
- Web自动化---解决登录页面随机验证码问题
一.抛出问题 在日常的测试工作中,遇到了这样一个登录页面,如下图: 像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母 ...
- PHPCMS v9 二次开发_验证码结合Session开发
本文主要讲解了在V9中使用v9自带验证码并且需要使用session的情况下,多种问题的解决.:).如有问题或者更好的解决办法,希望不吝赐教. 1.前端调用验证码 pc_base::load_sys_c ...
- Tensorflow实战（二）：Discuz验证码识别
一.前言 验证码是根据随机字符生成一幅图片,然后在图片中加入干扰象素,用户必须手动填入,防止有人利用机器人自动批量注册.灌水.发垃圾广告等等 . 验证码的作用是验证用户是真人还是机器人. 本文将使用深 ...
随机推荐
- GCD的补充
1-1 关于GCD中的创建和释放 在iOS6.0之前,在GCD中每当使用带creat单词的函数创建对象之后,都应该对其进行一次release操作. 在iOS6.0之后,GC ...
- zookeeper 异常 ：stat is not executed because it is not in the whitelist. Connection closed b
1 .问题 1.启动 zookeeper 后 用指令: telnet 127.0.0.1 2181 连接 提示输入指令 :stat 后报错,然后关闭连接 2.问题解决: 修改启动指令 zkServe ...
- 【力扣】922. 按奇偶排序数组 II
给定一个非负整数数组 A, A 中一半整数是奇数,一半整数是偶数. 对数组进行排序,以便当 A[i] 为奇数时,i 也是奇数:当 A[i] 为偶数时, i 也是偶数. 你可以返回任何满足上述条件的数组 ...
- CF190C STL 题解
* 题意 :给出只会出现 pair 和 int 的字符串 , 要求按照给出 pair 和 int 的顺序 , 添加 ' < ' , ' > ' , ' , ' 这三个符号 , ...
- Nginx LOCATOIN块配置
1 匹配模式优先级 location = /uri =开头表示精确匹配,只有完全匹配上才能生效. location ^~ /uri ^~ 开头对URL路径进行前缀匹配,并且在正则之前.无正则普通匹配( ...
- [BUUCTF]REVERSE——rsa
rsa 附件 题目是rsa,首先了解一下什么是rsa加密,具体的看这个文章 首先大概介绍下RSA加密解密 RSA加密是对明文的E次方后除以N后求余数的过程 公钥n = p * q,其中p和q是两个大素 ...
- 突破结构限制的“数据透视表”（Excel技巧集团）
出个题:根据A2:C16生成E2:G18的汇总结果.这里的汇总是求和. 遇到这种情况,首选肯定是函数公式,虽然数据源表是个很规范的一维表,可以用数据透视表,可是想建构到上图那么奇葩,数据透视表无此异能 ...
- 解决Tensorflow ValueError: Failed to convert a NumPy array to a Tensor (Unsupported object type numpy.ndarray)
问题描述 在将一个数组送入tensorflow训练时,报错如下: ValueError: Failed to convert a NumPy array to a Tensor (Unsupporte ...
- LuoguP2556 [AHOI2002]黑白图像压缩 题解
Content 题目描述太过于繁琐而无法简化,请前往原题面查看. 数据范围:\(1\leqslant n\leqslant 8\times 10^4\). Solution & Code 一个 ...
- 针对HttpClient 重写 HttpRequestRetryHandler针对特定异常 增加重试
调用方法: public static String doGet(String url) { try { RequestConfig defaultRequestConfig = RequestCon ...