How to automate the Ace Editor (send keys) using WebDriver?

Question

In my application all the query editors are Ace editor and I need to type in queries using WebDriver. I have tried using send keys but it doesn't seem to work. Is there any other way I can send my input to Ace editor and thus automate?

Below is my HTML code

<div class="" ng-show="queryType=='Spark Query'">
    <pre class=" ace_editor ace-xcode">
    <textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; height: 18px; width: 7px; left: 4px; top: 0px;"/>
    <div class="ace_gutter" style="display: none;">
    <div class="ace_scroller" style="left: 0px; right: 0px; bottom: 0px;">
    <div class="ace_content" style="margin-top: 0px; width: 659px; height: 334px; margin-left: 0px;">
    <div class="ace_layer ace_print-margin-layer">
    <div class="ace_layer ace_marker-layer"/>
    <div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
    <div class="ace_layer ace_marker-layer"/>
    <div class="ace_layer ace_cursor-layer ace_hidden-cursors">
    </div>
</div>

Answer 1

It should be much easier to use the editor API than SendKeys. For example, here is a C# console app that lauches ACE home page and change the text in the current demo editor:

class Program
{
    static void Main(string[] args)
    {
        ChromeDriver driver = new ChromeDriver();
        driver.Navigate().GoToUrl("http://ace.c9.io/");
        driver.ExecuteScript("editor.setValue('the new text here');");
    }
}

editor is the variable in the page that corresponds to the ACE editor instance, and I've just used one of the first API samples detailed here : Working with ACE

Answer 2

Both Becky's and Simon's answer doesn't work for me. Simon's in particular because I have multiple instances of the ACE editor on the page and the ACE instances are not leaked onto the window object (modern ES6 module encapsulation).

Here's what works for me (ace 1.2.6):

const ta = document.querySelector("textarea");
ta.value = "my text\nwith newline";
ta.dispatchEvent(new Event("input"));

In addition, if you have registered key commands, you may trigger them via native JS events again:

const e = document.createEvent("Event");
e.initEvent("keydown", true, true);
e.keyCode = 13  # Enter key
ta.dispatchEvent(e);

This works in PhantomJS 2. It would be nice if ACE made it easier to test out of the box, but oh well.

Answer 3

I've found using the following sequence on ace's textarea works reliably. mouseDown, mouseUp then sendText.

Click doesn't work reliably for me due to the way Ace works out if it should focus the textarea or not.

Thanks for your question, its nice to know I wasn't alone. Hope this is helpful!