Selenium系列教程-06 圖片上傳以及Web Element經常使用操做方法

系列資源：

• 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 窗口，這個窗口我麼使用開發者工具是定位不到的。以下圖：

百度圖片搜索對話框是沒法使用開發者工具定位的。在作這類自動化操做的時候，有兩種解決方案：

1. 查看頁面元素，找到對應的input標籤，經過調用sendKeys()方法進行文件上傳。
2. 藉助專業的工具，如autoit（https://www.autoitscript.com），或者LeanRunner(www.leanpro.cn/leanrunner)

這裏，以百度搜索爲例，給你們介紹如何使用第1種解決方法。經過開發者工具，咱們定位 本地上傳圖片 按鈕實際是 input 類型。以下圖:

那麼咱們的node.js代碼就能夠這樣來寫：

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自動化相關技術交流。