I am using Selenium to test the functionality of web page. A Valve appears open or closed by loading the appropriate PNG file . I need to check if valve is open or closed by checking if right PNG file is loaded
How to do that with Selenium . The Xpath remains the same when either of images are loaded
Here is code behind code for that element
Blockquote
<div comp_type="CustomizedComponent" show_function="loadCustomizedComponent" class="server_binding textCenter" style="position: absolute; left: 521px; top: 26px; width: 84px; height: 50px; text-align: center; background-size: 84px 51px; transform: rotate(0deg); background-image: url("img/DD6E3CB1.png"); z-index: 15; background-repeat: no-repeat;" range="129" address="3" type="1" length="1" on_text="" off_text="" id="157235533478328" show_param="157235533478328" degree="0" tag_id="Private Tag" on_image="img/10F9F7E8.png" off_image="img/DD6E3CB1.png" mode="false">
'
Blockquote
Thanks
Try this
string backgroundImg = Driver.FindElement(By.Id("157235533478328")).GetCssValue("background-image");
if (backgroundImg.Contains("DD6E3CB1.png"))
{
//Off image
}
else
{
//On image
}
Related
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()
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'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.
Link : http://test.socie.nl
CSS :
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unexpected result :
It appears to be a four year old bug that the Android/Chrome team are ignoring:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.
The one I am going with is:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)
Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!
There is update to the method posted above (as published here).
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:
html {
width: 100%;
height: 100%
}
Solved by adding the following:
html {
height:100%;
min-height:100%;
}
body {
min-height:100%;
}
Instead of a background image, try using an <img> instead:
HTML :
<img src="imagepath" id="your-id" />
CSS :
#your-id{
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}
Actually ALL I needed if your using html tag is to add:
height: 100%;
...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.
My code currently looks like this:
<div style="position: fixed; width: 35.25%; height: 6.75%;
left: 0%; top: 4.625%; right: 64.75%; bottom: 88.625%;
color: #D1E231; text-align: center; background-color: #666666;
background-image: url('FleurTR.png'); background-position: right top;">
<div>
The <div> shows up just fine, with the grey background color, but the background image won't show up at all. What am I missing here? There's no reason I should have to specify background-attachment or background-repeat, right? (I don't want it to repeat.)
Is that image referenced correctly? Like, is it not in a folder:
background-image: url('/images/myimage.jpg');
Try testing it with an image linked from the web.