ui自动化-如何使用WebDriver自动化Ace编辑器(发送密钥)

Question

在我的应用程序中，所有的查询编辑器都是Ace编辑器，我需要使用WebDriver键入查询。我试过使用发送密钥，但似乎不起作用。有没有其他方法可以将我的输入发送到Ace编辑器，从而实现自动化？

下面是我的HTML代码

<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

使用编辑器API应该比使用SendKeys容易得多。例如，这里有一个C#控制台应用程序，它启动ACE主页并更改当前演示编辑器中的文本：

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是页面中对应于ACE编辑器实例的变量，我刚刚使用了这里详细介绍的第一个API示例之一：使用ACE

Answer 2

我发现在ace的textarea上使用以下sequence可以可靠地工作。CCD_ 4、CCD_ 5然后是CCD_ 6。

Click对我来说并不可靠，因为Ace计算它是否应该聚焦文本区域的方式。

谢谢你的提问，很高兴知道我并不孤单。希望这有帮助！

Answer 3

Becky和Simon的回答对我都不适用。Simon的回答尤其适用，因为我在页面上有多个ACE编辑器实例，并且ACE实例没有泄漏到窗口对象上（现代ES6模块封装）。

以下是对我有效的方法（王牌1.2.6）：

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

此外，如果您已经注册了密钥命令，您可以再次通过原生JS事件触发它们：

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

这适用于PhantomJS 2。如果ACE能让开箱即用的测试变得更容易，那就太好了，但哦，好吧。