系列資源：
- 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方法
主要內容
- 對Web Element 常用操作方法
- 如何進行檔案上傳操作
常用的對Web Element操作方法
眾所周知，我們做web UI自動化最主要的部分就是讓我們平時在web頁面上的手工點點點操作轉化為自動化程式碼，讓機器代替我們去做這些點點點的工作。那麼我們根據以往的使用統計，這裡跟大家簡單總結下：
| 方法名 | 解釋 | 示例 |
|---|---|---|
| click() | 點選元素 | driver.findElement({id:'xxx'}).click() |
| clear() | 情況輸入框 | driver.findElement({id:'xxx'}).clear() |
| sendKeys(value) | 輸入文字資訊 | driver.findElement({id:'xxx'}).sendKeys("hello world") |
| getText() | 獲取web元素文字值 | driver.findElement({id:'xxx'}).getText() |
這4個方法是我們在學習selenium-webdriver基礎語法是用到次數應該最頻繁的。當然，selenium-webdriver的api還提供更多的其它方法供我們呼叫，比如獲取web element的css屬性，或者web element元素座標位置等等，大家可以參考selenium-webdriver 的api來進行學習 api 這裡就不一一給大家介紹了。
檔案上傳操作
我們在做web自動化的時候，不可避免的會有上傳檔案的操作，比如更改一個頭像這些操作，在上傳操作的過程中，會彈出windows 視窗，這個視窗我麼使用開發者工具是定位不到的。如下圖：
- 檢視頁面元素，找到對應的input標籤，通過呼叫sendKeys()方法進行檔案上傳。
- 藉助專業的工具，如autoit（https://www.autoitscript.com），或者LeanRunner(www.leanpro.cn/leanrunner)
這裡，以百度搜尋為例，給大家介紹如何使用第1種解決方法。通過開發者工具，我們定位 本地上傳圖片 按鈕實際是 input 型別。如下圖:
require('chromedriver')
const { Builder } = require('selenium-webdriver')
let driver = new Builder().forBrowser('chrome').build()
driver.get('http://www.baidu.com')
// 點選上傳圖示，彈出上傳介面
driver.findElement({className:"soutu-btn"}).click()
//找到上傳元素使用sendKeys() 傳入檔案路徑
driver.findElement({className:'upload-pic'}).sendKeys('./abc.png')
複製程式碼小結
如果大家在做web自動化時可以找到對應 input 型別的file控制元件，可以直接使用第1種方案來解決。如果發現檔案上傳使用的是一些flash控制元件， sendKeys() 不能解決問題時，大家可以參考第2種解決方案。 關於第2種解決方案，大家可以參考官方文件來做。
獲取更多資訊，可以關注公眾號,也可以加QQ群：707467292 進行node.js自動化相關技術交流。