系列資源：
- Selenium系列教程-01 環境配置
- Selenium系列教程-02 使用Chrome開發者工具
- Selenium系列教程-03 使用開發者工具進行元素定位
- Selenium系列教程-04 常用的元素定位方法
- Selenium系列教程-05 findElements 方法詳解
- Selenium系列教程-06 圖片上傳以及Web Element常用操作方法
- Selenium系列教程-07 使用Actions類模擬複雜操作
- Selenium系列教程-08 瀏覽器本身行為控制
- Selenium系列教程-09 如何切換iframe
- Selenium系列教程-10 如何執行JavaScript方法
主要內容
- Actions 類簡介
- 拖拽例項
Actions 類簡介
selenium-webdriver 中Actions類提供了一些方法可以讓我們來建立一連串的動作，比如滑鼠右鍵點選，滑鼠經過元素，在使用node.js語言時，呼叫極其簡單，直接使用 const actons = driver.actions() 就可以來使用。 Actions類的api地址為 API 使用示例如下：
const actions = driver.actions();
await actions
.keyDown(SHIFT)
.move({origin: el})
.press()
.release()
.keyUp(SHIFT)
.perform();
複製程式碼這個操作定義瞭如下動作：
| 裝置 | 動作1 | 動作 2 | 動作3 | 動作4 | 動作5 |
|---|---|---|---|---|---|
| 鍵盤事件 | keyDown(SHIFT) | keyUp(SHIFT) | |||
| 滑鼠事件 | move({origin: el}) | press() | release() |
這裡需要注意: 所有的動作呼叫完畢以後必須呼叫perform()方法才能執行。
關於更多的方法，可以通過查閱上面提供的api地址進行學習。
例項說明
以下介面是我們在做自動化常見的一種；我們可以通過拖拽圖片到其它位置。 這種場景我們就可以通過使用Actions 類相關方法來完成。
<!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自動化程式碼如下：
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自動化相關技術交流。
