Input text into textarea for codemirror python selenium

Question

I am new to selenium and trying to input text into a textarea generated by CodeMirror. I have looked at the other questions on textarea and am unable to solve my problem.

I am using Chrome and have found in sources where the textarea is and am able to click it to have the cursor blinking. However, I find that it has no attributes. How can I input text into the textarea? I have tried other elements and I have gotten either a "can't focus" or "not visible" error which I am guessing means that those elements are not the textarea.

a= browser.find_element_by_css_selector('div.CodeMirror.CodeMirror-wrap.dojoDndTarget.cm-s-sql.dojoDndContainer').click()
print a
None

I realize that adding a long source code is probably inconvenient for other users but I am not sure which CodeMirror line may refer to the textarea and am posting it for completeness. Here is the source code as well as the screenshot.

<div class="CodeMirror CodeMirror-wrap dojoDndTarget cm-s-sql dojoDndContainer" style="font-size: 12px; font-weight: normal;">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;">
<textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0">
</textarea>
</div>
<div class="CodeMirror-vscrollbar" not-content="true" style="min-width: 18px;">
<div style="min-width: 1px; height: 0px;">
</div>
</div>
<div class="CodeMirror-hscrollbar" not-content="true" style="min-height: 18px;">
<div style="height: 100%; min-height: 1px; width: 0px;">
</div>
</div>
<div class="CodeMirror-scrollbar-filler" not-content="true">
</div>
<div class="CodeMirror-gutter-filler" not-content="true">
</div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 30px; min-height: 24px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: none;">
<div class="CodeMirror-measure">
</div>
<div class="CodeMirror-measure">
</div>
<div style="position: relative; z-index: 1;">
</div>
<div class="CodeMirror-cursors" style="">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16px;">&nbsp;</div></div><div class="CodeMirror-code">
<pre class="">
<span style="padding-right: 0.1px;">
<span>
</span>
</span>
</pre>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 30px; width: 1px; top: 24px;"></div><div class="CodeMirror-gutters" style="display: none; height: 197px;">
</div>
</div>
</div>

Thanks.

Ian Lesperance · Accepted Answer · 2018-02-12 18:35:14Z

1

In Selenium, WebElement#click() doesn't return anything. If you want to interact with the element object further after clicking, you'll need to save it to a variable first.

But more importantly, you're clicking the <div> that contains the <textarea> rather than the <textarea> itself. Even if clicking the <div> gives the <textarea> focus, your element object will still be a handle on the containing <div>, which won't react meaningfully to send_keys(). If the <textarea> is where the user enters text, you must find and interact with that element:

textarea = browser.find_element_by_css_selector('.CodeMirror textarea')

(And unless the <textarea> is disabled and requires extra steps to enable it, you don't need to click() it to begin typing in it.)

Then simply send_keys() to it:

textarea.send_keys('alert("Hello, World!")')

edited Feb 12, 2018 at 18:35

answered Feb 10, 2018 at 16:46

Ian Lesperance

5,1591 gold badge30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rokman54 Over a year ago

I tried what you said and it doesn't work. I think the <textarea> is where I can input text. Do you know how I can actually access and write into this?

Ian Lesperance Over a year ago

I didn't notice there was an actual <textarea> in the DOM. I updated the answer accordingly. Let me know if that addresses it.

rokman54 Over a year ago

Thanks that resolved my problem. It turns out the textarea is disabled and does require a click.

Mugen Over a year ago

Thanks! You're a lifesaver! I had tried with xpath typing into every single textarea present on the page. It wasn't working. Then I tried with the css selector that you had given. Even though it points to a textarea, this worked instantly.

Holt Over a year ago

This does not work anymore, or if it does, there are missing information in this answer. It currently throws "Element <textarea> is not reachable by keyboard".

Collectives™ on Stack Overflow

Input text into textarea for codemirror python selenium

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related