python Selenium send_keys到Jupyter笔记本

Question

I am attempting to automate input to a Jupyter notebook with selenium in python.

I am attempting to use the send_keys() method with various elements within the DOM and all that I have tried so far have the following issue:

selenium.common.exceptions.ElementNotInteractableException: Message: Element <span> is not reachable by keyboard

So far I have attempted locators that return the following elemets:

• ('tag name', 'textarea') [However, this is hidden and therefore not interactable]
• ('tag name', 'pre') under the ('class', 'CodeMirror-code') element
• ('tag name', 'span') under the ('class', 'CodeMirror-code') element
• ('tag name', 'span') under the span above

There is no apparent input in the DOM that can be seen. Has anyone attempted to automate a Jupyter notebook?

It appears that when manually typing into the textarea on the screen the DOM is dynamically changing the span elements below...

Here is the relevant part of the DOM I am working with and a screenshot of the textarea

<div class="cell code_cell rendered selected" tabindex="2">
   <div class="input">
      <div class="run_this_cell" title="Run this cell"><i class="fa-step-forward fa"></i></div>
      <div class="prompt input_prompt"><bdi>In</bdi>&nbsp;[&nbsp;]:</div>
      <div class="inner_cell">
         <div class="ctb_hideshow">
            <div class="celltoolbar"></div>
         </div>
         <div class="input_area">
            <div class="CodeMirror cm-s-ipython">
               <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 5.59375px; left: 5.59375px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div>
               <div class="CodeMirror-vscrollbar" cm-not-content="true">
                  <div style="min-width: 1px; height: 0px;"></div>
               </div>
               <div class="CodeMirror-hscrollbar" cm-not-content="true">
                  <div style="height: 100%; min-height: 1px; width: 0px;"></div>
               </div>
               <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
               <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
               <div class="CodeMirror-scroll" tabindex="-1">
                  <div class="CodeMirror-sizer" style="margin-left: 0px; min-width: 8.59375px; margin-bottom: -15px; border-right-width: 15px; min-height: 28px; padding-right: 0px; padding-bottom: 0px;">
                     <div style="position: relative; top: 0px;">
                        <div class="CodeMirror-lines" role="presentation">
                           <div role="presentation" 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="visibility: hidden;">
                                 <div class="CodeMirror-cursor" style="left: 5.59375px; top: 0px; height: 17px;">&nbsp;</div>
                              </div>
                              <div class="CodeMirror-code" role="presentation">
                                 <pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div style="position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div>
                  <div class="CodeMirror-gutters" style="display: none; height: 43px;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="output_wrapper">
      <div class="out_prompt_overlay prompt" title="click to expand output; double click to hide output"></div>
      <div class="output"></div>
      <div class="btn btn-default output_collapsed" title="click to expand output" style="display: none;">. . .</div>
   </div>
</div>

NOTE I have been successful when changing the DOM with javascript execution by making the textarea visible and then sending keys to it. (This was done by removing hidden; from the style attribute in the parent div element that it inherited from. However, I am looking for a solution which does not require altering the DOM.

Answer 1

I think the problem is that you're trying to use sendKeys() on an element that is not a text input or textarea.

Instead try using Actions, after clicking the target element:

Actions builder = new Actions(driver);
builder.SendKeys("My input").Perform();

I tested this on a jsfiddle.net (which doesn't use a standard textarea either) and it did the job.

My example is in c#, the Python documentation for performing action chaining can be found here .

I hope this helps.