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