0

Using Python and Selenium, how can I send text to an element that is 'hidden?' When trying to do it, I am getting errors that the element is obstructed by another element. The field I am trying to enter the text into has ID='query', but it is actually visible on screen and text can be entered manually via keyboard. Thank you!

Errors I have seen when trying to work-around this:

  1. selenium.common.exceptions.ElementClickInterceptedException: Message: Element textarea class="ace_text-input" is not clickable at point (75,315) because another element div class="ace_content" obscures it

  2. ElementNotInteractableException: Message: Element input id="query" class="form-control" name="query" type="hidden" could not be scrolled into view'

  3. selenium.common.exceptions.ElementClickInterceptedException: Message: Element div class="ace_line" is not clickable at point (660,316) because another element div class="ace_content" obscures it

HTML:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>Example</title>
      <link rel="shortcut icon" href="/static/img/sample.ico">

      <link href="/static/cwws/bo.min.css" rel="stylesheet">

      <script type="text/javascript" language="javascript" src="//ajax.goog.min.js"></script>
      <script> window.jQuery  || document.write('<script type="text/javascript" language="javascript" src="../sta>')
      </script>
      <script src="/static/.js"></script>

      <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!--[if lt IE 9]>
        <script src="/static/js/html5shiv.js"></script>
        <script src="/static/js/1.4.2/respond.min.js"></script>
      <![endif]-->

  <!-- Ace Libraries for Syntax Formatting -->
  <script src="/static/js/ace-code-editor/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/ace-code-editor/mode-sql.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/ace-code-editor/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/ace-code-editor/theme-sqlserver.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/ace-code-editor/snippets/sql.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/ace-code-editor/mode-snippets.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body role="document">

      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Sample</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="/query">Query</a></li>
              <li><a href="/profiles">Profiles</a></li>
              <li><a href="/metrics">Metrics</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="sampleText/docs/">Documentation</a>
              <li><a href="/logout">Log Out (avc123)</a>
            </ul>
          </div>
        </div>
      </div>

      <div class="container-fluid" role="main">
  <a href="/queries">back</a><br/>
  <div class="page-header">
  </div>
  <div id="message" class="alert alert-info alert-dismissable" style="font-family: Courier;">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Sample SQL query: <strong>.json` LIMIT 20</strong>
  </div>


  <form role="form" id="queryForm" action="/query" method="POST">
      <div class="form-group">
      <label for="queryType">Query Type</label>
      <div class="radio">
        <label>
          <input type="radio" name="queryType" id="sql" value="SQL" checked>
          SQL
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="queryType" id="physical" value="PHYSICAL">
          PHYSICAL
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="queryType" id="logical" value="LOGICAL">
          LOGICAL
        </label>
      </div>
    </div>
    <div class="form-group">
      <label for="query">Query</label>
      <div id="query-editor-format"></div>
      <input class="form-control" type="hidden" id="query" name="query"/>
    </div>

    <button class="btn btn-default" type="submit">
      Submit
    </button>
  </form>

  <script>
    ace.require("ace/ext/language_tools");
    var editor = ace.edit("query-editor-format");
    var queryText = $('input[name="query"]');
    //Hidden text input for form-submission
    editor.getSession().on("change", function () {
      queryText.val(editor.getSession().getValue());
    });
    editor.setAutoScrollEditorIntoView(true);
    editor.setOption("maxLines", 25);
    editor.setOption("minLines", 12);
    editor.renderer.setShowGutter(true);
    editor.renderer.setOption('showLineNumbers', true);
    editor.renderer.setOption('showPrintMargin', false);
    editor.getSession().setMode("ace/mode/sql");
    editor.getSession().setTabSize(4);
    editor.getSession().setUseSoftTabs(true);
    editor.setTheme("ace/theme/sqlserver");
    editor.$blockScrolling = "Infinity";
    //CSS Formatting
    document.getElementById('query-editor-format').style.fontSize='13px';
    document.getElementById('query-editor-format').style.fontFamily='courier';
    document.getElementById('query-editor-format').style.lineHeight='1.5';
    document.getElementById('query-editor-format').style.width='98%';
    document.getElementById('query-editor-format').style.margin='auto';
    editor.setOptions({
      enableSnippets: true,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: false
    });
  </script>

      </div>
    </body>
  </html>

A lot of the error mention 'ace_content' blocking the assets I need to find, I did manage to find ace_content when using the inspector (but not in the HTML print out)...

  1. .ace_editor {position: relative;overflow: hidden;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;text-align: left;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.ace_scroller {position: absolute;overflow: hidden;top: 0;bottom: 0;background-color: inherit;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;cursor: text;}.**ace_content** {position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 100%;}.ace_dragging .ace_scroller:before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';background: rgba(250, 250, 250, 0.01);z-index: 1000;}.ace_dragging.ace_dark .ace_scroller:before{background: rgba(0, 0, 0, 0.01);}.ace_selecting, .ace_selecting * {cursor: text !important;}.ace_gutter {position: absolute;overflow : hidden;width: auto;top: 0;bottom: 0;left: 0;cursor: default;z-index: 4;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;}.ace_gutter-active-line {position: absolute;left: 0;right: 0;}.ace_scroller.ace_scroll-left {box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;}.ace_gutter-cell {padding-left: 19px;padding-right: 6px;background-repeat: no-repeat;}.ace_gutter-cell.ace_error {background-image: .... there is more if needed

  2. div class=**"ace_content"** style="margin-top: 0px; width: 1169px; height: 273px; margin-left: 0px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 628px; visibility: hidden;"></div></div><div class="ace_layer ace_marker-layer"><div class="ace_active-line" style="height:19.5px;top:0px;left:0;right:0;"></div></div><div class="ace_layer ace_text-layer" style="padding: 0px 4px;"><div class="ace_line" style="height:19.5px"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor" style="left: 4px; top: 0px; width: 7.8px; height: 19.5px;"></div></div></div>

  • I cannot see the div with class ace_content on the HTML. Is this an element that appears and dissapears from the screen? – João Farias Jun 8 at 9:17
  • No, the screen is static as far as I can see. I didn't realize that ace_content wasn't shown at all... – cjg123 Jun 8 at 14:14
  • Come to think of it, I dont believe I copied the top section of the HTML readout. I wasnt sure it would be important, but it makes sense now that it would be, since these assets belong to other parent groups. Sorry, I deal almost exclusively with Appium. – cjg123 Jun 8 at 14:58
  • I've attached the entire HTML read out, but I still don't see ace_content...And this is the error I am still getting when trying to run WebDriverWait(driver3, 20).until(EC.presence_of_element_located((By.XPATH, "/html/body/div[2]/form/div[2]/div/textarea"))), selenium.common.exceptions.ElementClickInterceptedException: Message: Element textarea class="ace_text-input" is not clickable at point (75,316) because another element <div class="ace_content"> obscures it... – cjg123 Jun 10 at 12:54
  • I found ace_content using the inspector...attached it in main body. – cjg123 Jun 10 at 13:05
0

Answer: use the below to hide all obstructed elements, and then send the text. Works fine (it is just invisible...which is still fine).

element = driver3.find_element_by_xpath("/html/body/div[2]/form/div[2]/div/div[3]/div")
driver3.execute_script("arguments[0].style.visibility='hidden'", element)

element2 = driver3.find_element_by_xpath("/html/body/div[2]/form/div[2]/div/div[3]")
driver3.execute_script("arguments[0].style.visibility='hidden'", element2)

el = WebDriverWait(driver3, 20).until(EC.presence_of_element_located((By.XPATH, "/html/body/div[2]/form/div[2]/div/textarea")))

el.click()
el.clear()
el.send_keys("some text")
WebDriverWait(driver3, 20).until(EC.presence_of_element_located((By.XPATH, "/html/body/div[2]/form/button"))).click()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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