Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 956
Pringa Avatar asked Jun 22 '15 04:06

Pringa


1 Answers

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

like image 124
Simon Mourier Avatar answered Oct 01 '22 02:10

Simon Mourier