How do I set the value to codeMirror text field through Selenium.

I am able to click on the text field through xpath.

But not able to set a value to it.

I tried using sendKeys() method, but it's not working.

I also tried first clicking the text field and then using sendkey() method, still no luck

Following is the xpath


Edit: HTML code is as mentioned below

<div class="CodeMirror-scroll" tabindex="-1" draggable="true">
<div style="position: relative; min-height: 100%;">
<div class="CodeMirror-sizer" style="margin-left: 29px; min-height:75.5px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: medium none;">
<div class="CodeMirror-measure">
<div style="position: relative; z-index: 1; display: none;"></div>
<div style="">
<div style="position: relative;">
<div style="position: relative;">
<div style="position: relative;">
<div style="position: relative;">
<div style="position: relative;">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 14px;"> 
  • paste html code Nov 24, 2015 at 10:39
  • If you edit your title to reflect your specific question you will likely get more people to assist you. Currently it is a little generic
    – ECiurleo
    Nov 24, 2015 at 11:44
  • Very hard to understand your question. Please re-read it yourself. My understanding is that your want the link for codemirror to be after the <pre> tag? selenium isn't used to swap out pieces of tags like that. You could do that with actual js on the page or through js that you load into the seleniumIDE thru Variables/user-extensions.js (standard file name for included js). Without the IDE you need to include the js file. Nov 24, 2015 at 12:00

1 Answer 1


I have had a play with the field. Newly entered text creates a new tag depending on where it is entered.

    <!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
  var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true

These changes then create new values as follows.

 <pre class=" CodeMirror-line ">
<span style="padding-right: 0.1px;">    
<span class="cm-property">monkey</span></span>


    <span style="padding-right: 0.1px;">  
<span class="cm-variable">monkey</span></span>

Realistically, this will mean you need to insert the value in the specific location (xpath) required and I don't think you can accomplish it by simply selecting the box and sending keys.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.