Windows下使用python3 + selenium實現網頁自動填表功能

　　本文由博主(SunboyL)原創，轉載請註明出處：http://www.javashuo.com/article/p-xfntsnpu-kh.html

　　由於工做緣由，須要將xls文件的數據錄入到網上。由於數據量太多，並且之後時不時還須要用上，Ctrl+C,Ctrl+V不是長久之計。因此萌生一個想法，寫一個工具，用於把xls文件的數據錄入到網站上。

　　筆者這段時間纔剛剛開始瞭解HTML、JavaScript，不少東西都是剛剛初步有點認識。寫的比較詳細，若是你跟我同樣，相信文章對你頗有用。若是是老鳥，那就跳過吧~

　　讀寫xls部分省略。

　　要實現填寫表單，須要：

　　1.python的selenium庫。系統瞭解selenium，請到：http://www.testclass.net/selenium_python

　　2.Chrome瀏覽器，也可使用其餘瀏覽器，參考：http://www.testclass.net/selenium_python/selenium3-browser-driver

　　3.與谷歌瀏覽器版本對應的chromedriver,下載地址：https://sites.google.com/a/chromium.org/chromedriver/home，打不開就用taobao備用地址：http://npm.taobao.org/mirrors/chromedriver/

1、配置chromedriver

　　1）先查看自身Chrome瀏覽器的版本號，再到chromedriver下載網站找到與自身Chrome瀏覽器匹配的chromedriver版本下載使用。筆者下載的是win32版本，詳細步驟如圖：

 

 

　　2）下載後解壓，並把chromedriver.exe拷貝到Chrome瀏覽器所在目錄，詳細步驟如圖所示：

　　

 

　　3）爲了方便，咱們也能夠把Chrome路徑添加到系統環境變量中：

　　

 

　　到此，chromedriver就配置完畢啦。

 

2、Python安裝selenium庫

　　使用以下命令便可完成安裝：

　　

pip3 install selenium

　　如圖：

　　

 

3、測試selenium庫使用

　　編輯以下代碼，實現打開百度頁面並搜索「cnblogs」的簡單功能（後續講解代碼中id的來源）：

import os
from selenium import webdriver


def test():
    driver = webdriver.Chrome("chromedriver.exe")  # chromedriver所在路徑
    driver.get(r"http://www.baidu.com")

    driver.find_element_by_id("kw").send_keys("cnblogs")  # 輸入cnblogs
    driver.find_element_by_id("su").click()  # 點擊「百度一下」搜索


if __name__ == "__main__":
    test()
    os.system("pause")

　　

　　測試完成，接下來就可使用了。

　　

　　

4、selenium的使用

 　　selenium提供了多種定位網頁元素的方法，如經過id、name、classname、xpath等多種方式。詳細請參考：http://www.testclass.net/selenium_python/find-element/，這裏就不一一贅述了。

　　到此，咱們就已經幾乎作好填寫表單的全部準備啦，最後一步，就是定位咱們的目標網站的具體元素並實現填表了。

 

5、定位網頁元素

　　chrome開發者工具爲咱們提供了很是遍歷的方式定位網頁元素。咱們以定位百度首頁的文本輸入框以及「百度一下」按鈕爲例：

　　一、打開Chrome瀏覽器，按F12打開開發者工具。點擊進入「Elements」板塊，咱們就能看到網頁完整的HTML代碼。如圖：

　　

 

 

　　2.點擊開發者工具左上角的小按鈕來定位頁面元素，咱們定位文本輸入框找到輸入框對應的元素id，固然，咱們也能夠經過其餘值來定位，如圖：   

       

 

　　接下來咱們定位百度按鈕：

　   

 

 　　從這裏咱們看到，文本輸入框的id是「kw」，百度一下按鈕的id是su，有了如上信息，咱們就能夠寫出第三大點的代碼了。

 

6、實踐中遇到的一些問題：處理批量填表時拋出異常：selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted

　　對於批量數據的填寫，經常須要咱們點擊按鈕增長填寫區域。以下圖示例

　　

　　經過Chrome開發者工具，咱們定位到該按鈕元素，三個按鈕屬於同一個類，class=「addbutton」：

　　

 

 　　假設咱們已經定位到改行元素row_element，接下來咱們就開始實現代碼吧：

　　1）初版代碼

　　　　咱們經過row_element定位到第二個addbutton按鈕並點擊，代碼以下：

　　

　　經過以上方式，咱們實現了自動添加一行填表區域的邏輯。

　　可是事與願違，當我用這種方式批量填表時，填表途中拋出了異常：

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <input type="button" tabindex="-1" class="addbutton" value="＋↓" onclick="postInsert(11)"> is not clickable at point (737, 833). Other element would receive the click: <iframe frameborder="0" name="hiddenwin" id="hiddenwin" class="debugwin"></iframe>
(Session info: chrome=77.0.3865.90)

　　

　　大概意思就是被其餘元素攔截了。只能再找新的辦法。

　　各類查資料，結果就出現了第二版代碼。

　　2）第二版代碼

　　將初版代碼稍做修改，使用JavaScript腳本執行，如圖：

　　

　　

print("添加一條填表區...")
add_buttons = row_element.find_elements_by_class_name('addbutton')
# add_buttons[1].click()
driver.execute_script("arguments[0].click()", add_buttons[1])

View Code

　　通過修改，再也沒有出現剛剛的報錯了~

　　3）第三版代碼，進一步改進

　　隨着本身對JavaScript和HTLM的進一步熟悉，從新看了一下發現本身繞了個大彎，其實徹底有更簡單的方法實現。

　　筆者本來的邏輯，是經過各類方式定位到了該行元素，再定位到具體按鈕，進而使用click()實現。

　　可是咱們回頭看一下HTLM源碼，以下：

　　

　　

　　咱們能夠看到，其實click事件就是響應了一個postInsert()函數！

　　咱們直接使用driver.execute_script()調用postInsert()函數就能夠了，徹底不須要定位元素位置呀，不！須要！定位！呀！呀！

　　postInsert()函數接受一個整型值，表明在第幾行的後面插入新行。對代碼稍做修改，就有了第三版代碼，一行就搞定了：

　　

 

 至此，工具就寫完了，筆者這幾天是從0基礎瞭解HTML、JavaScript開始，一步一步加深認識，並把工具寫好，碰到的坑，數不盡數。可是收穫也很大，繼續加油吧！