Updating the editor contents in CodeMirror 6 from Selenium

Question

In CodeMirror 5, it is possible for a Selenium test to extract an property called CodeMirror on the DOM Element styled with class CodeMirror, and call setValue on that property to change the editor text but this does not work with CodeMirror 6.

The hierarchy of DIVs is very different in CodeMirror 6, with style classes such as cm-editor, cm-theme and cm-content, and attempting to pick off the CodeMirror property returned undefined.

Is there an equivalent "way in" to modify the editor contents in CodeMirror 6?

Answer 1

The solution is to execute the internals of CodeMirror 6 utility method EditorView.findFromDOM using similar logic to the CodeMirror 5 approach of finding a Selenium WebElement by its CSS class and then injecting a function into the page under test that can write to the editor.

Use Selenium calls to locate the WebElement webElement with class cm-content.

Then the following code can overwrite the contents of the editor with string "foo".

webDriver.executeScript(
    "const cm = arguments[0].cmView.rootView.view;\n" +
        'cm.dispatch({ changes: {from: 0, to: cm.state.doc.length, insert: "foo"}});',
    webElement
);