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()
Related
You know how we make code like below to make an overlay for the background image or color.
HTML
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
CSS
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
z-index: -1
}
I understand that I have to put z-index to make the anchor tags clickable on the container. But also confused that why the overlay is still showing over the container while we put the z-index to -1.
How come the overlay is visible while the z-index is -1? How come only the text and anchor tag are getting z-index of 1?
Edit: I think i got your idea.
As mentioned here by Sir Praveen Kumar , dont use negative z-index, use only positive one i.e z-index:1 and z-index:2 .
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 2;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.7;
z-index: 1;
}
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
The reason why pseudo element wasn't entirely under the parent div was because it is a descendants of their associated element. So if you ever want to put the pseudo elements under the parent element, you will have to consider making another div on top of the parent element. Here is the post that I referred to figure my question.
So I was using selenium ide for some automation works and had real fun with it. But lately, when I'm in https://pay.google.com/gp/w/home/paymentmethods and try to click this button which says "Add payment method", selenium cant find it at all.
things I tried:
Css.finder:
css=.b3id-payment-method-add-instrument-link span
Xpath:idRelative
xpath=//body[#id='iframeBody']/div[3]/div[2]/div/div[4]/a/div/div/span
Xpath:position
xpath=//div[4]/a/div/div/span
xpath:innerText
xpath=//span[contains(.,'Add payment method')]
Even if I record clicks, selenium ide records things like
select frame index=0
click css=.b3id-payment-method-add-instrument-link span
which also doesn't work
What should I do to locate this specific button?
<iframe frameborder="0" src="about:blank" id="mainWidget_:0Iframe" name="mainWidget_:0Iframe" style="border: 0px; vertical-align: initial; display: block; width: 100%; min-height: calc((100vh - 69px) - 113px); position: static; top: auto; visibility: visible; z-index: auto; background-color: inherit; height: 510px; left: auto; opacity: 1; transition: all 0s ease 0s;" title=""></iframe>
Your element is in an iframe switch to it.
<div class="b3id-info-message-html b3-info-message-html" data-was-visible="true"><span data-was-visible="true">Add payment method</span></div>
a simple css selector would be
.b3id-info-message-html.b3-info-message-html
I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!
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>
Maybe I'm missing something obvious here, but so far I've found nothing that makes any sense with this. I have a scrollable div with a canvas inside of it. In FF and IE all works as expected: Using drag scrolling with the mouse, the div scrolls normally. In WebKit, however, things are flipped. If I scroll up, the content moves down, if I scroll down, it moves up. If I scroll with my mousewheel, everything moves in the right direction. It's only using mousedown on the scroll bar that's screwed up. NOTE: I am using a 3rd party library to generate the contents of the canvas, which is where all the inline styles are coming from.
My code is as follows:
#Palette {
height: 420px;
overflow: auto;
}
<div id="Palette" style="position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: move;">
<canvas width="268" height="420" tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; -webkit-user-select: none; cursor: move;">
This text is displayed if your browser does not support the Canvas HTML element.</canvas>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 700px;"></div>
</div>
</div>
This is apparently an issue with WebKit 36. It is solved in 37.