I am wondering if it is possible (but I have a hunch it's not..) to retrieve the absolute URL of an image that is loaded by a specific CSS class.
For example:
<div class="rabbit">
rabbit in css has a background image... how do I get that background image URL?
The reason why I ask on how to do this in Selenium IDE is because in my company we use it.
I am still googling and since I am not very proficient at JS, I could easily be missing a simple solution!
here's a quick pointer
You'll need to use storeEval to run some js and store the value, so look at the Selenium IDE docs for that
Then the js will be something like this...
getComputedStyle(document.getElementById('hireme'),'').getPropertyValue('background-image');
if you run the snippet above, in the console on this page you should get something like this...
"url(http://careerscdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png)"
Which will hopefully be good enough for any asserts you want to make
You'll need to replace the document.getElementById('hireme') with document.getElementsByClassName('rabbit')[0];
Hope this helps, use comments if you need any clarification.
You may also need to add this.browserbot.getCurrentWindow(). before the call to document.getElementById
Related
There is this button that when I try to click on, he kinda moves a little and opens a sub-menu. The solution is easy, just click on the div a few levels above him (still the button). But he is always changing class names.
I mannage to do it using this aberation //div[#style]/span[#aria-label]/../../../../../...
I also tried to use //div[#style]/span[#aria-label]/parent::div[#role="option"], but it did not work, and I don't know why.
Does anyone have any suggestions to make it more decent? I am sure that the "../" was not mean to be used on so many levels...
Also, I was trying to use CSS selectors for my entire project, but after spending some hours looking at StackOverflow answers, the solution seems to be use XPATH. If there is a way to do this operation with CSS Selectors, I would be very interested.
You can shorten and make your XPath expression more readable with :
//div[#style]/span[#aria-label]/ancestor::*[5]
where ancestor::*[5] replaces /../../../../../...
There are many buttons sharing the same class.
May have to go with clicking the link /account/logout'.
This is the code I'm trying to use:
input class="btnRed text-uppercase fo_white" value="Logout" onclick="window.location.href='/account/logout';" type="button"
Hard to say because you didn't provide enough info, but you could probably make it work by using value attribute. Something like this if you are using java.
driver.findElement(By.cssSelector("[value='Logout']")).click();
Not pretty solution, but give it a try:
driver.findElement(By.cssSelector(".btnRed.text-uppercase.fo_white")).click();
Looking at your HTML DOM this command will work for you:
driver.findElement(By.xpath("//input[#value='Logout']")).click();
Let me know if it works for you.
Looking at your HTML, this should work
driver.findElement(By.xpath("//input[#value='Logout'][#type='button']")).click();
Let me know if it works.
Is your element visible/enabled? In order to select an element, it must be present in your DOM. If the element is activated through an event, it cannot be selected until the event occurs.
Take a look at this post. This other post also have good ideas.
I'm having this requirement in which i need to access an element on my page and want to get all the properties of the element. I have already written a webdriver script to get the id,name,css,linktext but i'm not getting the idea how to get the xpath and css selector for that element.
One thing which i'm having in my mind is select the element using Selenium Ide and in the Select tab it will get all the attribute value which is very useful for me, but how to get this result in my selenium webdriver.
I dont know whether this is possible or not but if someone can give me some reference that will be very useful.
Hope for some positive answers.
You can generate absolute xpath. Please take a look at this: https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/5520
Css and xpath selectors are based on the element attributes and/or tags.
You can write a method to generate some selectors but this does not guarantee that your selector would be efficient and it can break even when a slight change in the page is done.
Even if you are using a method like #arun-prakash suggested for xpath is the same thing. I don't see the reason behind this.
You will have to use a selector to identify the element so why get the selector again? You should ask the reason and how these selectors would be used.
How to change this below Xpath to css? Please help.
//button[text()='Continue' and #class='buttonLargeAlt' and #type='submit']
Unfortunately, you can't.
The problem is that CSS selectors can't find by text. Therefore, you can't translate text()='Continue' XPath to a working CSS selector. This is one of the two main reasons for XPaths to be actually used till today for HTML elements selecting.
There was a :contains() pseudo class for this in CSS3, but it's long gone. Sizzle, the JS engine for CSS selecting in Selenium, has kept it, though. So if your browser doesn't support native CSS selecting (or you disable it), you can use it like this:
button.buttonLargeAlt:contains('Continue')[type='submit']
I normally use this cssify, This is pretty cool
I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.
Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.
Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?
CSS Usage is a great extension for firefox. It tells which css are currently used in a page.
Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/
There are two tools that I think might help you out.
helium is a javascript tool that will discover any unused css rules.
csscss is a source code analyzer that will report any duplication. I'm biased because I wrote csscss precisely because I couldn't find anything that did this. But many people seem to find it useful.
250kb is really such a big figure for just CSS files.
The templates generally have all the CSS required for all the pages in a single file.
I would suggest:
Do not cut your CSS code, they might be needed some point of time.
Instead i would suggest, break your CSS file into number of small files for different page stylings,
such as a different CSS for login page, different CSS file for home page, etc.
Read your own CSS and HTML code vigorously to find out which significant part of CSS code is used in which HTML section.
Update:
You may try Removed Unused CSS - CSS optimizer.
I personally did not use it just hope it works for you.