话不多少，上图如下，下图红色框内是一个html5的画布，我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的，那该怎么办呢？

我们先new一个Selenium的actions，然后把鼠标移动到这个按钮右上角的按钮上面，然后点击，是通过像素操作的，具体代码如下：

        Actions actions = new Actions(driver);

        actions.moveToElement(driver.findElement(By.xpath("//*[@id='subscontent']/div[1]/div/canvas[3]")), 750, 15).click().perform();

像素的位置算法如下图二，但是这种操作方法会被电脑显示器的分辨率影响。

selenium如何操作HTML5的画布canvas上的元素的更多相关文章

  1. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  2. 利用html5的画布canvas进行图片压缩处理

    在网上找的代码,按自己的需求改了下,忘记在哪找的了.这里记着方便自己以后学习. // 参数,最大高度 //var MAX_HEIGHT = 100; var MAX_WIDTH = 200; // 渲 ...

  3. [Selenium] WebDriver 操作 HTML5 中的 drag/drop

    以 jQuery UI 官方网站元素测试,地址:http://jqueryui.com/draggable/ 示例: package com.learningselenium.html5; impor ...

  4. [Selenium] WebDriver 操作 HTML5 中的 video

    测试播放,停止播放 http://www.videojs.com/ 示例: package com.learningselenium.html5; import static org.junit.As ...

  5. canvas上的像素操作(图像复制，细调)

    canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...

  6. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  7. 学习前端第二天心得体会（初步了解HTML5的部分API以及画布Canvas）

    一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document. ...

  8. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  9. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

随机推荐

  1. 安装tftp

    #!/bin/bash # tftp install # 20180711 # 仅测试过操作系统 ubuntu 16.04 download_url='http://img.fe.okjiaoyu.c ...

  2. Easyui Tab使用

    常见问题: 1. easyui 在子tab页中打开新tab页(关于easyUI在子页面增加显示tabs的一个问题) https://blog.csdn.net/u014805893/article/d ...

  3. 关闭VS警告 warning C4996

    warning C4996: '_vsnprintf': This function or variable may be unsafe. ...... warning C4996: strcpy w ...

  4. 蓝桥杯 全球变暖(dfs)

    标题:全球变暖 [题目描述]你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: 其中"上下左右"四个方向上连在一起的 ...

  5. 表单提交 fastadmin form

    1.引入form组件 require(['form'], function(Form){}); 2.生成form元素 3.绑定事件之验证(也可以绑定总表单事件Form.events.bindevent ...

  6. springboot的jar包

    公用jar包放在api层.有些却包的不用增加pom文件.将已存在的jar包加入即可

  7. 程序员之路：python3+PyQt5+pycharm桌面GUI开发

    http://blog.sina.com.cn/s/blog_989218ad0102wz1k.html 先看效果: 图 1 没错,学过C#的同学应该很熟悉这个界面,按钮风格和界面风格很相似,万万没想 ...

  8. 教你正确打开async/await关键字的使用

    这段时间在项目开发中看到了一些async/await的使用,在aspnet core的host组件源码中也看到了许多的async/await代码.在开发时,正确的使用了async/await是可以提高 ...

  9. (二)文档请求不同源之window.postMessage跨域

    一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...

  10. npm那些事儿

    npm,Node Package Manager,是node.js的模块依赖管理工具,安装nodejs时,一般会附带npm包管理工具. 一.npm相关1.npm的用途 能解决NodeJS代码部署上的很 ...