advice for entering text in a CodeMirror editor field?

[Mike D]

Hello Webdriver Group,

Does anyone have advice for how to use selenium 2.0 / webdriver to
enter text in a CodeMirror editor field? The application I'm testing
has just changed some key fields to CodeMirror editors (to satisfy a
requirement for syntax highlighting), and I need to change my
automated test so that it can enter text in those fields.

CodeMirror requires you to set the textarea's "display" style
attribute to to "none," presumably so the underlying html doesn't
interfere with the way the CodeMirror css will render the text. Here's
a link to a sample CodeMirror page with a single text editing field:
http://codemirror.net/demo/theme.html

My first thought was to find the <pre></pre> tags that CodeMirror uses
to store new text, and then sendKeys there. I was able to locate those
successfully (via xpath), but sendKeys failed to enter any text.

My next approach is to try executing the javascript on the page, and
call CodeMirror's setValue method to enter the text. I'm still
fiddling with the syntax of how to execute javascript in selenium 2.0,
but I wanted to ask if anyone else has already done this, and whether
I'm on the right track.

Thanks for reading!

Mike D

[Mike D]

FYI, I found the answer, and am posting it for those who have to work
with Code Mirror 2. The key to entering text in a Code Mirror hidden
textarea is to call the setValue method. Here's an example that works
with one of Code Mirror's demo pages:

driver.get("http://codemirror.net/demo/theme.html");

String js_call = "window.editor.setValue(\"Hello World\"); ";

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(js_call);

[Eric Lineback]

You are a lifesaver. Thanks a ton!

[Eric Lineback]

I have a page that has two separate text areas using Code Mirror. Using your example works to get text in the second one. How do I get text in the first one?

On Tuesday, August 9, 2011 7:19:02 AM UTC-6, Mike D wrote:

[Eric Lineback]

I figured it out. I needed to be more specific on the variable being used in the javascript. So instead of writing just "editor", I put "editor=CodeMirror.fromTextArea(document.getElementById(\"reasonReferralNeeded\"),{lineWrapping:true})" 

Cheers.

[George Louie]

While that works, it does defeat the purpose of simulation key inputs from a user, because you are just setting the text value via javascript. Has anyone successfully done text input into a code mirror textarea via the sendKeys method in webdriver? 

g

[SuperKevy]

This seems to work for me!  

The sample will change the background to black, then add two lines of text into the control.

#encoding: UTF-8

require 'rubygems'

require 'watir-webdriver'

require 'win32ole'

ie=0

ie = Watir::Browser.new( :chrome, :switches => %w[--disable-extensions] )

ie.window.maximize()

sleep 4

ie.goto('http://codemirror.net/demo/theme.html')

sleep 4

ie.select(:id,'select').select('blackboard')

sleep 1

# first line

ie.div(:class,'CodeMirror-scroll').click

ie.send_keys( :enter )

ie.send_keys('Inside code mirror')

# new line

ie.div(:class,'CodeMirror-scroll').click

ie.send_keys( :enter )

ie.send_keys('Inside code mirror line 2')

puts ' all done'

[gayatri...@canwilltech.com]

Hi Eric,

Can you please elloberate how did u do it ?
I am facing same issue .
Pls pls help me

[malempati parvathi]

Hi Eric,

I'm also facing same issue...

can u plz help..

plz elobarte this line CodeMirror.fromTextArea(document.getElementById(\"reasonReferralNeeded\"),{lineWrapping:true})" 

Thanks........