使用 nightwatchjs 测试其中包含 CodeMirror 组件的页面

Question

我正在尝试编辑 Web 应用程序页面上的查询，该应用程序使用 CodeMirror component. I am using nightwatchjs with selenium in chrome 进行测试。我无法设置底层 textarea 元素，因为它不可见。 Nightwatchjs setValue 方法不起作用，因为查询在可编辑的 div.

中

示例尝试：

module.exports = {

'Testing save code change' : function (browser) {

browser
  .url("http://codemirror.net/index.html")
  .waitForElementVisible("#demo", 3000)
  .waitForElementVisible('.CodeMirror-code div:nth-child(3) .cm-string', 3000)
  .setValue('.CodeMirror-code div:nth-child(3) .cm-string', 'New String');

 }

};

任何人都可以提出可行的方法吗？

Answer 1

您可以单击 CodeMirror 元素，然后使用 keys() 进行输入。

browser.click('.CodeMirror textarea').keys('New String');

这会将值添加到文本区域内已有的任何内容之前，因此如果需要，您必须做更多的工作才能删除那里的任何内容。

或者，您可以直接从 DOM 元素使用 nightwatch.js 的 execute() function to call CodeMirror's setValue() directly, relying on the fact that you can get the CodeMirror instance。

browser.execute(function(text) {
    document.getElementsByClassName('CodeMirror')[0].CodeMirror.setValue(text);
}, ["you could also pass a variable in here"]);

与第一个选项不同，它不会触发与直接输入（例如 hints/autocompletions）相同的所有内容，但它会正确设置一个准确的值。

使用 nightwatchjs 测试其中包含 CodeMirror 组件的页面

Using nightwatchjs to test a page with a CodeMirror component in it

javascript

selenium

automated-tests

codemirror

nightwatch.js