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']")
Related
i have below html structure, how can i use python senlenium to locate pseudo element 'before',
<div tabindex="0" data-elemkey="month" data-elemtype="ListBox" data-type="elem" class=" " style="position: absolute; ">
<div style="position: absolute; left: 0px; top: 0px; height: 34px; width: 145px; z-index: 10000;">
<div class="gcell-div font-1669190550589" >
<div class="gcell-div-content v-align-center h-align-left" >
<span class="" style="pointer-events: none; max-height: 100%; max-width: 100%; ">
<i class="common-collapse-down">
::before
i have tried by :
driver.find_element(by=By.CSS_SELECTOR,value='span.listUI-arrow>i')
but because there're many same other 'span.listUI-arrow' elements, so i would like to relation with parent :data-elemkey="month ; how can i get it, thanks
So, I am trying to automate the process of downloading reports for one of my functions. The problem I am running into is that this specific site does not have a name or ID for the Username and password fields. Has anyone dealt with an issue like this before?
Here is the username field:
<input type="text" value="user" placeholder="username#whitehatsec.com" class="form-control" autocomplete="off" style="background-image:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAUBJREFUOBGVVE2ORUAQLvIS4gwzEysHkHgnkMiEc4zEJXCMNwtWTmDh3UGcYoaFhZUFCzFVnu4wIaiE+vvq6+6qTgthGH6O4/jA7x1OiCAIPwj7CoLgSXDxSjEVzAt9k01CBKdWfsFf/2WNuEwc2YqigKZpK9glAlVVwTTNbQJZlnlCkiTAZnF/mePB2biRdhwHdF2HJEmgaRrwPA+qqoI4jle5/8XkXzrCFoHg+/5ICdpm13UTho7Q9/0WnsfwiL/ouHwHrJgQR8WEwVG+oXpMPaDAkdzvd7AsC8qyhCiKJjiRnCKwbRsMw9hcQ5zv9maSBeu6hjRNYRgGFuKaCNwjkjzPoSiK1d1gDDecQobOBwswzabD/D3Np7AHOIrvNpHmPI+Kc2RZBm3bcp8wuwSIot7QQ0PznoR6wYSK0Xb/AGVLcWwc7Ng3AAAAAElFTkSuQmCC");
background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
Here is the password field:
<input type="password" value="pass" placeholder="Enter your password" class="form-control" autocomplete="off" style="background-image:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAUBJREFUOBGVVE2ORUAQLvIS4gwzEysHkHgnkMiEc4zEJXCMNwtWTmDh3UGcYoaFhZUFCzFVnu4wIaiE+vvq6+6qTgthGH6O4/jA7x1OiCAIPwj7CoLgSXDxSjEVzAt9k01CBKdWfsFf/2WNuEwc2YqigKZpK9glAlVVwTTNbQJZlnlCkiTAZnF/mePB2biRdhwHdF2HJEmgaRrwPA+qqoI4jle5/8XkXzrCFoHg+/5ICdpm13UTho7Q9/0WnsfwiL/ouHwHrJgQR8WEwVG+oXpMPaDAkdzvd7AsC8qyhCiKJjiRnCKwbRsMw9hcQ5zv9maSBeu6hjRNYRgGFuKaCNwjkjzPoSiK1d1gDDecQobOBwswzabD/D3Np7AHOIrvNpHmPI+Kc2RZBm3bcp8wuwSIot7QQ0PznoR6wYSK0Xb/AGVLcWwc7Ng3AAAAAElFTkSuQmCC");
background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
To send a character sequence to the Username field:
css_selector:
driver.find_element_by_css_selector("input.form-control[value='user'][placeholder='username#whitehatsec.com']").send_keys("DarthDobber")
xpath:
driver.find_element_by_xpath("//input[#class='form-control' and #value='user'][#placeholder='username#whitehatsec.com']").send_keys("DarthDobber")
To send a character sequence to the Password field:
css_selector:
driver.find_element_by_css_selector("input.form-control[value='pass'][placeholder='Enter your password']").send_keys("DarthDobber")
xpath:
driver.find_element_by_xpath("//input[#class='form-control' and #value='pass'][#placeholder='Enter your password']").send_keys("DarthDobber")
Worst case scenario: you can use type and placeholder attributes to locate the element.
Xpath
//input[#type='text'][#placeholder='username#whitehatsec.com']
//input[#type='password'][#placeholder='Enter your password']
This also should work
//input[#placeholder='username#whitehatsec.com']
//input[#placeholder='Enter your password']
CSS Selector
input[type='text'][placeholder='username#whitehatsec.com']
input[type='password'][placeholder='Enter your password']
This also should work
input[placeholder='username#whitehatsec.com']
input[placeholder='Enter your password']
It is quite possible that you might have missed some parent element which has some unique identifiers like form tag with a name or id. Be on the lookout for them in the html. They can provide better xpaths.
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.
I have used Web Content Display Portlet on my page to display some text. I have to apply css and insert some images for those. I have put the html code in the source. HOw do I apply css for it?
Here is the source that will go in my Web Content Display Portlet
<div class="products" style="width:1000px;">
<div class="tvc box">
<img alt="ADVISORY" title="ADVISORY" src="Index_files/ADVISORY.PNG">
<div class="txt">
<p class="hdtxt"><cufon style="width: 78px; height: 16px;" alt="ADVISORY" class="cufon cufon-canvas"><canvas style="width: 85px; height: 16px; top: 1px; left: -1px;" height="16" width="85"></canvas><cufontext>ADVISORY</cufontext></cufon></p>
</div>
Know More </div>
<div class="tvc box">
<img alt="Branch Locator" title="Branch Locator" src="Index_files/branchlocator.jpg">
<div class="txt">
<p class="hdtxt"><cufon style="width: 68px; height: 16px;" alt="BRANCH " class="cufon cufon-canvas"><canvas style="width: 82px; height: 16px; top: 1px; left: -1px;" height="16" width="82"></canvas><cufontext>BRANCH </cufontext></cufon><br><cufon style="width: 73px; height: 16px;" alt="LOCATOR" class="cufon cufon-canvas"><canvas style="width: 80px; height: 16px; top: 1px; left: -1px;" height="16" width="80"></canvas><cufontext>LOCATOR</cufontext></cufon></p>
<p>Use our branch locator to find the branch closest to you!</p>
</div>
Know More </div>
<div class="tvc box">
<img alt="EMI Calculator" title="EMI Calculator" src="Index_files/emicalculator.jpg">
<div class="txt">
<p class="hdtxt"><cufon style="width: 30px; height: 16px;" alt="EMI " class="cufon cufon-canvas"><canvas style="width: 44px; height: 16px; top: 1px; left: -1px;" height="16" width="44"></canvas><cufontext>EMI </cufontext></cufon><br><cufon style="width: 102px; height: 16px;" alt="CALCULATOR" class="cufon cufon-canvas"><canvas style="width: 109px; height: 16px; top: 1px; left: -1px;" height="16" width="109"></canvas><cufontext>CALCULATOR</cufontext></cufon></p>
<p>Knowing your home loan EMI is just a click away!</p>
</div>
Know More </div>
<div class="tvc box">
<img alt="FAQs" title="FAQs" src="Index_files/faqs.jpg">
<div class="txt">
<p class="hdtxt"><cufon style="width: 39px; height: 16px;" alt="FAQs" class="cufon cufon-canvas"><canvas style="width: 48px; height: 16px; top: 1px; left: -1px;" height="16" width="48"></canvas><cufontext>FAQs</cufontext></cufon></p>
<p>Get the answers to frequently asked questions here.</p>
</div>
Know More </div>
</div>
Each div with class "tvc box" has to appear one after another horizontally.
HOw do I apply css for it?
As administrator you can access the look and feel configuration of yout portlet.
Clicking on options icon,and choose Look and Feel.
You can see several tabs:Text styles,Background styles, border styles, advanced styling.
Advanced Styling tab allows you to enter CSS code to customize your portlet.
You can find how to do that in:
http://www.liferay.com/es/documentation/liferay-portal/6.2/user-guide/-/ai/look-and-feel-liferay-portal-6-2-user-guide-04-en
Also you can do a new theme for your site and put there your custom.css (I think is the best option, because you need to put images)
http://www.liferay.com/es/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en
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>