一、鼠标操作

　　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. 关于python如何构造测试数据

    参考资料:https://www.cnblogs.com/miaoxiaochao/p/13234589.html 一.Faker模块是什么? 一个Python第三方模块,主要用来创建伪数据 无需再手 ...

  2. xmind使用技巧

    xmind看似每个人都会使用,但是掌握一些小技巧,能够有效提升工作效率. 多行复制粘贴 在xmind中选中多行,复制然后可以直接粘贴到excel.word当中. 在excel.word选中多行,复制然 ...

  3. 定要过python二级 选择题第四套

    1. 2. 3. 4. 5. 6. python用于人工智能 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

  4. mysql的一次意外

    打开navcat连接本地mysql数据库的时候说mysql服务无法连接,切换到cmd用命令行来启动报错,发生系统错误5,查看百度,需用管理员权限运行, 用管理员运行依旧不好使 C:\WINDOWS\s ...

  5. docker efk(filebeat+logstash+es+kibana)

    ​ 1.系统架构 ​ 通常我们说的elastic stack,也就是elk,通过es 收集日志数据,存到elasticsearch,最后通过kibana进行统计分析,但是elastic公司后续又推出了 ...

  6. 如何通过 Serverless 技术降低微服务应用资源成本？

    前言 在大型分布式 IT 架构领域,微服务是一项必不可少的技术.从本质上来讲,微服务是一种架构风格,将一个大型的系统拆分为多个拥有独立生命周期的应用,应用之间采用轻量级的通信机制进行通信.这些应用都是 ...

  7. 试题 算法训练 二进制数数 java解题

    资源限制 时间限制:1.0s   内存限制:256.0MB 问题描述 给定L,R.统计[L,R]区间内的所有数在二进制下包含的"1"的个数之和. 如5的二进制为101,包含2个&q ...

  8. docker环境下搭建python3.6

    前言:当我们在一台电脑上搭建了python3.6的环境,下次换了个电脑或者换成linux的系统了又得重新搭建一次,设置环境变量,下载pip等操作.所以使用docker 一.安装python步骤: 1. ...

  9. 【集成学习】：Stacking原理以及Python代码实现

    Stacking集成学习在各类机器学习竞赛当中得到了广泛的应用,尤其是在结构化的机器学习竞赛当中表现非常好.今天我们就来介绍下stacking这个在机器学习模型融合当中的大杀器的原理.并在博文的后面附 ...

  10. 深度学习——手动实现残差网络ResNet 辛普森一家人物识别

    深度学习--手动实现残差网络 辛普森一家人物识别 目标 通过深度学习,训练模型识别辛普森一家人动画中的14个角色 最终实现92%-94%的识别准确率. 数据 ResNet介绍 论文地址 https:/ ...