What can be the Xpath to get the background-image CSS Property of a DIV tag whose ID is mentioned in (selenium webdriver)?
Ex: (div id="abc", style="width: 538px !important; height: 242px !important; background-image: url(http://test.com/images/abc.png); position: relative; background-position: 0% 0%;")
I want to find this image with url:(http://test.com/images/abc.png)
I don't get your question, please format and expand a bit, it's kind of vague to me.
I assume you want to ask one of the following questions, but not sure which.
How to get the background-image CSS Property of a div using Selenium?
Answer: Use Selenium's native GetCssValue() (C#), css_value (Ruby), or equivalent method in other language bindings.
IWebElement abc = driver.FindElement(By.XPath("//[#id='abc']")); // use XPath as you requested
string imageUrl = abc.GetCssValue("background-image");
How to locate a div element by its background-image CSS property using XPath?
Answer: If you don't want to use ID (which you should in this example case), you can totally do it in CssSelector or XPath. (XPath is the last option you should choose though)
IWebElement abc = driver.FindElement(By.XPath("//div[contains(#style, 'background-image: url(http://test.com/images/abc.png);')]"));
How to use XPath to get an element's attribute content which has background-image?
Answer: Not really useful for Selenium, but here you have it: //div[#id='abc']/#style
Related
I'm trying to make all links on my page have a custom underline similar to this.
Here's what I have so far of a menu that's going to use this feature:
CodePen
The underline, instead of appearing under each link, appears under the "toolbox" div (the link objects' grandparent).
I've tried just making the first CodePen but with the features SCSS allows you (& and nested rules), but I seem to be missing something and won't even show the underline. I'm guessing it has something to do with my use of the parent selector.
How do I make my current code work correctly? If the issue is with my use of parent selectors in general, what is the correct selector to use in this case?
(Stack Overflow is making me put this)
You are using position: absolute in ::after therefore the underline will have absolute position not related to the <a>. Just add position relative to <a> thus inclosing the absolute ::after content to it.
.navbar {
background-color: #191919cc;
padding: 10px;
border-radius: 10px;
a {
position: relative; // here
margin: 0 10px;
}
}
codepen link: https://codepen.io/ashwin-chandran/pen/BaZjQLz
https://developers.google.com/recaptcha/docs/display
I would like to know how to apply styling to the image selector.
grecaptcha.render(
container,
parameters
)
According to the document: container is the HTML element to render the reCAPTCHA widget. Specify either the ID of the container (string) or the DOM element itself.
Then, I try to apply css to the container and pass it to the render method. However, it only applies to the grecaptcha-badge div.
I have no idea how to adjust the image-selector position.
visibility: visible; position: absolute; width: 1303px; top: 146px;
It seems the style is controlled by the google js: https://www.google.com/recaptcha/api.js
What could I do to edit the image-selector's style?
This question is quite old, but for those who want to customize the reCAPTCHA here is a solution: https://custom-captcha.com/
It has no image captchas but instead uses the new reCAPTCHA v3 in the background. You can customize the logo, the text, and the brand name as well. Also you can apply any CSS you want to it.
I am currently using gatsby for a project and when i put gatsby Img component inside Link component so that it's clickable, the image gets shrinked to its parent component(the link component). i know gatsby fluid Img stretches or shrinks to its parent's width but i want it to show as full image. i tried using fixed instead of fluid but it didn't work and it's even tried specifying width while querying.
code
frontend part
It seems clearly a CSS issue since your <Link> is shrinking to the text (sssssssssss) length.
Debug your .thumbnail class and the component to see what's happening inside. For example, a CSS rules like the following will work but maybe don't fit your design specs:
.thumbnail{
position: relative;
width: 100%;
}
.thumbnail a,
.thumbnail img {
width: 100%;
}
Take a look at the resultant HTML output the adjust your selectors, since gatsby-image wraps the <Img> inside a nested structure, what may affect your CSS rules.
It seems that you are using Bootstrap (hence the w-100) so try adding it to the wrapper (<Link> component),
I'm writing tests using Selenium WebDriver. While tests run, I want to know which element is being interacted. This can be achieved by highlighting that element before performing any action on that element. Is there any Selenium WebDriver api (for Ruby) available to achieve this?
I could find solution for this. Following is the way, using javascript, we can highlight element:
driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", element, "color: yellow; border: 2px solid yell>
And following is to remove highlight from it:
driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", height, "")
In the code:
<img style="cursor: pointer; background-color: transparent;" onclick="changeTeamHint(2155);" src="/images/icon_edit_inactive.png">
onclick="changeTeamHint(2155);" is always changing. The number increases as I add more fields to my form.
How do I get the last element in Selenium IDE? For example, if I add a text field with "changeTeamHint(2156)", how do I use Selenium IDE to select the latest one? If its 2157, it selects 2157. Etc.
Here's what I got so far: xpath=(//img[#style='cursor:pointer;'])[last()]
But my coworker told me to try to find it by onclick, and here's what I got that works: xpath=(//img[#onclick='changeTeamHint(2155);'])[last()]
I tried: xpath=(//img[#onclick='changeTeamHint();'])[last()], but it gives me an error
I think you want to do a starts-with for value of the onclick attribute:
xpath=(//img[starts-with(#onclick, 'changeTeamHint')])[last()]