通过Protractor在Ace Editor中插入文本会引发错误

Posted 2021-04-16

我正在尝试运行自动化测试，测试用例的其中一个步骤是清除Ace编辑器并在其中插入文本。

之前我有定期内容可编辑的DIV，我能够在其中插入文本，但在切换到Ace Editor之后不再插入。

我所做的就是在元素上调用“clear”方法，然后在其上调用“sendText”。我尝试在清除之前添加“click”方法以确保Ace Editor确实具有焦点并且它确实将焦点带到Ace Editor但它仍然会抛出一个错误，该元素应该是用户可编辑的以清除它。

为了防万一，我还试着在清理它之前进行5s的睡眠，在Ace让div满足之前，Clearing会被触发。

这是准确的错误。

Failed: invalid element state: Element must be user-editable in order to clear it.

答案

棘手的问题。由于Ace Editor不是本机浏览器元素，因此我查看它们提供的api。好像你可以使用.selection.selectAll()和.removeLines()

如果我是你 - 我会尝试调用JS函数，它选择一切，并调用.removeLines（）

await browser.executeScript(`editor_reference.selection.selectAll(); editor_reference.removeLines()`) // variable will be diferent, depending how you connected editor object

http://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.executeScript

https://ace.c9.io/#nav=api&api=editor

您可以在他们的示例页面上查看它是如何工作的（https://ace.c9.io/） - 在浏览器控制台中执行此操作，编辑器应该被清除：

editor.selection.selectAll(); editor.removeLines()

另一答案

发送ctrl-a密钥（mac上的cmd-a）在键入之前选择所有密钥，因此不需要清除

另一答案

我之前没有使用Ace编辑器的经验。我使用https://ace.c9.io/build/kitchen-sink.html的demo ace编辑器为您面临的问题找到解决方案。

我在演示版Ace编辑器中测试了下面的代码，它运行正常。不确定如何在您的应用程序中实现ace编辑器。您可以在您的应用程序中尝试它并提供您的想法。

browser.actions().mouseMove($(".ace_active-line")).click()
.sendKeys(protractor.Key.chord(protractor.Key.COMMAND, "a"))
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys("content in line1
content in line2")
.perform()

如果您使用的是Windows机器，请使用protractor.Key.CONTROL而不是protractor.Key.COMMAND。

希望这会好起来的！