I am automating a web page and can click on the side links to get to the page that I need to send a value to, but I cannot find the input box element in the iFrame or panel or whatever it is on/in. I will include a pic and some HTML for information.
This gets me to the page that i need to send a value to:
Selenium.FindElementById("ROOT/Incident Management", timeOut:=10000).Click
Selenium.FindElementById("ROOT/Incident Management/Search Incidents", timeOut:=10000).Click
I have tried switching frames but I cannot see what part of the layout that textbox is part of. I need the FIND below to find the textbox "Incident ID":
Selenium.FindElementById("X11", timeOut:=2000).SendKeys "IM12345"
HTML
<div class="innerNotebookPage"><div id="X9" class="SubFormat" style="position:absolute; top:0px; left:0.0%; width:100.0%; height:832px; overflow: visible;"><span id="X10" type="label" class="Label" style="position:absolute; top:15px; left:0.0%; width:22.3%; height:22px; height:22px; text-align:right;"><label id="X11_Label" for="X11">Incident ID</label></span><div id="X11Border" myattrib="EditBorder" style="
display:inline;float: left; width: 100%;
position:absolute; top:15px; left:22.3%; width:23.5%; height:22px;" class="Text"><div id="X11Edit" class="mandatoryFieldStyle xEdit" style="height:20px;"><input type="text" id="X11" name="instance/number" dvdvar="" buttonid="" datatype="string" sctype="Text" tabindex="" style="height:18px;margin-top:1px;" maxlength="" onkeyup="
handleOnChange(this, event);
" onfocus="handleOnFocus(this, event);" onblur="handleOnBlur(this, event); applyToSameControl(this);" onclick="handleOnClick(this, event);" onchange="handleOnChange(this, event);" value="" scripttype="text"></div></div><span id="X12" type="label" class="Label" style="position:absolute; top:15px; left:45.800000000000004%; width:22.3%; height:22px; height:22px; color: #000000 ; text-align:right;"><label id="X13_Label" for="X13">Assignment Group</label></span><input type="hidden" id="X13Hidden" value=""><div id="X13Border" class="ComFill oneButton" style="
top:15px;
left:68.2%;
width:23.5%;
height:22px;
"><div id="X13Edit" class="mandatoryFieldStyle xEdit file_probsummary field_assignment" style="height:20px;"><div class="xEditOutter" style="
margin-right:22px;
"><div class="xEditInner "><input type="text" id="X13" idfill="9" for="X13" dvdvar="" scripttype="comfill" tabindex="" buttonid="comfill1425328324649" datachangeevent="" value="" flag="005" name="instance/assignment" style="height:18px;margin-top:1px" autocomplete="off" scautocomplete="1" maxlength="" onfocus="hpsm.widgets.Combo.handleOnFocus(this, event);" onblur="hpsm.widgets.Combo.handleOnBlur(this, event);" onclick="handleOnClick(this, event);" onchange="" onkeydown="" onkeyup="
lockFormOnValueChange(this);
Related
I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>
Im trying to add a date in an input field. When I use webdriver to access the the input field, using this code:
driver.find_element_by_class_name('input[class=".textbox-text.validatebox-text.textbox-prompt"]')
I get an error:
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"class selector","selector":"input[class=".textbox-text.validatebox-text.textbox-prompt"]"}
When I run a get_attribute('class') loop, I can see this class:
easyui-datebox base datebox-f combo-f textbox-f
but when I try selecting using this code:
driver.find_element_by_class_name('input[class=".easyui-datebox.base.datebox-f.combo-f.textbox-f"]')
I get this error:
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"class name","selector":"input[class=".easyui-datebox.base.datebox-f.combo-f.textbox-f"]"}
this is the html code:
<td width="114" nowrap="">
<input type="text" id="FROMDATE" class="easyui-datebox base datebox-f combo-f textbox-f" data-options="keyHandler: {
up: function(e){},
down: function(e){},
left: function(e){},
right: function(e){},
enter: function(e){handleReturn(e);},
query: function(q,e){}
},
onChange:function(newVal,oldVal){if (ignoreOnChange) return false; resetDateRange_150();}" style="width: 114px; display: none;" textboxname="FROMDATE" comboname="FROMDATE">
<span class="textbox combo datebox" style="width: 112px; height: 20px;">
<span class="textbox-addon textbox-addon-right" style="right: 0px;"></span>
<input type="text" class="textbox-text validatebox-text textbox-prompt" autocomplete="off" placeholder="" style="margin-left: 0px; margin-right: 18px; padding-top: 3px; padding-bottom: 3px; width: 86px;">
<input type="hidden" class="textbox-value" name="FROMDATE" value="">
the input field im trying to access:
<input type="text" class="textbox-text validatebox-text textbox-prompt" autocomplete="off" placeholder="" style="margin-left: 0px; margin-right: 18px; padding-top: 3px; padding-bottom: 3px; width: 86px;">
Any suggestions?
driver.find_element_by_class_name('input[class=".textbox-text.validatebox-text.textbox-prompt"]')
In above code, the value specified for class name doesn't seem to be valid.
input[class=".textbox-text.validatebox-text.textbox-prompt"] seems to be a css selector syntax. However, it would require one correction.
The valid css selector is either :
input.textbox-text.validatebox-text.textbox-prompt
or
input[class='textbox-text validatebox-text textbox-prompt']
I would suggest using one of the following instead :
driver.find_element_by_css_selector("input.textbox-text.validatebox-text.textbox-prompt")
driver.find_element_by_css_selector("input[class='textbox-text validatebox-text textbox-prompt']")
I would like to know if there is a way to apply the Material Design Lite button style to a file picker, i.e. a component created on an HTML page via:
<input type="file" id="filePicker" />
I would like the "Browse" button of the component to have the look of a Raised button (with ripple if possible). See http://www.getmdl.io/components/#buttons-section.
Thanks!
Using CSS, do you mean something like this?
<style>#file { display: none }</style>
<input type="file" id="file">
<label for="file" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">+</i>
</label>
https://jsfiddle.net/sj838cLg/
Currently, there's no "official" way of doing that. According to the discussion on this issue, the reason is that there's no Material Design specification for that component, so they don't have a guideline to style it. On that same page, the user kybarg provided a CSS/JavaScript code to style a file picker which kind of matches the Material Design specification, so you can use that code:
HTML:
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" />
<label class="mdl-textfield__label">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text"/>
<label class="mdl-textfield__label">Position</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
<input class="mdl-textfield__input" placeholder="File" type="text" id="uploadFile" readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
</div>
</div>
</form>
CSS:
html {
width: 100%;
}
body {
background: #f5f5f5;
margin: 50px auto;
width: 512px;
}
.mdl-button--file {
input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
}
.mdl-textfield--file {
.mdl-textfield__input {
box-sizing: border-box;
width: calc(100% - 32px);
}
.mdl-button--file {
right: 0;
}
}
JavaScript:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.files[0].name;
};
But as there's no official specification, you probably won't find an official implementation from the MDL team for now.
The problem:
I have a div where I will have a list of selections for users to choose. In this div, i have to separate the selections. Please refer to this link for image http://imgur.com/FQub7.
the code is here:
<div id="personal" class="personal"> Personal Details </div>
<div id="menu" class="menu"> Permit </div>
<div id="menulist" class="menulist"> -Apply <br />
-Renew
-Track <br />
-Progress <br />
-Information </div>
<div class="menu2" id="menu2">Records</div>
<div class="menulist2" id="menulist2">-Permits<br />
-Training<br />
-Training Schedule<br />
-Accidents & <br />
Convictions</div>
</div>
And the code for CSS is here:
.personal
{
position:absolute;
color:#fff;
top:210px;
left:20px;
font-size:20px;
font-family:'TrajanProBold';
width:20%;
}
.menu
{
position:absolute;
color:#fff;
top:255px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:289px;
}
.menulist
{
position:absolute;
color:#fff;
top:295px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}
.menu2
{
position:absolute;
color:#fff;
top:401px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:285px;
}
.menulist2
{
position:absolute;
color:#fff;
top:441px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}
It might be a character encoding issue. Try opening your source code in NotePad++, switch the encoding to UTF-8, and then repost.
Use http://www.fontsquirrel.com/fontface/generator to generate font, If error still persist, most likely its due to the font file that is corrupted. After changing the font file, the matter is solved.
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>