Using Python and Selenium, how can I send text to an element, that is 'hidden?'
When trying to do it, I'm getting errors, that the element is obstructed by another element. The field I'm trying to enter the text into has ID='query', but it is actually visible on screen and text can be entered manually via keyboard.
Errors I have seen when trying to work-around this:
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
ElementNotInteractableException: Message: Element input id="query" class="form-control" name="query" type="hidden" could not be scrolled into view'
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">×</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.
.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 neededdiv 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>
