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>

使用sendkeys：

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代码段：

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

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）取得成功，则表示它是一个全局变量。

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

1 个答案: