一、鼠标操作

　　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. Jmeter系列（3） - 静默压测

    前言 Windows环境 简述 静默 : 脱离UI运⾏JMeter压测,用命令行方式运行性能测试脚本好处:命令运⾏更容易"搞事情"命令格式: jmeter –n –t $jmx_f ...

  2. Linux系列（30） - rpm命令管理之安装命令（2）

    包全名与包名 包全名:操作的包是没有安装的软件包时,使用包全名,而且注意路径.如:/mnt/cdrom/Packags/zlib-devel-1.2.3.-27.e16.i686.rpm 包名:操作已 ...

  3. jenkins自动构建前端项目(window,vue)

    我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以 ...

  4. php 设计模式 --桥接模式

    php抽象类和接口的区别 https://www.cnblogs.com/vinter/p/8716685.html 什么时候适合使用 --- 多个角色配合工作:抽象角色对应具体角色: <?ph ...

  5. P5934-[清华集训2012]最小生成树【最小割】

    正题 题目链接:https://www.luogu.com.cn/problem/P5934 题目大意 给出\(n\)个点\(m\)条边的一张图,再加入一条边\((u,v,L)\)求至少删掉多少条边可 ...

  6. WPF进阶技巧和实战07--自定义元素01

    完善和扩展标准控件的方法: 样式:可使用样式方便地重用控件属性的集合,甚至可以使用触发器应用效果 内容控件:所有继承自ContentControl类的控件都支持嵌套的内容.使用内容控件,可以快速创建聚 ...

  7. Spatial Analyst 工具-数学分析

    数学分析 # Process: Abs arcpy.gp.Abs_sa("", 输出栅格) # Process: Exp arcpy.gp.Exp_sa("", ...

  8. Dapr + .NET Core实战（十四）虚拟机集群部署 mDNS + Consul

    前面我们说了在单机模式下和K8S集群下的Dapr实战,这次我们来看看如何在不使用K8S的情况下,在一个传统的虚拟机集群里来部署Dapr. 1.环境准备 我们准备两台centos7虚拟机 Dapr1:1 ...

  9. 2021.7.27--Benelux Algorithm Programming Contest 2020 补提

    I Jigsaw 题目内容: 链接:https://ac.nowcoder.com/acm/contest/18454/I 来源:牛客网 You have found an old jigsaw pu ...

  10. PAT (Basic Level) Practice （中文）1014 福尔摩斯的约会 (20分)

    1014 福尔摩斯的约会 (20分) 带侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hys ...