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-处理鼠标拖拽-下篇的更多相关文章

  1. 初窥Linux 之 最常用20条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...

  2. 缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout

    弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...

  3. python - web自动化测试 - 元素操作 - 鼠标键盘

    # -*- coding:utf-8 -*- ''' @project: web学习 @author: Jimmy @file: 鼠标操作.py @ide: PyCharm Community Edi ...

  4. Flutter 即学即用系列博客——04 Flutter UI 初窥

    前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...

  5. Spark系列-初体验（数据准备篇）

    Spark系列-初体验(数据准备篇) Spark系列-核心概念 在Spark体验开始前需要准备环境和数据,环境的准备可以自己按照Spark官方文档安装.笔者选择使用CDH集群安装,可以参考笔者之前的文 ...

  6. Python系列之入门篇——HDFS

    Python系列之入门篇--HDFS 简介 HDFS (Hadoop Distributed File System) Hadoop分布式文件系统,具有高容错性,适合部署在廉价的机器上.Python ...

  7. Python系列之入门篇——MYSQL

    Python系列之入门篇--MYSQL 简介 python提供了两种mysql api, 一是MySQL-python(不支持python3),二是PyMYSQL(支持python2和python3) ...

  8. python爬虫 scrapy2_初窥Scrapy

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  9. WWDC15 Session笔记 - Xcode 7 UI 测试初窥

    https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...

  10. Scrapy001-框架初窥

    Scrapy001-框架初窥 @(Spider)[POSTS] 1.Scrapy简介 Scrapy是一个应用于抓取.提取.处理.存储等网站数据的框架(类似Django). 应用: 数据挖掘 信息处理 ...

随机推荐

  1. MySQL 中分区表

    MySQL 中的分区表 InnoDB 逻辑存储结构 表空间 (Tablespace) 段 (segment) 区 (extent) 页 (page) 行 (row) InnoDB 数据页结构 分区别表 ...

  2. mac shell终端命令行快捷键

    Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h 退格删除一个字符,相当于通常的Backspace键 ...

  3. [Spring+SpringMVC+Mybatis]框架学习笔记（二）：Spring-IOC-DI

    上一章:[Spring+SpringMVC+Mybatis]框架学习笔记(一):SpringIOC概述 下一章:[Spring+SpringMVC+Mybatis]框架学习笔记(三):Spring实现 ...

  4. GaussDB技术解读丨高级压缩

    本文作者|华为云数据库GaussDB首席架构师 冯柯 [背景介绍] 数据压缩与关系数据库的结合,早已不是一个新鲜的话题,当前我们已经看到了各种各样数据库压缩的产品和解决方案.对于GaussDB来说,在 ...

  5. Linux 命令：lsof

    参考文档:lsof命令详解 lsof,列出系统中所有打开的文件. 各列字段意义如下: COMMAND: 进程的名称 PID: 进程标识符 USER: 进程所有者 FD: 文件描述符,应用程序通过文件描 ...

  6. JFrame一些基础小知识

    JFrame.setLocationRelativeTo方法 JFrame.setLocationRelativeTo()是一个Java Swing中的方法,它用于将窗口居中显示在屏幕上. 当你调用该 ...

  7. 若依前后端分离版：增加新的登录接口和新的用户表，用于小程序或者APP获取token，并使用若依的验证方法

    相关原创链接直接放这: 基于若依框架springsecurity添加多种用户登录解决方案(springsecurity多用户登录:前端用户.后端用户)_若依多用户表登录_云优的博客-CSDN博客 若依 ...

  8. [ABC150E] Change a Little Bit

    2023-03-10 题目 题目传送门 翻译 翻译 难度&重要性(1~10):7 题目来源 AtCoder 题目算法 数学,贪心 解题思路 显然 \(C_i\) 越小的位越早被修改越好.所以我 ...

  9. 《Kali渗透基础》11. 无线渗透（一）

    @ 目录 1:无线技术 2:IEEE 802.11 标准 2.1:无线网络分层 2.2:IEEE 2.3:日常使用标准 2.3.1:802.11 2.3.2:802.11b 2.3.3:802.11a ...

  10. 揭秘ChatGPT，如何打造自己的自定义指令

    一.ChatGPT-0720更新 又在深夜,正要打开ChatGPT官网测试下pdf对话功能,发现ChatGPT又有更新.本次更新总结有2点: 1.对于Plus用户,GPT-4的使用限额从25条/3h提 ...