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. Terraform 系列-使用 for-each 对本地 json 进行迭代

    系列文章 Terraform 系列文章 Grafana 系列文章 概述 前文 Grafana 系列 - Grafana Terraform Provider 基础 介绍了使用 Grafana Terr ...

  2. iOS select标签适配去掉iOS默认select样式

    iOS端对select标签有独特的适配,如何取消这些默认样式呢 css样式表 加上 1 select { 2 -webkit-appearance: none; 3 } 博客同步更新:地址

  3. Google Colab：云端的Python编程神器

    Google Colab,全名Google Colaboratory,是Google Research团队开发的一款云端编程工具,它允许任何人通过浏览器编写和执行Python代码.Colab尤其适合机 ...

  4. .NET EF查询需要注意的点

    记录下在公司中混乱使用跟踪和非跟踪查询的坑. var blog = context.Blogs.Single(b => b.BlogId == 1); // 查询时放回一条 如果存在多条引发异常 ...

  5. 【Shell】ps 命令

    ps 命令 Linux ps (英文全拼:process status)命令用于显示当前进程的状态,类似于 windows 的任务管理器. 1. ps 常用的命令 ps -aux #显示所有进程信息 ...

  6. 永远拥抱开放生态 | Metaworld2.0能力发布

    ​ 回看过去的二十年,互联网从门户网站发布信息,用户只能获取阅读:到如今的人人生产内容,再借助各类平台设施上传投递给其他用户.这个过程中,内容生产力的分布从集中转为分散,恰似互联网从1.0走向2.0的 ...

  7. C++(类成员的访问控制)

    访问控制 如下代码,Student这个类的所有成员我们都可以调用,但是我们不想让被人调用Print1这个方法该怎么? struct Student { int age; int sex; void P ...

  8. Linux 使用grep过滤字符串中的指定内容

    命令示例:echo port 1234 123 | grep -oP 'port\s+\K\d+' 返回: 1234 这条命令使用 grep 工具来在文本中查找 "Port " 后 ...

  9. shell 编程变量使用心得

    类型 示例 用途 大写的变量名 IP 表示常量,比如,用来记录输入和输出文件名 小写变量名 mac 一般变量 左边下划线 _mac 临时的中间变量,只引用一次的变量 右边下划线 tmpfile_ 临时 ...

  10. 使用DBeaver连接数据库

    下载网站:官网下载 参考链接:使用 DBeaver 连接 OceanBase