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

Question

我正在尝试用selenium和python用chrome驱动程序自动填充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>

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

^{pr2}$

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

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> 

通过使用sendkeys：

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

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

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

谢谢。在

Answer 1

首先，请回答您的困惑：为什么要更改textarea的值，您没有看到任何更改发生？
因为textarea的大小太小，无法显示其中的内容。您可以通过在DevTool Element选项卡中选择textareadom节点来验证这一点，并监视页面上的highlight元素，您会发现有一个非常小的框高亮显示。或者，您可以更改其样式以增加宽度和高度，然后您可以在其上看到更改的值。在

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

1）在调用此API之前，您需要在页面上找到ACE Editor实例变量名，您应该尝试从页面使用的所有javascript中找到如下smilar代码片段：

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

editor.setValue('function test(){}')//记住将editor替换为您的名字。在

如果编辑器中的内容发生更改，则会得到正确的内容。在

有关详细信息，请访问https://ace.c9.io/#nav=embedding

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

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）中成功，则表示它是全局变量。在