一、鼠标操作

　　WebElement的click()方法可实现元素的点击操作,但是没有提供鼠标的右击/双击/悬停/鼠标拖动等操作.这些操作需要通过Action类提供的方法来实现!

Action常用的api如下:

1. contextClick() 右击

2. clickAndHold() 鼠标悬停

3. move_to_element() 鼠标悬停

4. doubleClick() 双击

5. dragAndDrop() 拖动

6. release() 释放鼠标

7. perform() 执行所有Action中的存储行为

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

二、代码准备

1.前端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}}

    </style>

</head>

<body>

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

    <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>

2.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.滑块拖拽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');

    }

};

滑块拖动实现代码参考博文：https://blog.csdn.net/shuai_wy/article/details/62419257

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

三、自动化代码实现

@Test

public void test() throws InterruptedException {

    try {

        driver.get("file:///C:/Users/Administrator/Desktop/test/MouseDrag/identifying_code.html");

        driver.manage().window().maximize();

        Actions actions = new Actions(driver);

        WebElement targetElement = driver.findElement(By.xpath("//*[@id=\"drag\"]/div[3]"));

        int x = targetElement.getLocation().getX();

        int y = targetElement.getLocation().getY();

        Thread.sleep(3000);

        //首先定位到方块并点击=》移动到目标位置=》松开释放鼠标=》perform执行Actions的一系列方法调用

        actions.clickAndHold(targetElement).moveToElement(targetElement, x+260, y).release().perform();

        Thread.sleep(3000);

    }catch (Exception e) {

        e.printStackTrace();

    }

}

学习后总结，不足之处后续补充！

未完待续。。。

【java+selenium3】Actions模拟鼠标 (十一)的更多相关文章

  1. 【java+selenium3】模拟键盘操作 (十二)

    一.键盘操作 用代码来模拟键盘的Enter或一系列的组合键,前面使用sendkeys()方法模拟键盘的输入,除此之外还可以模拟键盘组合键输入如下: 整理一些比较常用的键盘操作如下: sendKeys( ...

  2. Java&Selenium 模拟鼠标方法封装

    Java&Selenium 模拟鼠标方法封装 package util; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  3. JAVA之旅（三十一）——JAVA的图形化界面，GUI布局，Frame，GUI事件监听机制，Action事件，鼠标事件

    JAVA之旅(三十一)--JAVA的图形化界面,GUI布局,Frame,GUI事件监听机制,Action事件,鼠标事件 有段时间没有更新JAVA了,我们今天来说一下JAVA中的图形化界面,也就是GUI ...

  4. Java+selenium之WebDriver模拟鼠标键盘操作(六)

    org.openqa.selenium.interactions.Actions类,主要定义了一些模拟用户的鼠标mouse,键盘keyboard操作.对于这些操作,使用 perform()方法进行执行 ...

  5. selenium webdriver(4)---模拟鼠标键盘操作

    webdriver提供Actions来模拟鼠标悬浮.拖拽和键盘输入等操作,详细代码见org.openqa.selenium.interactions.Actions.本文通过几个实例来说明Action ...

  6. selenuim2模拟鼠标键盘操作

    有时候有些元素不便点击或者做其他的操作,这个时候可以借助selenium提供的Actions类,它可以模拟鼠标和键盘的一些操作,比如点击鼠标右键,左键,移动鼠标等操作.对于这些操作,使用perform ...

  7. Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）

    日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...

  8. Java编程语言下Selenium 鼠标悬停以及右击操作

    // 基于Actions类创建一个对象 Actions action = new Actions(driver); // 鼠标悬停在药渡公司全称字段上 action.moveToElement(Yao ...

  9. selenium webdriver模拟鼠标键盘操作

    在测试使用Selenium webdriver测试WEB系统的时候,用到了模拟鼠标.键盘的一些输入操作. 1.鼠标的左键点击.双击.拖拽.右键点击等: 2.键盘的回车.回退.空格.ctrl.alt.s ...

随机推荐

  1. Windows 10 64位操作系统 下安装、连接测试sqlite3 sql基本操作 增删改

    一.下载sqlite安装包 1:详细下载安装版本可见官网:https://www.sqlite.org/download.html 2:百度盘分享连接:https://pan.baidu.com/s/ ...

  2. lua常用一些功能

    lua在openresty中获取请求的请求头 local head_table = ngx.req.get_headers() 由于table类型,无法直接使用ngx.say()显示,需要转换为cjs ...

  3. 在反序列化数据的时候报错raise JSONDecodeError("Expecting value", s, err.value) from None json.decode

    今天在爬取某网站数据内容适合,通过正则匹配拿到了需要的内容字符串,但是在反序列化的时候竟然报错,大概意思知道他不是json的期望值,那么我就会像是不是数据内有一些内容是由于编码的问题导致的呢?因为之前 ...

  4. P6620-[省选联考2020A卷]组合数问题【组合数学,斯特林数】

    正题 题目链接:https://www.luogu.com.cn/problem/P6620 题目大意 给出\(n,x,p,m\)和一个\(m\)次多项式\(f\)求 \[\sum_{k=0}^nf( ...

  5. LR Socket接收超时TPS上不去解决方法

    在一次做项目中,由于Socket协议接收的报文会有不定长度,基本每次都会有变化,在data.ws 接收buf1有固定长度,这是在接收的实时报文会有长度不一致的问题.这时LR默认会去与接收的报文的长度及 ...

  6. Azure Bicep（二）语法简介

    一,引言 上一篇文章有介绍到 Azure Bicep 的部署问题,文中也只是演示部署范围为 Sub,并将演示的 Azure Resource Group 到 Azure.给定 Bicep 文件,可以部 ...

  7. Java - 你的 Java 代码有这些坏味道吗？

    列举一些 Java 开发中常见的"不良实践",来源于代码扫描(https://github.com/pmd/pmd),和诸君一起学习参考: 1 - 关闭资源 CloseResour ...

  8. Go语言之数组与切片基础

    一.数组 数组是同一类型元素的集合,可以放多个值,但是类型一致,内存中连续存储 Go 语言中不允许混合不同类型的元素,而且数组的大小,在定义阶段就确定了,不能更改 1.数组的定义 // 定义一个大小为 ...

  9. Java集合——List，Set，Map总结笔记

    1. 集合 Collection 1.1 Java 集合框架 ​ ​ ​ ​ ​ ​ ​ ​ Java 集合框架位于 java.util 包中.Java 集合框架主要包括两种类型的容器,一种是集合(C ...

  10. docker之swarm容器部署及运维

    1.概念 Docker Swarm 是 Docker 的集群管理工具.它将 Docker 主机池转变为单个虚拟 Docker 主机. Docker Swarm 提供了标准的 Docker API,所有 ...