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

Question

我试图在使用CodeMirror组件的web应用程序的页面上编辑查询。我使用铬合金nightwatchjs进行测试。我无法设置基础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'); 

这将预先准备的价值，无论是已经在文本区域内，所以你必须做更多的争论删除任何的存在，如果你需要。

或者，你可以使用nightwatch.js的execute()函数来调用CodeMirror的setValue()直接，依靠事实，你可以从DOM元素直接get the CodeMirror instance。

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

不同于第一个选项，它不会触发所有同样的事情直接键入会（例如提示/自动填充中），但它会设置正确的精确值。