The problem is that I can't figure out how to follow a link. The link goes to the page I want when I click on the image, and the desired page opens in a new tab. It's difficult to describe, it's easier to understand from the attached code
<div class="css-1owz1l2">
<span class=" lazy-load-image-background blur lazy-load-image-loaded" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 4px; cursor: pointer; object-fit: cover; display: flex;">
<img style="height: 100%; width: 100%; object-fit: cover; border-radius: 4px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;" src="https://public.nftstatic.com/static/nft/zipped/9082041d35194edd87f9078dc9440f7b_zipped.jpeg" sx="[object Object]">
</span>
</div>
You can extract the link from src attribute of img element as following.
In case "css-1owz1l2" class is unique you can do this:
img = driver.find_element_by_xpath("//div[#class='css-1owz1l2']//img")
link = img.get_attribute("src")
Now you can use this link like this:
driver.get(link)
Or by any other way
You can trying catching the image element and clicking on it directly:
# catching the image element
image = driver.find_element_by_xpath("//div[#class='css-1owz1l2']//img")
image.click()
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>
How Can I add an Html elements inside a Cytoscape node?
E.g: I want to add to every node - 2 small buttons, so the user can click on each one of the buttons and the value inside this node will change.
Example of the graph I want to create
[IMG]http://i57.tinypic.com/1z1bp1l.jpg[/IMG]
It's not possible to render HTML in a canvas, nor would you probably want to for performance. If you really want it on the node, I suggest creating an overlay -- though that has its own set of complications in its implementation. Otherwise, you're far better off placing interactive elements separately from a node (e.g. tooltip, sidebar, menu, etc...).
mxGraph seems to do it by using an SVG foreignObject tag, and within that HTML like so:
<g style="cursor: move;">
<g>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%">
<div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 1212px; margin-left: 839px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
<div>Some HTML inside SVG</div>
</div>
</div>
</div>
</foreignObject>
</g>
</g>
Not sure I want to go there in Cytoscape as its API is too nice to start working round and you'd need to deal with the update event flow, but mxGraph is a fantastic toolkit worth knowing about in this space.
I am facing a problem with selenium IDE
I want to select/click any 2 cursors on map page
I can't use the id's because every time you refresh the map you will get another different cursors with different id's, till now i was able to select/click only one cursor on map and I can't select another different one
I used
|clickAt | //map/area/ | |
&
|clickAt | //map/area/ | |
to click at one cursor
so please help me to be able to click another
All cursor details:
map id="gmimap208" name="gmimap208">
<area log="miw" coords="11,0,12,1,13,2,14,3,14,4,14,5,14,6,14,7,14,8,14,9,14,10,13,11,12,12,12,13,11,14,10,15,10,16,9,17,9,18,8,19,7,20,7,20,7,19,6,18,6,17,5,16,4,15,4,14,3,13,2,12,2,11,1,10,1,9,0,8,0,7,0,6,0,5,1,4,1,3,2,2,2,1,4,0,11,0" shape="poly" title="" style="cursor: pointer;">
</map>
<div class="gmnoprint" style="width: 15px; height: 21px; overflow: hidden; position: absolute; opacity: 0.01; left: 373px; top: 370px; z-index: 2000;">
<img style="position: absolute; left: 0px; top: 0px; width: 15px; height: 21px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="/img/property_icons/free/normal.png" draggable="false" usemap="#gmimap226">
<map id="gmimap226" name="gmimap226">
a cursor XPath :
/html/body/div[5]/div[2]/table/tbody/tr/td[2]/div[3]/div[2]/div/div/div[3]/div[2]/div[50]/map/area
a cursor CSS :
html.win body.rtl div.content-for-layout div#page-container table tbody tr td div#Map div div div div div div.gmnoprint map#gmimap83 area
a cursor HTML :
<area log="miw" coords="11,0,12,1,13,2,14,3,14,4,14,5,14,6,14,7,14,8,14,9,14,10,13,11,12,12,12,13,11,14,10,15,10,16,9,17,9,18,8,19,7,20,7,20,7,19,6,18,6,17,5,16,4,15,4,14,3,13,2,12,2,11,1,10,1,9,0,8,0,7,0,6,0,5,1,4,1,3,2,2,2,1,4,0,11,0" shape="poly" title="" style="cursor: pointer;">
Thanks in Advance. :)
You are clicking at the first element twice.
You can specify which element to click on:
//map/area[1]
//map/area[2]
Should get you the first two.