10

Suppose that I have found an element by its XPath using:

WebElement we = driver.findElement(By.xpath("some XPath"));

I know that I can get the value of a particular CSS property by we.getCssValue("some property"), but can I get the values of all the properties without having to mention their names explicitly?

Abel
  • 56,041
  • 24
  • 146
  • 247
Milad
  • 608
  • 1
  • 6
  • 14
  • There is similar questions: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element – Mahsum Akbas Sep 12 '15 at 10:21
  • 1
    actually it's only remotely similar, because @Milad wants to know how to do this within Selenium – drkthng Sep 12 '15 at 10:36

2 Answers2

20

Unfortunately

this is not possible with native Selenium API.

But using Javascript you can:

You can use some javascript support, using Seleniums' JavascriptExecutor.executeScript functionality.

The necessary js code can be found here and here(as proposed by @Mahsum Akbas)

Now here is the Java/Selenium Code that will return you a string in the form of "css-attribute01:value01; css-attribute02:value02;".

Be aware that this will return ALL css-attributes on the element.

WebElement we = driver.findElement(By.tagName("div"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
String script = "var s = '';" +
                "var o = getComputedStyle(arguments[0]);" +
                "for(var i = 0; i < o.length; i++){" +
                "s+=o[i] + ':' + o.getPropertyValue(o[i])+';';}" + 
                "return s;";

System.out.println(executor.executeScript(script, we));

You can change the script according to your needs. For example you could return a string that ONLY has all the values without the attributes. Feel free to change and experiment.

Update

If you would be interested in only the inline-styles of the element, then you can use "native" Selenium as pointed out by @JeffC in the comments:

driver.findElement(By.tagName("div")).getAttribute("style")

BUT!:

This will give you only the "inline styles" and NOT all the css-styles that are applied to an element. If you run both versions after one another and print the results you will see the immense difference.

Community
  • 1
  • 1
drkthng
  • 6,651
  • 7
  • 33
  • 53
  • Well technically you can by using `driver.findElement(By.tagName("div")).getAttribute("style")` then you have to parse the individual properties like you did. – JeffC Sep 12 '15 at 13:33
  • 3
    @JeffC with getAttribute("style") you will only get the elements inline styles, not ALL css-styles that are applied on the element! But it's a good point to complement my answer. thx. – drkthng Sep 12 '15 at 13:39
  • 1
    @ShubhamJain haha, thx mate! brought me 1k xp ;-) rly special! – drkthng Sep 12 '15 at 18:02
7

Python version of using the above script to get all of the computed style properties:

from selenium import webdriver
from pprint import pprint
#require geckodriver in the directory where this script runs
driver = webdriver.Firefox()
driver.get('https://stackoverflow.com')

#Set the element object to the inbox messages icon
element = driver.find_element_by_xpath('//a[@title="Recent inbox messages"]')

#Get all of the style properties for this element into a dictionary
styleprops_dict = driver.execute_script('var items = {};'+
                                   'var compsty = getComputedStyle(arguments[0]);'+
                                    'var len = compsty.length;'+
                                    'for (index = 0; index < len; index++)'+
                                    '{items [compsty[index]] = compsty.getPropertyValue(compsty[index])};'+
                                    'return items;', element)
pprint(styleprops_dict)
Roochiedoor
  • 887
  • 12
  • 19