在HTML中,由於頁面美化和用戶交互的需求,元素隱藏的使用非常常見,比如下拉菜單、內容折疊、對話框以及上傳文件框等。
隱藏常見有以下幾種表現形式。
- hidden:占據空間,無法點擊
- style="display: none" :最常見,不占據空間,無法點擊
- style="visibility: hidden":占據空間,無法點擊
- style="overflow: hidden":占據空間,無法點擊
- style="opacity: 0":占據空間,無法點擊
- style="position: absolute; top: -999em":不占據空間,無法點擊
- style="position: relative; top: -999em; ":占據空間,無法點擊
- style="position: absolute; visibility: hidden; ":不占據空間,無法點擊
- style="height: 0; overflow: hidden; ":不占據空間,無法點擊
- style="opacity: 0; filter:Alpha(opacity=0); ":占據空間,可以點擊
- style="position: absolute; opacity: 0; filter:Alpha(opacity=0); ":不占據空間,可以點擊
- style="zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);":IE6/IE7/IE9不占據空間,IE8/FireFox/Chrome/Opera占據空間。都無法點擊
- style="position: absolute;zoom: 0.001;-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);" :不占據空間,無法點擊
多數情況下,隱藏元素時不可以直接操作的。如果想操作隱藏元素,如果不能通過使用正常的頁面步驟觸發其顯示,則可以通過執行JavaScript腳本,通過移除掉元素的hidden或style屬性來使得元素顯示並可以進行操作。
如路過圖床網https://imgchr.com/。如圖5.10所示。
真實的上傳框並不是“開始上傳”按鈕。而是隱藏在頁面的左上角。我們通過在Elements面板Ctrl+F搜索input[type=file],可以找到實際的上傳框。這里有兩處,一處是上傳圖片,一處是通過相機拍照上傳,我們選擇第一個上傳框。該上傳框通過一個樣式類hidden-visibility為元素添加了sytle屬性visibility: hidden屬性,來達到隱藏的目的。因此,我們只需要移除掉該元素的style屬性即可,然后使用send_keys完成圖片上傳。代碼如下。
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get('https://imgchr.com/')
elm = driver.find_element('id', 'anywhere-upload-input')
js = 'arguments[0].removeAttribute("style");'
driver.execute_script(js, elm)
sleep(0.5)
elm.send_keys('/Users/superhin/Downloads/beida.jpeg')
sleep(3)
driver.quit()
以上示例中,先定位到指定的輸入框,然后以參數的形式傳遞給JavaScript腳本並移除其style屬性,由於執行腳本往往往往需要一定的時間,這里等待了0.5秒后再繼續操作。上傳框支持使用send_keys文件路徑來完成上傳。讀者需要將圖片地址改為自己本地的地址。
只讀、置灰等限制屬性可以通過類似的方式,移除disable等限制屬性