I have below HTML path for which I am trying to capture "Inbox" value but I am not able to find particular element in google chrome using Selenium Webdriver.
HTML Path :
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: white; text-align: left; width: 84px; height: 14px; padding-left: 1px; padding-top: 1px; left: 1px; top: 1px; background-color: rgb(102, 0, 153);">Inbox"
<img src="/images/tridown.gif" style="position: absolute; width: 8px; height: 4px; top: 9px; left: 75px;">
</div>"Inbox"
<img src="/images/tridown.gif" style="position: absolute; width: 8px; height: 4px; top: 9px; left: 75px;">
</div>
I think left and top is unique identifer for Inbox dropdown, so can you please help us to write command to get "Inbox" value from above HTML
As Michas and Saritha G suggested, your HTML code is formatted correctly, but having said that. Please use this example below:
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: white; text-align: left; width: 84px; height: 14px; padding-left: 1px; padding-top: 1px; left: 1px; top: 1px; background-color: rgb(102, 0, 153);"></div>
If you want to retrieve the value for "style" attribute for the element above, you need to first locate this element:
firefox = webdriver.Firefox()
element = firefox.find_element_by_css_selector("this element css selector here")
attributeValue = element.get_attribute("style")
Then attributeValue should have this following string "position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: white; text-align: left; width: 84px; height: 14px; padding-left: 1px; padding-top: 1px; left: 1px; top: 1px; background-color: rgb(102, 0, 153);"
I am using Python as an example.
Old thread, but still...
I solved this using the value_of_css_property(). In my case, I need to wait a loader disappear. So I used this:
loader = wrapper.find_element(By.ID, "loader_view")
while loader.value_of_css_property('display') == 'block':
sleep(1)
# do some stuff...
Related
I need to take the CSS selector to use in selenium code the tag is
<div id="pbpopup-container" style="border-radius: 10px !important; box-shadow: rgb(170, 170, 170) 1px 1px 5px !important; display: block !important; overflow: hidden !important; position: fixed !important; right: 20px !important; top: 20px !important; visibility: visible; z-index: 2147483647; border: none !important; opacity: 1; bottom: auto !important; height: auto; width: auto;">
from this tag I need a CSS selector like '//div[#id='pbpopup-container'] and visibility: visible', can anyone help in this.
Since I don't have a selenium at hand right now, take this with a grain of salt:
//div[#id="pbpopup-container"](contains(#style,'visibility:visible'))]
Here is the css that you are looking for.
div[style*='visibility: visible']#pbpopup-container
Screenshot:
Find the XPath with respect to background colour
<div style="margin-right: 8px; position: relative; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background-color: #f04d3b;"></div>
I want xpath for background-color
//div[#class="jqx-grid-cell-left-align"]/div[contains(#style(),'#f04d3b')]
//div[#class="jqx-grid-cell-left-align"]/div[contains(#background-color(),'#f04d3b')]
background-color is not an attribute, it's a property in style attribute. So you have to change the xpath as shown below.
//div[#class="jqx-grid-cell-left-align"]/div[contains(#style(),'#f04d3b')] //div[#class="jqx-grid-cell-left-align"]//div[contains(#style,'background-color: #f04d3b')]
I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .