Programmatically edit CodeMirror contents without access to object

StackOverflow https://stackoverflow.com/questions/21844574

Question

I'm using Selenium to run automated tests on a page which contains a CodeMirror editor. I don't have access to the object however I do have jQuery available. How can I edit the contents of the editor in such a way that CodeMirror recognises the change?

Was it helpful?

Solution

The wrapping div DOM element (with class CodeMirror) will have a property CodeMirror that refers to the editor instance object. You can call setValue on that.

OTHER TIPS

Posting this here since the chosen answer helped me out, but I lacked some information to completely solve my problem (mostly due to me not knowing JavaScript or how to interact with WebElement properties). This is how the code would look like for Selenium/Java:

WebDriver driver = new FirefoxDriver();
WebElement queryInput = driver.findElement(By.cssSelector("div[class='CodeMirror']"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].CodeMirror.setValue(\"" + query + "\");", queryInput);

The answers posted by others are correct, but if instead of replacing codemirror's value, you want to send keyboard events then you can do something like this:

/* getting codemirror element */
WebElement codeMirror = driver.findElement(By.className("CodeMirror"));

/* getting the first line of code inside codemirror and clicking it to bring it in focus */
WebElement codeLine = codeMirror.findElements(By.className("CodeMirror-line")).get(0);
codeLine.click();

/* sending keystokes to textarea once codemirror is in focus */
WebElement txtbx = codeMirror.findElement(By.cssSelector("textarea"));
txtbx.sendKeys("Hello World");

For selenium to detect the keyboard events, you'll first have to bring codemirror into focus.

@user3233451 - in my case I had to reference the correct web element for example: By.cssSelector(".CodeMirror").

Additonally, I had two CodeMirror web elements on the page, hence I did the following:

    //declare codemirror variable
    private By codeMirrorWebElement = By.cssselector(".CodeMirror");

    //use Javascript executor to access each code mirror element via its respective index
    ((JavascriptExecutor) driver).executeScript("arguments[0].CodeMirror.setValue( '"+ query1 + "');", driver.findElements(codeMirrorWebElement).get(0));
    ((JavascriptExecutor) driver).executeScript("arguments[0].CodeMirror.setValue( '"+ query1 + "');", driver.findElements(codeMirrorWebElement).get(1));

This didn't work for me...

driver.findElement(By.cssSelector("div[class='CodeMirror']"))

But this did...

driver.findElement(By.className('CodeMirror'))

So, my code ended up as:

WebElement codeMirror driver.findElement(By.cssSelector("div[class='CodeMirror']"))
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].CodeMirror.setValue(\"" + sqlValue + "\");", codeMirror);

This was very helpful! Thanks.

If you are using cypress:

cy.get('.CodeMirror').then($cm => {
  $cm[0].CodeMirror.setValue(<some text value>)
})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top