Selenium 在浏览器中看不到可见的 CodeMirror 元素

Question

这是我尝试使用 Selenium 进行交互的元素的 HTML：

<div class="EasyMDEContainer" role="application"><div class="editor-toolbar" role="toolbar"><button class="heading" type="button" title="Heading (Ctrl-H)" aria-label="Heading" tabindex="-1"><i class="fa fa-header fa-heading"></i></button><i class="separator">|</i><button class="bold" type="button" title="Bold (Ctrl-B)" aria-label="Bold" tabindex="-1"><i class="fa fa-bold"></i></button><button class="italic" type="button" title="Italic (Ctrl-I)" aria-label="Italic" tabindex="-1"><i class="fa fa-italic"></i></button><i class="separator">|</i><button class="preview no-disable" type="button" title="Toggle Preview (Ctrl-P)" aria-label="Toggle Preview" tabindex="-1"><i class="fa fa-eye"></i></button></div><div class="CodeMirror cm-s-easymde CodeMirror-wrap" translate="no" style="clip-path: inset(0px);"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 87.1354px; left: 36.3368px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1" style="min-height: 300px; height: 300px;"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: -19px; border-right-width: 31px; min-height: 296px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre class="CodeMirror-line-like">x</pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors" style=""><div class="CodeMirror-cursor" style="left: 25.2257px; top: 72.0313px; height: 24.0104px;">&nbsp;</div></div><div class="CodeMirror-code" role="presentation"><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">sfas sasdf ad sd sd sdfdsfdsfdsfdsfdfsdf</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">sdfsdf</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">sdf</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">sd</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">f</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">ds</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">f</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">fsdfsdfdseds</span></pre></div></div></div></div></div><div style="position: absolute; height: 31px; width: 1px; border-bottom: 0px solid transparent; top: 296px;"></div><div class="CodeMirror-gutters" style="display: none; height: 327px;"></div></div><div class="editor-preview-full editor-preview"></div></div><div class="editor-preview-side editor-preview" style="height: 322px;"></div></div>

这是一个示例脚本：

element = driver.find_element(By.XPATH, "//div[@class='CodeMirror cm-s-easymde CodeMirror-wrap']//textarea")

我收到元素不可见错误。

但是，当我在 Chrome 开发工具中观察相同的元素时，它是可见的。

这不是等待它可见或位于 iframe 中的问题。

我想知道这是什么问题？

更新：

问题似乎出在 CodeMirror JS 库上。我尝试使用 JS 执行器来更改

innerHTML

、

value

和

textContent

，但即使文本显然已写入框中，但保存后它不会保留。

Answer 1

问题是我在使用普通的 selenium click/set_value 方法时无法看到动态

CodeMirror

元素。

我设法用 JS 执行器做到这一点

driver.execute_script(f'arguments[0].CodeMirror.setValue({value})', element)