在 ACE 编辑器中设置值

Question

我是 Selenium 自动化和 Javascript 的新手。我正在尝试编写一个 Selenium 测试，该测试应该将一些 txt 插入 ACE 编辑器。

元素（检查元素）看起来像

<div class="editor ng-pristine ng-untouched ng-valid ng-scope ace_editor ace-chrome emacs-mode ng-empty paragraph-text--dirty" ui-ace="{ onLoad : onLoad, require : ['ace/ext/language_tools'] }" ng-model="paragraph.text" ng-class="{'paragraph-disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' || revisionView === true,            'paragraph-text--dirty' : dirtyText !== originalText &amp;&amp; dirtyText !== undefined}" id="20190722-172811_773233816_editor" style="height: 16px; font-size: 9pt;">
  <textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; left: 4px; height: 16px; width: 7.20117px; top: 0px;"/>
  <div class="ace_gutter" aria-hidden="true" style="display: none;">
    <div class="ace_layer ace_gutter-layer" style="margin-top: 0px; height: 48px; width: 34px;">
      <div class="ace_gutter-cell " style="height: 16px;">1</div>
    </div>
    <div class="ace_gutter-active-line" style="top: 0px; height: 16px;"/>
  </div>
  <div class="ace_scroller" style="left: 0px; right: 0px; bottom: 0px;">
    <div class="ace_content" style="margin-top: 0px; width: 1214px; height: 48px; margin-left: 0px;">
      <div class="ace_layer ace_print-margin-layer">
        <div class="ace_print-margin" style="left: 580px; visibility: visible;"/>
      </div>
      <div class="ace_layer ace_marker-layer"/>
      <div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
        <div class="ace_line_group" style="height:16px">
          <div class="ace_line" style="height:16px"/>
        </div>
      </div>
      <div class="ace_layer ace_marker-layer"/>
      <div class="ace_layer ace_cursor-layer ace_hidden-cursors">
        <div class="ace_cursor" style="left: 4px; top: 0px; width: 7.20117px; height: 16px;"/>
      </div>
    </div>
  </div>
  <div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 20px; bottom: 0px;">
    <div class="ace_scrollbar-inner" style="width: 20px; height: 16px;"/>
  </div>
  <div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px; left: 0px; right: 0px;">
    <div class="ace_scrollbar-inner" style="height: 20px; width: 1214px;"/>
  </div>
  <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;">
    <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"/>
    <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;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
  </div>
</div>

我做了一些搜索，发现添加 txt 的方法是通过 JS 脚本 20190722-172811_773233816_editor.setValue("abcd")

• 这是正确的吗？
• 如何自动查找编辑器的 ID？
• 我在开发控制台中尝试过，它告诉我 20190722-172811_773233816_editor 不是有效名称（var 不能以数字开头）。

谢谢！

Answer 1

你可以试试这个，

var aceEditorElement = document.getElementsByClassName('ace_editor')[0].id; // Gets the Id of the ace editor; If you have multple editors in your page choose the required one from the list
var editorContainer = document.find("#" + aceEditorElement); // Gets the container through the Id
var editor = ace.edit(editorContainer ["0"]);
editor.session.setValue("Hello World"); // Sets the value into the editor