前两天需要自动化登录一个商城的后台 用的是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--自动化（二）：过滑块验证码 验证码缺口识别的更多相关文章

  1. python3 使用OpenCV计算滑块拼图验证码缺口位置

    前言 滑块拼图验证码的失败难度在于每次图片上缺口位置不一样,需识别图片上拼图的缺口位置,使用python的OpenCV库来识别到 环境准备 pip 安装 opencv-python pip insta ...

  2. uu云验证码识别平台,验证码,验证码识别,全自动验证码识别技术,优优云全自动打码,代答题系统,优优云远程打码平台,uu云打码

    uu云验证码识别平台,验证码,验证码识别,全自动验证码识别技术,优优云全自动打码,代答题系统,优优云远程打码平台,uu云打码 优优云验证码识别答题平台介绍 优优云|UU云(中国公司)是全球唯一领先的智 ...

  3. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  4. Qt Qgis 二次开发——鼠标点击识别矢量要素

    Qt Qgis 二次开发--鼠标点击识别矢量要素 介绍: 识别矢量要素需要用到QGis的一个工具类:QgsMapToolIdentifyFeature 一个QgsMapTool的子类的子类,官方文档描 ...

  5. Selenium+Java自动化之如何优雅绕过验证码

    前言: 验证码问题对于每个ui自动化的同学而言,相信都是个蛋疼的问题,对于验证码的处理我个人不提倡破解,不要去想破解方法,这个验证码本来就是为了防止别人自动化登录的.如果你们公司的验证码很容易被你破解 ...

  6. python接口自动化三（登录绕开验证码及发帖）

    前言 有些登录的接口会有验证码:短信验证码,图形验证码等,这种登录的话验证码参数可以从后台获取的(或者查数据库最直接). 获取不到也没关系,可以通过添加cookie的方式绕过验证码. 但是这里需要明确 ...

  7. Web自动化---解决登录页面随机验证码问题

    一.抛出问题 在日常的测试工作中,遇到了这样一个登录页面,如下图: 像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母 ...

  8. PHPCMS v9 二次开发_验证码结合Session开发

    本文主要讲解了在V9中使用v9自带验证码并且需要使用session的情况下,多种问题的解决.:).如有问题或者更好的解决办法,希望不吝赐教. 1.前端调用验证码 pc_base::load_sys_c ...

  9. Tensorflow实战（二）：Discuz验证码识别

    一.前言 验证码是根据随机字符生成一幅图片,然后在图片中加入干扰象素,用户必须手动填入,防止有人利用机器人自动批量注册.灌水.发垃圾广告等等 . 验证码的作用是验证用户是真人还是机器人. 本文将使用深 ...

随机推荐

  1. 关系型数据库和非关系型数据库区别、oracle与mysql的区别

    一.关系型数据库 关系型数据库,是指采用了关系模型来组织数据的数据库.    关系模型是在1970年由IBM的研究员E.F.Codd博士首先提出的,在之后的几十年中,关系模型的概念得到了充分的发展并逐 ...

  2. Java RestTemplate传递参数

    最近使用Spring 的 RestTemplate 工具类请求接口的时候发现参数传递的一个坑,也就是当我们把参数封装在Map里面的时候,Map 的类型选择. 使用RestTemplate post请求 ...

  3. MyBatis绑定Mapper接口参数到Mapper映射文件sql语句参数

    一.设置paramterType 1.类型为基本类型 a.代码示例 映射文件: <select id="findShopCartInfoById" parameterType ...

  4. 【Keras】神经网络的搭建

    Dense层的使用方法 参考:https://blog.csdn.net/qq_34840129/article/details/86319446 keras.layers.core.Dense( u ...

  5. 【C/C++】n皇后问题/全排列/递归/回溯/算法笔记4.3

    按常规,先说一下我自己的理解. 递归中的return常用来作为递归终止的条件,但是对于返回数值的情况,要搞明白它是怎么返回的.递归的方式就是自己调用自己,而在有返回值的函数中,上一层的函数还没执行完就 ...

  6. C++内存管理：简易内存池的实现

    什么是内存池? 在上一篇 C++内存管理:new / delete 和 cookie中谈到,频繁的调用 malloc 会影响运行效率以及产生额外的 cookie, 而内存池的思想是预先申请一大块内存, ...

  7. IDE常用插件

    IDE 常用插件集合 :

  8. 热部署详细步骤---·> 小热身！

    IDEA 2018.1.5 4版本 热部署 网址:https://www.jb51.net/softjc/629271.html

  9. Tableau如何使用 度量值和度量名称

    一.把子类别拖拽至列 二.度量值拖拽至行 三.度量名称拖拽至筛选器,右键-编辑筛选器-选择销售额和利润 四.度量名称拖拽是标记选择颜色-其它细节调整-最终结果如下所示

  10. 一种基于Java Swing/HTML/MySQL的汽车租赁系统

    该项目是一个Java的课程作业(大二),主要运用Java.Swing.HTML.MySQL,实现基本的租车逻辑.界面可视化.信息导出.数据存储等功能.实现管理员.用户两种角色登录,并结合Java开发中 ...