element clickoutside 会被enter触发 click element at coordinates

转载

mob64ca1409970a 2024-03-20 12:33:11

文章标签 自动化测试 selenium ci html 5e 文章分类 机器学习人工智能

命令简介

官方api

实验过程

区别详解

扩展

命令简介

click与click at都是模拟页面点击操作的命令，即点击网页某一个元素，包括输入框、文本框、图片、下拉框、复选框、单选框等。

区别：click只是点击某一个元素，click at是点击某一个元素的具体位置。

官方api

`click`

Clicks on a target element (e.g., a link, button, checkbox, or radio button).

arguments

locator: An element locator.

`click at`

Clicks on a target element (e.g., a link, button, checkbox, or radio button). The coordinates are relative to the target element (e.g., 0,0 is the top left corner of the element) and are mostly used to check effects that relay on them, for example the material ripple effect.

arguments

locator: An element locator.
coord string: Specifies the x,y position (e.g., - 10,20) of the mouse event relative to the element found from a locator.

实验过程

测试界面html

<!DOCTYPE html>
<html>
	<head>
	<title>selenium 学习之click at </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
</style>
<script type="text/javascript">
	
	function clickimg(){
		
	   var oDIv = document.getElementById('locimg');
	   oDIv.onclick = function(event){
			var e = event || window.event;
			if(e.clientX<100){
				var s='e.clientX='+e.clientX+',(e.clientY='+e.clientY+')跳转到百度！'
				alert(s)
				document.getElementById('locresult').innerHTML=s
			}
			else{
				var s='e.clientX='+e.clientX+',(e.clientY='+e.clientY+')跳转到谷歌！'
				alert(s)
				document.getElementById('locresult').innerHTML=s
			}
	   }
	}



</script>
</head>
<h1>selenium test 之 click at </h1>
<div id="main">
	<a href="http://music.163.com"><img id="imgleft" src="./leftimg.png" /></a>
	<a href="http://www.php.cn"><img id="imgg" src="./testimg.png" usemap="#planetmap" /></a>
	<map name="planetmap" id="planetmap">
	  <area shape="rect" coords="10,10,50,120" id="a1" href ="https://www.baidu.com/" alt="Venus" />
	  <area shape="rect" coords="120,140,200,180" href ="" alt="Mercury" />
	</map>

	<br/><br/><br/>
	<div style="position:absolute; left:20px; top:300px; ">
		<img id="locimg" src="./locimg.png" /><br/>
		<span id="locresult"></span>
	</div>
</div>
<script type="text/javascript">

	clickimg();


</script>
</body>
</html>

执行命令：

注意：无法连续执行，一次只能按照要测试的目的执行一两行

element clickoutside 会被enter触发 click element at coordinates_ci

side文件

{
  "id": "f1e058be-c4cd-4b7d-8e69-3e84c47bc5d4",
  "version": "2.0",
  "name": "shili",
  "url": "http://localhost:8080/aa/clickat.html",
  "tests": [{
    "id": "903015a3-65fb-49e1-8be5-f9f9b832a551",
    "name": "Untitled",
    "commands": [{
      "id": "3558b8f5-e02f-4688-8e73-5ecda321fda5",
      "comment": "",
      "command": "open",
      "target": "http://localhost:8080/aa/clickat.html",
      "targets": [],
      "value": ""
    }, {
      "id": "8064f9ac-e405-4082-9591-547a8102a0d4",
      "comment": "",
      "command": "//click",
      "target": "id=imgg",
      "targets": [],
      "value": ""
    }, {
      "id": "cc147d1e-7dd4-4e9a-9a1c-60f3a1849396",
      "comment": "",
      "command": "//clickAt",
      "target": "id=locimg",
      "targets": [],
      "value": "30,50"
    }, {
      "id": "d8db758f-f59e-47da-80e0-0c7926225c49",
      "comment": "",
      "command": "clickAt",
      "target": "id=locimg",
      "targets": [],
      "value": "230,50"
    }, {
      "id": "e1b397d8-616a-4e47-94f7-6b91429337d5",
      "comment": "",
      "command": "//不带参位置验证",
      "target": "",
      "targets": [],
      "value": ""
    }, {
      "id": "3de8a050-3f60-46a5-ab59-ea771198fec7",
      "comment": "",
      "command": "//clickAt",
      "target": "id=locimg",
      "targets": [],
      "value": ""
    }, {
      "id": "e755ecdc-4609-420a-90db-1844db83bf4c",
      "comment": "",
      "command": "//click",
      "target": "id=locimg",
      "targets": [],
      "value": ""
    }, {
      "id": "2eeaffaf-5be2-4f27-a46c-b39f12af101b",
      "comment": "",
      "command": "//热区验证",
      "target": "",
      "targets": [],
      "value": ""
    }, {
      "id": "731ef755-4d46-46da-b735-94f75d8f3fa4",
      "comment": "",
      "command": "//click",
      "target": "//*[@id=\"a1\"]",
      "targets": [],
      "value": ""
    }, {
      "id": "4a34b4f7-eb8f-40c6-ae5e-bf4d86bb3e23",
      "comment": "",
      "command": "//clickAt",
      "target": "id=locimg",
      "targets": [],
      "value": "30,50"
    }]
  }],
  "suites": [{
    "id": "20d9595f-d7ff-4483-926a-bb36bae1f0a9",
    "name": "Default Suite",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["903015a3-65fb-49e1-8be5-f9f9b832a551"]
  }],
  "urls": ["http://localhost:8080/aa/clickat.html"],
  "plugins": []
}

区别详解

基本区别：click只是点击某一个元素，click at是点击某一个元素的具体位置。

具体区别：
1、基础知识说明：我们在浏览网页时，点击某一个元素，都会精确到点击的这个元素的那个位置，如一个按钮，操作的时候，可能或点击左上角、右上角、正中间等，对于程序而言，都会有一个操作元素具体操作位置location；
2、在ide中调用操作类的命令时，如click，在程序处理的逻辑上，也是有一个具体点击元素的操作位置，默认是正中间；而 click at是可以输入参数控制具体的操作位置；
3、其两者在基础使用方面最大的区别就如此，click不关心点击位置，只要实现点击效果就可以，而click at不仅可以实现点击效果，还可以控制点击位置，对于大多数场景，click就够用了，click at相对用的少；
4、那么click at什么场景下用呢，根据官方的api的设计，也就是你需要控制点击位置的时候用，啥意思，说白了，就是同一个元素可能点击不同地方有不同效果的时候，那么click就不够用了，这个时候就click at就排上用场了，举个例子，网页上有一张大图片，大图片上有两个游戏，左边是王者荣耀，右边是开心消消乐，点击左边会跳转到王者荣耀的官网，点击右边会跳转到开心消消乐的官网，那么点击左边还是点击右边就靠click at传递的参数控制，click方法已不适用；（举例只是为了说明两方法区别，实际这种根据不同位置处理的，可能会用于用户行为分析）
5、对于click at方法，如果传递参数了，就是当前元素从左上角（坐标0,0）开始的相对位置相加计算，如果未传递坐标位置，那么默认是0,0；如果传递的参数均是负数，只要点击的对象对位置不敏感的/没有特殊处理的，都可以正常执行点击事件；
6、注意，图片热区触发不能通过click at位置控制触发，热区需要通过定位器定位到热区执行click事件，程序执行与人工执行方面稍有差异；