如何使用 WebDriver 自动化 Ace 编辑器（发送密钥）？答案

【问题标题】：How to automate the Ace Editor (send keys) using WebDriver?如何使用 WebDriver 自动化 Ace 编辑器（发送密钥）？
【发布时间】：2015-06-22 04:26:39
【问题描述】：

在我的应用程序中，所有查询编辑器都是 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>

【问题讨论】：

有人可以建议如何使用 webDriver 实现 sendKeys 到 AceEditor

标签： selenium-webdriver ui-automation ace-editor

【解决方案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 示例：Working with ACE

【讨论】：

感谢您的快速回复。请详细说明:(我对此完全陌生..我正在使用Java使用WebDriver。所以对于我上面的代码，我如何使用webDriver命令将我的查询（从tableName中选择*）发送到ace编辑器。？
我完全理解您为什么要导航到 ace.c9.io 网址以及我们如何使用此链接将文本值输入到我们的应用程序 Ace 编辑器？您能否提供更多意见。提前致谢
这只是一个关于如何自动化 ace 编辑器的示例。该示例导航到 ace 页面并直接在该页面的 ace 编辑器中输入文本。它演示了如何使用 webdriver 自动化 ace 编辑器，无需发送密钥，而是使用 ace 编辑器 API。
如何在我的 java 代码中使用这个 api？当你的意思是 editor.setValue 时，编辑器是一个对象，我将在哪里定义？？？所以在我向编辑器发送值之前，我应该告诉 webDriver 这是编辑器。下面是我试过的代码。我需要导入任何罐子吗？ driver.findElement(By.cssSelector("div.ace_content")).sendKeys("select * from Table"); ((JavascriptExecutor) driver).executeScript("editor.setValue('select * from Tablename');");
代码“editor.setValue('这里的新文本');”在浏览器内部执行。带有编辑器的页面上有一个全局变量“编辑器”。

【解决方案2】：

我发现在 ace 的 textarea 上使用以下 sequence 可以可靠地工作。 mouseDown，mouseUp 然后sendText。

由于 Ace 的计算方式是否应该聚焦文本区域，所以 Click 对我来说不能可靠地工作。

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

【讨论】：

【解决方案3】：

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

这对我有用（ace 1.2.6）：

const ta = document.querySelector("textarea");
ta.value = "my text\nwith 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 让开箱即用的测试变得更容易，那就太好了，但是哦。

【讨论】：