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:
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 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...
Is there any way to get all attributes of dom element in DOJO (not specific one like domAttr.get("nodeId", "foo")).
<div style="border-width: 2px; border-color: #000000; border-radius: 0px; -moz-border-radius: 0px; height: 100px; background-color: #FFFFFF; -webkit-border-radius: 0px; position: absolute; z-index: 900; width: 193px; left: 57px; top: 106px;" position="absolute" height="100px" width="193px" background-color="#FFFFFF" border-color="#000000" border-width="2px" z-index="900" -webkit-border-radius="0px" -moz-border-radius="0px" border-radius="0px" left="57px" top="106px"></div>
I want to read all attributes in div tag.
Thanks in advance.
I'm not sure if Dojo has a wrapper for this (I've done a brief search of the 1.8.3 source), but you can use Node.attributes.
Dojo does use Node.attributes in places like here in parser.js. Note the special handling of IE8 and IE6-7, to avoid falling foul of the same traps.
Im trying to achieve an inner-shadow effect on a simple box, something like:
alt text http://gotinsane.com/test.jpg
where the green box is the content inside another box.
My problem is that if i give the content box any kind of background, the outer box box-shadow effect vanish!
Here an example of my problem (with markup and css), i've set the content height smaller to evidence the problem - atm i really dont care about IE*, this is just a test.
Any idea?
UPDATE
The content inside the box is a somewhat kind of slide, here an example (original problem).
thirtydot's answer does the trick, but it forces me to make a little hack, changing the wrapper background in function of the content: example here (thirtydot trick).
This can be a solution, but i dont like it too much and still dont understand why the outer box shadow get behind the inner box background (color, image)
UPDATE 2
Talking about this problem on another forum, i found another way: basically, instead of use box-shadow on the wrapper, that will act as a mask, I use box-shadow and border-radius directly on the content (.step elements)
However, the 'mask' effect is exactly what i was trying to accomplish, so this isnt the solution neither.
I still don't understand how and why an inner element background interfere with an outer element design, or why the shadow dropped from the outer element get behind the inner one. Could this be a css bug?
UPDATE3
Someone opened a bug on mozilla, and got this answer that clearify the 'problem':
From http://www.w3.org/TR/css3-background/#the-box-shadow :
In terms of stacking contexts and the painting order, the outer shadows of an
element are drawn immediately below the background of that element, and the
inner shadows of an element are drawn immediately above the background of
that element (below the borders and border image, if any).
In particular, the backgrounds of children of the element would paint above
the inset shadow (and in fact they paint above the borders and background of
the element itself).
So the rendering is exactly what the spec calls for.
UPDATE4
Fabio A. pointed out another solution, with css3 pointer-events.
Looks good and works on IE8 too ;)
Since I am having this problem too and I too don't see this behaviour being normal, I filed a bug report over at mozilla
I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.
edit:
Indeed it's not a bug, but just the way it's meant to work. So, on the basis of this information, I forked your jfiddle example and came up with this solution:
The markup now looks like this:
<div id="box">
<div id="wrapper">
<div id="box_content">
Content here
</div>
<div id="mask"></div>
</div>
</div>
The mask becomes another div, which is layered on top of the #box_content one by means of being absolutely positioned. This is the CSS:
#wrapper{
position: relative;
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
margin: 10px;
}
#mask {
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
pointer-events: none; /* to make clicks pass through */
box-shadow: 0 0 10px #000000 inset;
}
#box_content{
background-color: #0ef83f;
height: 100%;
}
I'm a little confused what you're actually after. If it's not quite right, let me know :)
This is my best guess.
Live Demo
CSS:
(I added in the vendor prefix rules.)
#box {
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
width: 280px;
height: 280px;
padding: 10px
}
#wrapper {
background-color: #0ef83f;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 18px #000;
-moz-box-shadow: inset 0px 0px 18px #000;
box-shadow: inset 0px 0px 18px #000;
width: 240px;
height: 240px;
padding: 20px
}
HTML:
<div id="box">
<div id="wrapper">
Content here
</div>
</div>
the problem is layered is overlapped, you can avoid it using margin or padding.
Try
http://jsfiddle.net/pramendra/FEk3c/5/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0px;
}
#wrapper{
display:inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
box-shadow:inset 0 0 10px 0 #000000;
margin: 10px;
}
#box_content{
background-color: #f00;
margin:5px;
}
Check this fiddle: http://jsfiddle.net/FEk3c/6/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0;
}
#wrapper{
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
margin: 10px;
}
#box_content{
background-color: #0ef83f;
height: 100px;
}
Just make sure the child background property is specified with rgba, like in this fiddle.
Give the parent a background-color to prevent whatever's underneath showing through.
ul {
box-shadow : inset 0 0 10px 10px gray;
background-color: white;
}
li:nth-child(even) {
background : rgba(255,0,0,0.2);
}
This works great for me without any additional DOM elements (like 'wrapper' etc.):
div.img {
display: inline-block;
position: relative;
width: 400px;
height: 280px;
background-image: url(/images/anyimage.png);
}
div.img:after {
display: inline-block;
width: 100%;
height: 300px; //parent height +20px
position: absolute;
top: -10px;
left: 0;
box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
content: ' ';
pointer-events: none;
}