《最新出炉》系列初窥篇-Python+Playwright自动化测试-20-处理鼠标拖拽-下篇

1.简介

上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种类似拼图的验证码如何处理。于是写了这一篇文章，另外也是相对前边做一个简单的总结分享给小伙伴们或者童鞋们。废话不多数，直接进入今天的主题。

2.滑动验证码

2.1演示模拟验证码点击拖动场景

例如:演示模拟验证码点击拖动场景示例如下:

3.代码准备

3.1前端HTML代码

前端HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>北京-宏哥 滑动条</title>

    <link rel="stylesheet" href="drag.css">

    <script src="jquery-1.7.1.min.js"></script>

    <script src="drag.js"></script>

    <style type="text/css">

        .slidetounlock{

            font-size: 12px;

            background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

            -webkit-background-clip:text;

            -webkit-text-fill-color:transparent;

            -webkit-animation:slidetounlock 3s infinite;

            -webkit-text-size-adjust:none

        }

        @-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}

        .button1 {

            background-color: #f44336;

            border: none;

            color: white;

            padding: 15px 32px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 28px;

            margin-bottom: 100px;

            text-decoration:none;

            color: white;

        }

        #myAnchor

        {

          text-decoration:none;

          color: white;

        }

    </style>

</head>

<body>

<div id="wrapper" style="position: relative;top: 300px;left:300px;">

    <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>

    <div id="drag">

        <div class="drag_bg"></div>

        <div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">

            请按住滑块，拖动到最右边

        </div>

        <div class="handler handler_bg"></div>

    </div>

</div>

    <!--<a href="#" class="img"><img src="img/Lighthouse.jpg"/></a>-->

<script>

    $('#drag').drag();

</script>

</body>

</html>

3.2滑块CSS样式

HTML滑块CSS样式代码如下：

#drag{

    position: relative;

    background-color: #e8e8e8;

    width: 300px;

    height: 34px;

    line-height: 34px;

    text-align: center;

}

#drag .handler{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 40px;

    height: 32px;

    border: 1px solid #ccc;

    cursor: move;

}

.handler_bg{

    background: #fff url("../img/slider.png") no-repeat center;

}

.handler_ok_bg{

    background: #fff url("../img/complet.png") no-repeat center;

}

#drag .drag_bg{

    background-color: #7ac23c;

    height: 34px;

    width: 0px;

}

#drag .drag_text{

    position: absolute;

    top: 0px;

    width: 300px;

    color:#9c9c9c;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;

    -o-user-select:none;

    -ms-user-select:none;

    font-size: 12px;        //  add

}

3.3滑块拖拽JS

滑块拖拽JS代码如下：

$.fn.drag = function(options) {

    var x, drag = this, isMove = false, defaults = {

    };

    var options = $.extend(defaults, options);

    var handler = drag.find('.handler');

    var drag_bg = drag.find('.drag_bg');

    var text = drag.find('.drag_text');

    var maxWidth = drag.width() - handler.width();  //能滑动的最大间距

    //鼠标按下时候的x轴的位置

    handler.mousedown(function(e) {

        isMove = true;

        x = e.pageX - parseInt(handler.css('left'), 10);

    });

    //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离

    $(document).mousemove(function(e) {

        var _x = e.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x

        if (isMove) {

            if (_x > 0 && _x <= maxWidth) {

                handler.css({'left': _x});

                drag_bg.css({'width': _x});

            } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件

                dragOk();

            }

        }

    }).mouseup(function(e) {

        isMove = false;

        var _x = e.pageX - x;

        if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置

            handler.css({'left': 0});

            drag_bg.css({'width': 0});

        }

    });

    //清空事件

    function dragOk() {

        handler.removeClass('handler_bg').addClass('handler_ok_bg');

        text.removeClass('slidetounlock').text('验证通过').css({'color':'#fff'});       //modify

       // drag.css({'color': '#fff !important'});

        handler.css({'left': maxWidth});                   // add

        drag_bg.css({'width': maxWidth});                  // add

        handler.unbind('mousedown');

        $(document).unbind('mousemove');

        $(document).unbind('mouseup');

    }

};

3.4jquery-1.7.1.min.js下载地址

jquery-1.7.1.min.js下载链接：http://www.jqueryfuns.com/resource/2169

4.自动化代码实现

4.1代码设计

4.2参考代码

# coding=utf-8

# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行

# 2.注释：包括记录创建时间，创建人，项目名称。

'''

Created on 2023-07-22

@author: 北京-宏哥   QQ交流群：705269076

公众号：北京宏哥

Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-19-处理鼠标拖拽-下篇

'''

# 3.导入模块

from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:

    browser = playwright.chromium.launch(headless=False)

    context = browser.new_context()

    page = context.new_page()

    page.goto("C:/Users/DELL/Desktop/test/MouseDrag/identifying_code.html")

    page.wait_for_timeout(2000)

    #获取拖动按钮位置并拖动  //*[@id="slider"]/div[1]/div[2]

    dropbutton=page.locator("//*[@id='drag']/div[3]")

    box=dropbutton.bounding_box()

    page.mouse.move(box['x']+box['width']/2,box['y']+box[ 'height']/2)

    page.mouse.down()

    mov_x=box['x']+box['width']/2+390

    page.mouse.move(mov_x,box['y']+box[ 'height']/2)

    page.mouse.up()

    page.wait_for_timeout(3000)

    # page.pause()

    context.close()

    browser.close()

with sync_playwright() as playwright:

    run(playwright)

4.3运行代码

1.运行代码，右键Run'Test'，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

5.小结

好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。

《最新出炉》系列初窥篇-Python+Playwright自动化测试-20-处理鼠标拖拽-下篇的更多相关文章

初窥Linux 之最常用20条命令
玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...
缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout
弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...
python - web自动化测试 - 元素操作 - 鼠标键盘
# -*- coding:utf-8 -*- ''' @project: web学习 @author: Jimmy @file: 鼠标操作.py @ide: PyCharm Community Edi ...
Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
Spark系列-初体验（数据准备篇）
Spark系列-初体验(数据准备篇) Spark系列-核心概念在Spark体验开始前需要准备环境和数据,环境的准备可以自己按照Spark官方文档安装.笔者选择使用CDH集群安装,可以参考笔者之前的文 ...
Python系列之入门篇——HDFS
Python系列之入门篇--HDFS 简介 HDFS (Hadoop Distributed File System) Hadoop分布式文件系统,具有高容错性,适合部署在廉价的机器上.Python ...
Python系列之入门篇——MYSQL
Python系列之入门篇--MYSQL 简介 python提供了两种mysql api, 一是MySQL-python(不支持python3),二是PyMYSQL(支持python2和python3) ...
python爬虫 scrapy2_初窥Scrapy
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...
WWDC15 Session笔记 - Xcode 7 UI 测试初窥
https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...
Scrapy001-框架初窥
Scrapy001-框架初窥 @(Spider)[POSTS] 1.Scrapy简介 Scrapy是一个应用于抓取.提取.处理.存储等网站数据的框架(类似Django). 应用: 数据挖掘信息处理 ...

随机推荐

LeetCode 双周赛 107（2023/06/24）滑动窗口与离散化
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 [BaguTree Pro] 知识星球提问. 往期回顾:LeetCode 单周赛第 348 场 · 数位 DP ...
Linux 上的 .NET 如何自主生成 Dump
一:背景 1. 讲故事前几天微信上有位朋友找到我,说他程序的线程数会偶发性瞬时飙高,让我看下大概是什么原因,截图如下: 如果这种问题每天都会出现,比较好的做法就是用 dotnet-trace 捕 ...
PostgreSQL 12 文档: 部分 VIII. 附录
部分 VIII. 附录目录 A. PostgreSQL错误代码 B. 日期/时间支持 B.1. 日期/时间输入解释 B.2. 处理无效或不明确的时间戳 B.3. 日期/时间关键词 B.4. 日期/时 ...
2023-07-03：讲一讲Redis缓存的数据一致性问题和处理方案。
2023-07-03:讲一讲Redis缓存的数据一致性问题和处理方案. 答案2023-07-03: 数据一致性当使用缓存时,无论是在本地内存中缓存还是使用 Redis 等外部缓存系统,会引入数据同步 ...
吴恩达优化算法 (Optimization algorithms)笔记
Mini-batch 梯度下降(Mini-batch gradient descent) 使用batch梯度下降法,一次遍历训练集只能让你做一个梯度下降,使用mini-batch梯度下降法,一次遍历训 ...
[HUBUCTF 2022 新生赛]simple_RE
[HUBUCTF 2022 新生赛]simple_RE 查壳,64位找main函数,F5查看伪代码,简单分析一下 int __cdecl main(int argc, const char **ar ...
java反序列化与反序列化
java反序列化漏洞 JAVA反序列化漏洞是由于开发者重写了readObject方法,该readObject方法方法调用了别的方法,最终执行到了例如Transfrom方法的危险方法 java序列化过程 ...
Mysql基础8-多表查询
一.多表关系一对多或者多对一案例:部门与员工的关系关系:一个部门对应多个员工,一个员工对应一个部门(不考虑跨部门的特殊情况) 实现:在多的一方建立外键,指向一的一方的主键,这里员工表是多的的一方 ...
学习OI两年我到底收获了什么
做一个小小的总结学习了两年的代码,刚刚要进入高中,留下一点文字给以前的学习做一个总结. 命中注定の邂逅-- 这两年之间,和编程产生了比学习更为低调的羁绊关系(我觉得用这个词语比较合适).编程给我带来 ...
[postgresql]逻辑备份与还原
前言 Postgres提供pg_dump和pg_dumpall用于数据库逻辑备份. pg_dumpall:将一个PostgreSQL数据库集群全部转储到一个脚本文件中 pg_dump:可以选择一个数据 ...