send_keys報錯element not interactable

這兩天要在阿里雲日誌中操做UI，以輸入關鍵字搜索日誌。

在send_keys時報錯element not interactable。

iframe

第一個問題是iframe，經過切換iframe解決：

driver.switch_to.frame(0)  # 索引從0開始

span

第二個問題是span。

F12查看html長這樣：

①find_element(pre).click 有效，說明iframe切換成功了

②find_element(span2).send_keys報錯

element not interactable

span不支持send_keys。

第一個方法，經過調js來解決，設置span的innerText

search_text = 'error'
log_search_span = driver.find_element_by_xpath(
        '//*[@id="queryEl"]/div[2]/div/div[6]/div[1]/div/div/div/div[5]/div/pre')
js = 'arguments[0].innerText=arguments[1];'
driver.execute_script(js, log_search_span, search_text)

第二個方法，添加屬性contenteditable

search_text = 'error'
log_search_span = driver.find_element_by_xpath(
        '//*[@id="queryEl"]/div[2]/div/div[6]/div[1]/div/div/div/div[5]/div/pre')
js = 'arguments[0].setAttribute("contenteditable", "true");'
driver.execute_script(js, log_search_span)
log_search_span.send_keys(search_text)  # 可編輯後send_keys成功

不簡單

雖然值設置成功了，可是不能用，在查詢時，仍是用空值在查詢。

通過分析，得出如下線索：

1. 設置的元素值是已經生成後的dom
2. 程序真正的dom隱藏在js/後端中
3. span是由js或後端動態生成的
4. 要想模擬出來，須要分析js實現代碼
5. 控制檯的js代碼是加密混淆過的
6. selenium的send_keys已是模擬鍵盤輸入了，不知道爲啥沒有觸發相關代碼，存值到dom

網上不少的方案是<input>標籤，比較好解決，阿里的這個span還真有點不簡單。

chrome console調試js

最後分享一下chrome console調試js的方法。

F12後，在元素上右鍵，選擇Copy selector，複製selector

切換到console，輸入便可定位到該元素：

document.querySelector('#queryEl > div.react-codemirror2 > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > div > pre > span > span').innerText;