Need help sending text to field



  • 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;">

      ```



  • 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()
    


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2