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;