Selenium系列教程-07 使用Actions类模拟复杂操做

时间 2019-11-17

标签 selenium 系列教程使用 actions 模拟复杂繁體版

原文原文链接

系列资源：javascript

主要内容

Actions 类简介
拖拽实例

Actions 类简介

selenium-webdriver 中Actions类提供了一些方法能够让咱们来建立一连串的动做，好比鼠标右键点击，鼠标通过元素，在使用node.js语言时，调用极其简单，直接使用 const actons = driver.actions() 就能够来使用。 Actions类的api地址为 API 使用示例以下：css

const actions = driver.actions();

 await actions     
     .keyDown(SHIFT)
     .move({origin: el})
     .press()
     .release()
     .keyUp(SHIFT)
     .perform();
复制代码

这个操做定义了以下动做：html

设备	动做1	动做 2	动做3	动做4	动做5
键盘事件	keyDown(SHIFT)				keyUp(SHIFT)
鼠标事件		move({origin: el})	press()	release()

这里须要注意: 全部的动做调用完毕之后必须调用perform()方法才能运行。java

关于更多的方法，能够经过查阅上面提供的api地址进行学习。node

实例说明

如下界面是咱们在作自动化常见的一种；咱们能够经过拖拽图片到其它位置。这种场景咱们就能够经过使用Actions 类相关方法来完成。jquery

被测html 源码:

<!DOCTYPE HTML>
<html>
<head>

	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

	<style>
		* {
			font-family: 'Lato', sans-serif;
			font-weight: 300;
			font-size: 16px;
			line-height: 1;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
		}

		body {
			margin: 0;
			background: #f7dafb;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, rgba(67, 137, 162, 0.75), rgba(92, 37, 141, 0.75));
		}

		.drag-me {
			background: #d94fed;
			width: 180px;
			padding: 0 0 0 40px;
			color: #830f94;
			line-height: 50px;
			cursor: url("https://www.google.com/intl/en_ALL/mapfiles/openhand.cur"), all-scroll;
			cursor: -webkit-grab;
			cursor: -moz-grab;
			cursor: -o-grab;
			cursor: -ms-grab;
			cursor: grab;
			-moz-transition: -moz-transform 0.2s, box-shadow 0.2s;
			-o-transition: -o-transform 0.2s, box-shadow 0.2s;
			-webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s;
			transition: transform 0.2s, box-shadow 0.2s;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: #cf21e8 0 0 3px;
			-webkit-box-shadow: #cf21e8 0 0 3px;
			box-shadow: #cf21e8 0 0 3px;
		}

		.drag-me:hover {
			-moz-transform: scale(1.03, 1.03);
			-ms-transform: scale(1.03, 1.03);
			-webkit-transform: scale(1.03, 1.03);
			transform: scale(1.03, 1.03);
			-moz-box-shadow: #830f94 0 1px 3px;
			-webkit-box-shadow: #830f94 0 1px 3px;
			box-shadow: #830f94 0 1px 3px;
		}

		.drag-me:active {
			cursor: url("https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur"), all-scroll;
			cursor: -webkit-grabbing;
			cursor: -moz-grabbing;
			cursor: -o-grabbing;
			cursor: -ms-grabbing;
			cursor: grabbing;
			-moz-transform: scale(1.1, 1.1);
			-ms-transform: scale(1.1, 1.1);
			-webkit-transform: scale(1.1, 1.1);
			transform: scale(1.1, 1.1);
			-moz-box-shadow: rgba(131, 15, 148, 0.7) 0 2px 8px;
			-webkit-box-shadow: rgba(131, 15, 148, 0.7) 0 2px 8px;
			box-shadow: rgba(131, 15, 148, 0.7) 0 2px 8px;
		}

		.drag-me:before {
			content: '.';
			position: absolute;
			left: 14px;
			font-size: 20px;
			line-height: 26px;
			color: #ac14c2;
			text-shadow: 0 5px #ac14c2, 0 10px #ac14c2, 5px 0 #ac14c2, 5px 5px #ac14c2, 5px 10px #ac14c2, 10px 0 #ac14c2, 10px 5px #ac14c2, 10px 10px #ac14c2;
		}	</style></head><body>

	<div class="drag-me">Drag me around!</div>

</body>

<script>
	$(function() {
        $(".drag-me").draggable();
    });
</script>

</html>
复制代码

selenium 基于node.js自动化代码以下：git

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('file:///D:/index.html')

async function dragEle (){
    let imageEle = await driver.findElement({css:'.drag-me'})
 
    driver.actions().mouseMove(imageEle).mouseDown().mouseMove({x:10,y:500}).mouseUp().perform()

}

dragEle()
复制代码

获取更多资讯，能够关注公众号,也能够加QQ群：707467292 进行node.js自动化相关技术交流。 github