使用 selenium 和 python 将文本发送到 ace 编辑器

Question

我正在尝试使用 chrome 驱动程序使用 selenium 和 python 自动填充 AWS lambda 函数；但是，我无法在 ace 编辑器中输入文本。

编辑器的 html 如下所示：

 <div class="codeditorHolder ace_editor aceFocus ace-cloud9-day" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; font-family: Monaco, Menlo, &quot;Ubuntu Mono&quot;, Consolas, source-code-pro, monospace;">
  <textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; height: 14.4px; width: 6.59775px; left: 44px; top: 0px;"></textarea>
  <div class="ace_gutter ace_fade-fold-widgets">
    <div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 556.8px; width: 40px;">
      <div class="ace_gutter-cell " style="height: 14.4px;">1<span class="ace_fold-widget ace_start ace_open" style="height: 14.4px;"></span></div>
      <div class="ace_gutter-cell " style="height: 14.4px;">2</div>
      <div class="ace_gutter-cell " style="height: 14.4px;">3</div>
      <div class="ace_gutter-cell " style="height: 14.4px;">4</div>
    </div>
    <div class="ace_gutter-active-line" style="top: 0px; height: 14.4px;"></div>
  </div>
  <div class="ace_scroller" style="left: 40px; right: 0px; bottom: 0px;">
    <div class="ace_content" style="margin-top: 0px; width: 1023px; height: 556.8px; margin-left: 0px;">
      <div class="ace_layer ace_print-margin-layer">
        <div class="ace_print-margin" style="left: 531.82px; visibility: visible;"></div>
      </div>
      <div class="ace_layer ace_marker-layer">
        <div class="ace_active-line" style="height:14.40000057220459px;top:0px;left:0;right:0;"></div>
      </div>
      <div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
        <div class="ace_line" style="height:14.40000057220459px"><span class="ace_keyword">def</span> <span class="ace_identifier">lambda_handler</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">event</span>, <span class="ace_identifier">context</span><span class="ace_paren ace_rparen">)</span>:</div>
        <div class="ace_line" style="height:14.40000057220459px"> <span class="ace_comment"># TODO implement</span></div>
        <div class="ace_line" style="height:14.40000057220459px"> <span class="ace_keyword">return</span> <span class="ace_string">'Hello from Lambda'</span></div>
        <div class="ace_line" style="height:14.40000057220459px"></div>
      </div>
      <div class="ace_layer ace_marker-layer"></div>
      <div class="ace_layer ace_cursor-layer ace_hidden-cursors">
        <div class="ace_cursor" style="left: 4px; top: 0px; width: 6.59775px; height: 14.4px;"></div>
      </div>
    </div>
    <div class="scroll_shadow">
      <div class="ace_corner"></div>
    </div>
  </div>
  <div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 21px; bottom: 0px;">
    <div class="ace_scrollbar-inner" style="width: 21px; height: 528px;"></div>
  </div>
  <div class="ace_scrollbar ace_scrollbar-h" style="height: 21px; left: 40px; right: 0px; display: none;">
    <div class="ace_scrollbar-inner" style="height: 21px; width: 1023px;"></div>
  </div>
  <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: hidden;">
    <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: visible;"></div>
    <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
  </div>
</div>

如果我们删除与内容本身无关的所有内容，那么它看起来像这样：

<div class="codeditorHolder ace_editor aceFocus ace-cloud9-day" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; font-family: Monaco, Menlo, &quot;Ubuntu Mono&quot;, Consolas, source-code-pro, monospace;">
  <textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; height: 14.4px; width: 6.59775px; left: 44px; top: 0px;"></textarea>
  <div class="ace_scroller" style="left: 40px; right: 0px; bottom: 0px;">
    <div class="ace_content" style="margin-top: 0px; width: 1023px; height: 556.8px; margin-left: 0px;">
      <div class="ace_layer ace_print-margin-layer">
        <div class="ace_print-margin" style="left: 531.82px; visibility: visible;"></div>
      </div>
      <div class="ace_layer ace_marker-layer">
        <div class="ace_active-line" style="height:14.40000057220459px;top:0px;left:0;right:0;"></div>
      </div>
      <div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
        <div class="ace_line" style="height:14.40000057220459px"><span class="ace_keyword">def</span> <span class="ace_identifier">lambda_handler</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">event</span>, <span class="ace_identifier">context</span><span class="ace_paren ace_rparen">)</span>:</div>
        <div class="ace_line" style="height:14.40000057220459px"> <span class="ace_comment"># TODO implement</span></div>
        <div class="ace_line" style="height:14.40000057220459px"> <span class="ace_keyword">return</span> <span class="ace_string">'Hello from Lambda'</span></div>
        <div class="ace_line" style="height:14.40000057220459px"></div>
      </div>
      <div class="ace_layer ace_marker-layer"></div>
      <div class="ace_layer ace_cursor-layer ace_hidden-cursors">
        <div class="ace_cursor" style="left: 4px; top: 0px; width: 6.59775px; height: 14.4px;"></div>
      </div>
    </div>
    <div class="scroll_shadow">
      <div class="ace_corner"></div>
    </div>
</div>

编辑器内的默认代码如下：

def lambda_handler(event, context):
    # TODO implement
    return 'Hello from Lambda'

我已尝试将键发送到 textarea 元素：

<textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; height: 14.4px; width: 6.59775px; left: 44px; top: 0px;"></textarea> 

通过使用发送键：

driver.find_element_by_css_selector('textarea.ace_text-input').send_keys('code')

为了自动化 ace 文本编辑器，我需要在 python 和 selenium 中做什么？

我看过另一个关于这个主题的帖子，但它的解决方案似乎不起作用，而且已经有将近 2.5 年的历史了。

谢谢。

Answer 1

首先，回答你的困惑：为什么要改变 textarea 的值，你没有看到任何改变？
因为 textarea 的大小太小，无法显示里面的内容。您可以通过在 DevTool 元素选项卡中选择 textarea DOM 节点来验证这一点，并监视页面上的突出显示元素，您会注意到突出显示了一个非常小的框。或者你可以改变它的样式来增加宽度和高度，然后你就可以在上面看到你改变的值了。

实际的 ACE 编辑器提供 API:setValue() 以将新内容设置到编辑器中

1) 在调用这个API之前，你需要在你的页面上找出ACE Editor的实例变量名，你应该尝试从所有使用的javascript中找到smilar code sn-p如下你的页面：

2) var editor 是我们想要的，现在您可以通过在 DevTool 的控制台选项卡中执行以下代码来快速检查是否找到正确的变量：

editor.setValue('function test(){}') //记得把editor换成你的名字。

如果编辑器中的内容发生了变化，你得到的是正确的。

更多详情请到https://ace.c9.io/#nav=embedding

3) 调用 selenium python API 的最后一步：execute_script() 在您的自动化中执行 javascript sn-p 以更改编辑器内容：

editor_variable_name = '' 
new_content = ''
script = 'arguments[0].setValue(arguments[1])'
driver.execute_script(script, editor_variable_name, new_content);

注意：我们需要 ACE Editor 实例是一个全局变量，意味着您可以通过模式访问它：windows.xxxx，如果它在 javascript 闭包内被清除，则无法在闭包之外访问它。如果你能在步骤2)中成功，说明它是一个全局变量。